vue2-datepicker
v3.0.0-beta.1
A Datepicker Component For Vue2
0/weekUpdated 3 years agoMITUnpacked: 795.8 KB
Published by xiemengxiong
npm install vue2-datepickervue2-datepicker
> A Datepicker Component For Vue2
For Vue 3.0, you can use vue-datepicker-next from the same author
Demo
Install
``bash`
$ npm install vue2-datepicker --save
Usage
`html
`
Theme
If your project uses SCSS, you can change the default style variables.
To create a scss file. e.g. datepicker.scss:
`scss
$namespace: 'xmx'; // change the 'mx' to 'xmx'. then
$default-color: #555;
$primary-color: #1284e7;
@import '~vue2-datepicker/scss/index.scss';
`
Internationalization
The default language of v3.x is English. If you need other locales,
you can import a locale file.
Once you import a locale, it becomes the active locale.
`js
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import 'vue2-datepicker/locale/zh-cn';
`
You can also override some of the default locale by lang.
Full config
`html
`
$3
| Prop | Description | Type | Default |
| ------------------- | ------------------------------------------------ | ----------------------------------------------- | -------------- |
| type | select the type of picker | date \|datetime\|year\|month\|time\|week | 'date' |
| range | if true, pick the range date | boolean | false |Date
| format | to set the date format. similar to moment.js | token | 'YYYY-MM-DD' |
| formatter | use your own formatter, such as moment.js | object | - |
| value-type | data type of the binding value | value-type | 'date' |
| default-value | default date of the calendar | | new Date() |object
| lang | override the default locale | | |string
| placeholder | input placeholder text | | '' |boolean
| editable | whether the input is editable | | true |boolean
| clearable | if false, don't show the clear icon | | true |boolean
| confirm | if true, need click the button to change value | | false |string
| confirm-text | the text of confirm button | | 'OK' |boolean
| multiple | if true, multi-select date | | false |boolean
| disabled | disable the component | | false |(date: Date, currentValue: Date[]) => boolean
| disabled-date | specify the date that cannot be selected | | - |(date: Date) => boolean
| disabled-time | specify the time that cannot be selected | | - |boolean
| append-to-body | append the popup to body | | true |boolean
| inline | without input | | false |string
| input-class | input classname | | 'mx-input' |object
| input-attr | input attrs(eg: { name: 'date', id: 'foo'}) | | — |boolean
| open | open state of picker | | - |object
| default-panel | default panel of the picker | year\|month | - |
| popup-style | popup style | | — |Array<{text, onClick}>
| popup-class | popup classes | | — |
| shortcuts | set shortcuts to select | | - |boolean
| title-format | format of the tooltip in calendar cell | token | 'YYYY-MM-DD' |
| partial-update | whether update date when select year or month | | false |string
| range-separator | text of range separator | | ' ~ ' |boolean
| show-week-number | determine whether show week number | | false |Array
| hour-step | interval between hours in time picker | 1 - 60 | 1 |
| minute-step | interval between minutes in time picker | 1 - 60 | 1 |
| second-step | interval between seconds in time picker | 1 - 60 | 1 |
| hour-options | custom hour column | | - |Array
| minute-options | custom minute column | | - |Array
| second-options | custom second column | | - |boolean
| show-hour | whether show hour column | | base on format |boolean
| show-minute | whether show minute column | | base on format |boolean
| show-second | whether show second column | | base on format |boolean
| use12h | whether show ampm column | | base on format |boolean
| show-time-header | whether show header of time picker | | false |string
| time-title-format | format of the time header | token | 'YYYY-MM-DD' |
| time-picker-options | set fixed time list to select | time-picker-options | null |
| prefix-class | set prefix class | | 'mx' |number
| scroll-duration | set the duration of scroll when hour is selected | | 100 |
#### Token
| Uint | Token | output |
| -------------------------- | ----- | -------------------------------------- |
| Year | YY | 70 71 ... 10 11 |
| | YYYY | 1970 1971 ... 2010 2011 |
| | Y | -1000 ...20 ... 1970 ... 9999 +10000 |
| Month | M | 1 2 ... 11 12 |
| | MM | 01 02 ... 11 12 |
| | MMM | Jan Feb ... Nov Dec |
| | MMMM | January February ... November December |
| Day of Month | D | 1 2 ... 30 31 |
| | DD | 01 02 ... 30 31 |
| Day of Week | d | 0 1 ... 5 6 |
| | dd | Su Mo ... Fr Sa |
| | ddd | Sun Mon ... Fri Sat |
| | dddd | Sunday Monday ... Friday Saturday |
| AM/PM | A | AM PM |
| | a | am pm |
| Hour | H | 0 1 ... 22 23 |
| | HH | 00 01 ... 22 23 |
| | h | 1 2 ... 12 |
| | hh | 01 02 ... 12 |
| Minute | m | 0 1 ... 58 59 |
| | mm | 00 01 ... 58 59 |
| Second | s | 0 1 ... 58 59 |
| | ss | 00 01 ... 58 59 |
| Fractional Second | S | 0 1 ... 8 9 |
| | SS | 00 01 ... 98 99 |
| | SSS | 000 001 ... 998 999 |
| Time Zone | Z | -07:00 -06:00 ... +06:00 +07:00 |
| | ZZ | -0700 -0600 ... +0600 +0700 |
| Week of Year | w | 1 2 ... 52 53 |
| | ww | 01 02 ... 52 53 |
| Unix Timestamp | X | 1360013296 |
| Unix Millisecond Timestamp | x | 1360013296123 |
#### formatter
The formatter accepts an object to customize formatting.
`html`
`js
data() {
return {
// Use moment.js instead of the default
momentFormat: {
//[optional] Date to String
stringify: (date) => {
return date ? moment(date).format('LL') : ''
},
//[optional] String to Date
parse: (value) => {
return value ? moment(value, 'LL').toDate() : null
},
//[optional] getWeekNumber
getWeek: (date) => {
return // a number
}
}
}
}
`
#### value-type
set the format of binding value
| Value | Description |
| ----------------- | ---------------------------------------------------- |
| 'date' | return a Date object |
| 'timestamp' | return a timestamp number |
| 'format' | returns a string formatted using pattern of format |
| token(MM/DD/YYYY) | returns a string formatted using this pattern |
#### shortcuts
The shortcuts for the range picker
`js`
[
{ text: 'today', onClick: () => new Date() },
{
text: 'Yesterday',
onClick: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 1000 24);
return date;
},
},
];
| Attribute | Description |
| --------- | ----------------------------------------- |
| text | title of the shortcut |
| onClick | callback function , need to return a Date |
#### time-picker-options
Set fixed time list to select;
`js`
{start: '00:00', step:'00:30' , end: '23:30', format: 'HH:mm' }
| Attribute | Description |
| --------- | ------------------------------------ |
| start | start time |
| step | step time |
| end | end time |
| format | the default is same as prop format` |
$3
| Name | Description | Callback Arguments |
| --------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| input | When the value change(v-model event) | date |
| change | When the value change(same as input) | date, type('date'\|'hour'\|'minute'\|'second'\|'ampm |
| open | When panel opening | event |
| close | When panel closing | |
| confirm | When click 'confirm' button | date |
| clear | When click 'clear' button | |
| input-error | When user type a invalid Date | the input text |
| focus | When input focus | |
| blur | When input blur | |
| pick | when select date #429 | date |
| calendar-change | when change the calendar | date, oldDate, type('year'\|'month'\|'last-year'\|'next-year'\|'last-month'\|'next-month'\|'last-decade'\|'next-decade') |
| panel-change | when the calendar panel changes | type('year'\|'month'\|'date'), oldType |
$3
| Name | Description |
| ------------- | ------------------------ |
| icon-calendar | custom the calender icon |
| icon-clear | custom the clear icon |
| input | replace input |
| header | popup header |
| footer | popup footer |
| sidebar | popup sidebar |
ChangeLog
One-time Donations
If you find this project useful, you can buy me a coffee
License
Copyright (c) 2017-present xiemengxiong