A datepicker / datetimepicker component for Vue2
Add week picker
<date-picer type="week" />
Add inline calendar without input
<date-picker inline />
Add prop open to control the state of popup
Add select am/pm, when use12hours
Add event open and close
Add hourStep/minuteStep/secondStep/showHour/showMinute/showSecond/use12h to time picker for more configuration
Need to import style separately
Change the default language to English. And need to import file to change the language.
Range selection refactoring, you can select a range on one calendar now, and need to click twice to select a range each time.
Change slot calendar-icon to icon-calendar.
appendToBody default value changes from false to true.
Remove not-before and not-after, use disabledDate instead.
<template>
<date-picker :disabled-date="notBeforeToday"></date-picker>
<date-picker :disabled-date="notAfterToday"></date-picker>
</template>
<script>
export default {
methods: {
notBeforeToday(date) {
const today = new Date();
today.setHours(0, 0, 0, 0);
return date.getTime() < today.getTime();
},
notAfterToday(date) {
const today = new Date();
today.setHours(0, 0, 0, 0);
return date.getTime() > today.getTime();
},
},
};
</script>
Remove width, use style="{ width: "" }" instead.
modify shortcuts api.
[
{ text: 'today', onClick: () => new Date() // return a Date }
];
Remove prop firstDayOfWeek to locale.
添加星期选择
<date-picer type="week" />
添加内联模式, 没有输入框
<date-picker inline />
添加 open 控制弹窗的状态
添加 am/pm 的选择, 当使用12小时制
添加事件open和close
添加 hourStep/minuteStep/secondStep/showHour/showMinute/showSecond/use12h 对时间选择更多的控制
需要单独引入样式
修改默认语音是英文, 可以自行引入语言包
日期范围选择重构, 现在模式是可以在一个日历上面选择范围, 每次选择需要点击2次.
修改 slot calendar-icon 为 icon-calendar.
appendToBody 默认值修改为true.
移除 not-before 和 not-after, 用 disabledDate 代替.
<template>
<date-picker :disabled-date="notBeforeToday"></date-picker>
<date-picker :disabled-date="notAfterToday"></date-picker>
</template>
<script>
export default {
methods: {
notBeforeToday(date) {
const today = new Date();
today.setHours(0, 0, 0, 0);
return date.getTime() < today.getTime();
},
notAfterToday(date) {
const today = new Date();
today.setHours(0, 0, 0, 0);
return date.getTime() > today.getTime();
},
},
};
</script>
移除width, 用 style="{ width: "" }" 代替.
修改 shortcuts , onClick函数返回一个日期.
移除firstDayOfWeek到语言包