vue-time-date-range-picker

A Vue Component to pick a ranged datetime in calendar. Built alongside Vue 2.x . This datepicker utilize moment for translations.

• Demo
• Install
• Usage
• Props
• Events
• Translations

Demo

codepen demo : https://codepen.io/limbara/pen/ZEQxoZZ sandbox demo : https://codesandbox.io/s/example-vue-time-date-range-picker-byw7g

Clone the repo and run 'npm install && npm run serve' for local demo

Install

npm i vue-time-date-range-picker

Usage

Usage within JS project

import DatePicker, { CalendarDialog } from 'vue-time-date-range-picker/dist/vdprDatePicker'

export default {
  //...
  components: {
    DatePicker,
    CalendarDIalog
  }
  //...
}

You can use CalendarDialog Component if you want to implement your own input element

Usage from CDN

<div id="app">
  <datepicker></datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment-with-locales.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vdprDatePicker.js"></script>
<script>
const app = new Vue({
  el: '#app',
  components: {
    'datepicker' : vdprDatePicker.default,
    'calendar-dialog' : vdprDatePicker.CalendarDialog
  }
})
</script>

Available props

Below is props that're available in DatePicker Component

** date format refer to moment **

| Prop | Type | Default | Description | |---------------------------------------|---------------|-------------------|---------------------------------------------------------| | initial-dates | [Date, Date] | | Initial value for the datepicker | | inline | Boolean | false | Use datepicker inline style | | language | String | en | Languange | | format | String | DD/MM/YYYY HH:mm | Format for display date input | | same-date-format | Object | refer below | Format for display date input if start & end date same | | disabled-dates | Object | refer below | Disable certain dates | | date-input | Object | | Input configuration | | show-helper-buttons | Boolean | | Show helper buttons | | helper-buttons | [ ]Object | | Custom helper button | | calendar-date-input | Object | refer below | Calendar input date configuration | | calendar-time-input | Object | refer below | Calendar input time configuration | | switch-button-label | String | | Switch Button label | | switch-button-initial | Boolean | | Switch Button initial value | | apply-button-label | String | | Apply Button Label | | reset-button-label | String | | Reset Button Label | | is-monday-first | Boolean | | Calendar start from Monday instead of Sunday |

Below is props that're available in Calendar Dialog Component

| Prop | Type | Default | Description | |---------------------------------------|-----------------|-------------|---------------------------------------------| | initial-dates | [Date, Date] | | Initial value for the datepicker | | inline | Boolean | false | Use datepicker inline style | | language | String | en | Languange | | disabled-dates | Object | refer below | Disable certain dates | | show-helper-buttons | Boolean | true | Show helper buttons | | helper-buttons | [ ]Object | [ ] | Custom helper button | | date-input | Object | | Calendar input date configuration | | time-input | Object | | Calendar input time configuration | | switch-button-label | String | All Days | Switch Button label | | switch-button-initial | Boolean | false | Switch Button initial value | | apply-button-label | String | Apply | Apply Button Label | | reset-button-label | String | Reset | Reset Button Label | | is-monday-first | Boolean | false | Calendar start from Monday (default Sunday) |

Same Date Format

Below is values that're available for props "same-date-format"

| Key | Type | Default | Description | |-------------|----------------|---------------------|------------------------------------------| | from | String | DD/MM/YYYY, HH:mm | format selected start date | | to | String | HH:mm | format selected end date |

Date Input

Below is values that're available for props "date-input"

| Key | Type | Default | Description | |-------------|-----------------------|---------------------|-------------------------------------------| | inputClass | String|Array|Object | | class for input element | | refName | String | | ref name for input element | | name | String | | attribute name | | placeholder | String | | attribute placeholder | | id | String | | atttibute id | | required | Boolean | | attirbute required |

Disabled Dates

Below is values that're available for props "disabled-dates"

| Key | Type | Default | Description | |-------------|-----------------|------------|---------------------------------------------------------| | dates | [ ]Date | | disable dates matching array of Date object | | from | Date | | disable dates from this date | | to | Date | | disable dates until this date | | ranges | Object | | disable dates matching object of date "from" & "to" | | custom | Function | | disable dates with function |

Helper Buttons

Below is values that're available for props "helper-buttons"

| Key | Type | Default | Description | |-------------|----------------|--------------|------------------------------------------| | name | String | | button name | | from | String | | format selected start date | | to | String | | format selected end date |

C Date Input

Below is values that're available for props "calendar-date-input" or "date-input" for Calendar Dialog component

| Key | Type | Default | Description | |-------------|-----------------------|--------------|------------------------------------------| | labelStarts | String | Starts | start date label | | labelEnds | String | Ends | ends date label | | inputClass | String|Array|Object | | class for input element | | format | String | DD/MM/YYYY | date format |

C Time Input

Below is values that're available for props "calendar-time-input" or "time-input" for Calendar Dialog component

| Key | Type | Default | Description | |-------------|-----------------------|--------------|------------------------------------------| | inputClass | String|Array|Object | | class for input element | | readonly | Boolean | false | attribute readonly | | step | Number | 60 | step value in minutes |

Events

Below is events that're available in DatePicker Component

| Event | Output | Description | |-----------------------|---------------|-------------------------------------------------------------| | date-applied | Date, Date | Dates is applied to date input. Output start & end date | | on-prev-calendar | | On calendar page previous | | on-next-calendar | | On calendar page next | | datepicker-opened | | Datepicker is opened | | datepicker-closed | | Datepicker is closed | | select-date | Date, Date | A date is selected in calendar. Output start & end date | | select-disabled-date | Date | A disabled date is selected in calendar |

Below is events that're available in Calendar Dialog Component

| Event | Output | Description | |-----------------------|---------------|-------------------------------------------------------------| | on-apply | Date, Date | Dates is applied to date input. Output start & end date | | on-prev-calendar | | On calendar page previous | | on-next-calendar | | On calendar page next | | select-date | Date, Date | A date is selected in calendar. Output start & end date | | select-disabled-date | Date | A disabled date is selected in calendar |

Translations

** available languages refer to moment **