rtdream-datepicker
A Datepicker Component For Vue2
Install
$ npm install rtdream-datepicker --save
Usage
Props
Prop | Description | Type | Default |
---|---|---|---|
type | select date type | 'date' | 'datetime' | 'year' | 'month' | 'time' | 'date' |
range | if true, the type is daterange or datetimerange | boolean |
false |
format | format the Date. The parsing tokens are similar to the moment.js | [token] | [object ] |
'YYYY-MM-DD' |
value-type | type of binding value. If not specified, the binding value will be a Date object | value-type | 'date' |
lang | Translation | lang | 'zh' |
clearable | if false, don't show the clear icon | boolean |
true |
confirm | if true, need click the button to change the value | boolean |
false |
editable | if false, user cann't type it | boolean |
true |
disabled | Disable the component | boolean |
false |
placeholder | input placeholder text | string |
— |
width | input size | string |number |
210 |
append-to-body | append the popup to body | boolean |
false |
default-value | default date of the calendar | Date |
new Date() |
popupStyle | popup style(override the top, left style) | object |
— |
not-before | Disable all dates before new Date(not-before) | string |Date |
'' |
not-after | Disable all dates after new Date(not-after) | string |Date |
'' |
disabled-days | Disable Days | (date) => boolean |
- |
shortcuts | the shortcuts for the range picker | shortcuts | true |
time-picker-options | custom time-picker | time-picker-options | null |
time-select-options | custom time-select | time-select-options | null |
minute-step | if > 0 don't show the second picker | 0 - 60 | 0 |
first-day-of-week | set the first day of week | 1 - 7 | 7 |
input-class | the input class name | string |
'mx-input' |
input-attr | the input attr(eg: { required: true, id: 'input'}) | object |
— |
confirm-text | the default text to display on confirm button | string |
'OK' |
range-separator | the range separator text | string |
'~' |
date-format | format the time header and tooltip | string |
'' |
value-type
set the format of binding value
Value | Description |
---|---|
date | binding value will be a Date object |
timestamp | binding value will be a timestamp number |
format | binding value will be the format string |
Advanced: You can also customize objects to implement two functions.
Date // transform the binding value to calendar Date Object any // transform the calendar Date Object to binding value
lang
Type |
---|
'en'|'zh'|'es'|'pt-br'|'fr'|'ru'|'de'|'it'|'cs' |
{ days: string[]; months: string[]; picker: string[]; placeholder: { date: string; dateRange: string } } |
shortcuts
the shortcuts for the range picker
Value | Description |
---|---|
true | show the default shortcuts |
false | hide the defaualt shortcuts |
[{text: string, onClick: () => any }] | custom shortcuts |
time-picker-options
custom time-picker
Type |
---|
{start: '00:00', step:'00:30' , end: '23:30'} |
() => Array<{ label: string; values: { hours: number; minutes: number } }> |
time-select-options
custom time-select for columns
Type |
---|
{hours: [9, 10, 11], minutes: [10, 20], seconds: [10, 20] } |
Events
Name | Description | Callback Arguments |
---|---|---|
input | When the value change(v-model event) | the currentValue |
change | When the value change(same as input) | the currentValue |
confirm | When click 'confirm' button | the currentValue |
clear | When click 'clear' button | |
input-error | When user type a invalid Date | the input text |
panel-change | When change the panel view(eg: from year to month view) | panel, oldPanel |
calendar-change | When calendar view year or month change | now(Date), oldNow(Date) |
focus | When input focus | |
blur | When input blur |
panel
Value | Description |
---|---|
NONE | when panel is closed |
DATE | when panel is date |
YEAR | when panel is year |
MONTH | when panel is month |
TIME | when panel is time |
Slots
Name | Description |
---|---|
calendar-icon | custom the calender icon |
header | popup header |
footer | popup footer |