vue2-datepicker
A Datepicker Component For Vue2
Demo
https://mengxiong10.github.io/vue2-datepicker/demo/index.html
Install
$ npm install vue2-datepicker --save
Usage
<script>
import DatePicker from 'vue2-datepicker'
export default {
components: { DatePicker },
data() {
return {
time1: '',
time2: '',
time3: '',
// custom lang
lang: {
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
placeholder: {
date: 'Select Date',
dateRange: 'Select Date Range'
}
},
// custom range shortcuts
shortcuts: [
{
text: 'Today',
onClick: () => {
this.time3 = [ new Date(), new Date() ]
}
}
],
timePickerOptions:{
start: '00:00',
step: '00:30',
end: '23:30'
}
}
}
}
</script>
<template>
<div>
<date-picker v-model="time1" :first-day-of-week="1"></date-picker>
<date-picker v-model="time2" type="datetime" :time-picker-options="timePickerOptions"></date-picker>
<date-picker v-model="time3" range :shortcuts="shortcuts"></date-picker>
<date-picker v-model="value" :lang="lang"></date-picker>
</div>
</template>
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 |
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.
{
value2date: (value: any) => Date, // transform the binding value to calendar Date Object
date2value: (date: Date) => 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 } }> |
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 |
ChangeLog
License
Copyright (c) 2017-present xiemengxiong