vue2-datepicker
A Datepicker Component For Vue2
Forked from vue2-datepicker
Improved Features
- Masking is done from the format given.
- By Default Picker will open in Current Month. This can be changed with 'defaultDate' prop.
Demo
Install
$ npm install vue2-datepicker-improved --save
Usage
<script>
import DatePicker from 'vue2-datepicker-improved'
export default {
components: { DatePicker },
data() {
return {
time1: '',
time2: '',
shortcuts: [
{
text: 'Today',
start: new Date(),
end: new Date()
}
]
}
}
}
</script>
<template>
<div>
<date-picker v-model="time1" :first-day-of-week="1"></date-picker>
<date-picker v-model="time2" range :shortcuts="shortcuts"></date-picker>
</div>
</template>
Attributes
| Prop |
Type |
Default |
Description |
| type |
String |
'date' |
select datepicker or datetimepicker(date/datetime) |
| range |
Boolean |
false |
if true, the type is daterange or datetimerange |
| format |
String |
yyyy-MM-dd |
Date formatting string |
| custom-formatter |
function |
null |
custom Date display |
| lang |
String/Object |
zh |
Translation (en/zh/es/pt-br/fr/ru/de/it/cs)(custom) |
| confirm |
Boolean |
false |
if true, need click the button to change the value |
| disabled |
Boolean |
false |
Disable the component |
| editable |
Boolean |
false |
if true, user can type it(only the range is false) |
| placeholder |
String |
|
input placeholder text |
| width |
String/Number |
210 |
input size |
| disabled-days |
Array |
[] |
Days in YYYY-MM-DD format to disable |
| not-before |
String/Date |
'' |
Disable all dates before new Date(not-before) |
| not-after |
String/Date |
'' |
Disable all dates after new Date(not-after) |
| shortcuts |
Boolean/Array |
true |
the shortcuts for the range picker |
| time-picker-options |
Object |
{} |
set timePickerOptions(start, step, end) |
| minute-step |
Number |
0 |
if > 0 don't show the second picker(0 - 60) |
| first-day-of-week |
Number |
7 |
set the first day of week (1-7) |
| input-class |
String |
'mx-input' |
the input class name |
| confirm-text |
String |
'OK' |
the default text to display on confirm button |
| range-separator |
String |
'~' |
the range separator text |
| defaultDate |
Date |
new Date() |
if given, then picker will open in the respective date's month. |
lang
- String (en/zh/es/pt-br/fr/ru/de/it/cs)
- Object
{
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'
}
}
shortcuts
- true - show the default shortcuts
- false - hide the shortcuts
- Object[] - custom shortcuts, [{text, start, end}]
| Prop |
Type |
Description |
| text |
String |
Text |
| start |
Date |
Start Date |
| end |
Date |
End Date |
time-picker-options
- Object[] - custom time-picker, [{start, step, end}]
| Prop |
Type |
Description |
| start |
String |
startTime (eg '00:00') |
| step |
String |
stepTime (eg '00:30') |
| end |
String |
endTime (eg '23:30') |
Events
| Name |
Description |
Callback Arguments |
| change |
When user select date |
the currentValue |
| confirm |
When user click 'OK' button |
the currentValue |
License
MIT
Copyright (c) 2017-present xiemengxiong