A Vue Component to pick a ranged datetime in calendar. Built alongside Vue 2.x . This datepicker utilize moment for translations.
codepen demo : https://codepen.io/limbara/pen/YzYmdXz sandbox demo : https://codesandbox.io/s/determined-lumiere-oli22p
Clone the repo and run 'npm install && npm run serve' for local demo
npm i vue-time-date-range-picker@version-1
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>
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 |
available-dates | Object | refer below | Allow only 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 |
available-dates | Object | refer below | Allow only 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) |
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 |
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 |
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 |
If accidentially both disabled dates and available dates are provided, disabled dates take priority.
Below is values that're available for props "available-dates"
Key | Type | Default | Description |
---|---|---|---|
dates | [ ]Date | allow dates matching array of Date object | |
from | Date | allow dates from this date | |
to | Date | allow dates until this date | |
ranges | Object | allow dates matching object of date "from" & "to" | |
custom | Function | allow dates with function |
If accidentially both disabled dates and available dates are provided, disabled dates take priority.
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 |
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 |
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 |
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 |
on-reset | On reset selection |
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 |
on-reset | On reset selection |
** available languages refer to moment **