Vue的下拉日期和日期范围选择器 vue-dropdown-datepicker

Vue的下拉日期和日期范围选择器 vue-dropdown-datepicker
插件名称 vue-dropdown-datepicker
发布时间 2020年4月7日
插件作者 tanvir0604

最小清除日期选择器组件,用户可以在其中从关联的下拉列表中选择日期和日期范围。

安装和下载:

# Yarn
$ yarn add vue-dropdown-datepicker

# NPM
$ npm install vue-dropdown-datepicker --save

使用:

1.安装并导入组件。

import DropdownDatepicker from './src/dropdown-datepicker.vue';

2.注册组件。

new Vue({
    el: '#app',
    components: {
        DropdownDatepicker
    },
    data:{},
    methods: {
        //你的方法代码在这里
    }
});

3.创建一个基本的日期选择器。

<dropdown-datepicker></dropdown-datepicker>

4.创建一个基本的日期范围选择器。

<dropdown-datepicker submit-id="from" v-bind:on-change="onChange" v-bind:min-date="minDate"></dropdown-datepicker>
<dropdown-datepicker submit-id="to" ref="to"></dropdown-datepicker>

5.默认。

defaultDate: {type: String, default: null},
defaultDateFormat: {type: String, default:'yyyy-mm-dd'},
displayFormat: {type: String, default:'ymd'},
submitId: {type: String, default: ''},
submitFormat: {type: String, default:'yyyy-mm-dd'},
minAge: {type: Number, default:null},
maxAge: {type: Number, default:null},
minYear: {type: Number, default:null},
maxYear: {type: Number, default:null},
minDate: {type: String, default:null},
maxDate: {type: String, default:null},
allowPast: {type: Boolean, default:true},
allowFuture: {type: Boolean, default:true},
wrapperClass: {type: String, default:'date-dropdowns'},
dropdownClass: {type: String, default:null},
daySuffixes: {type: Boolean, default:true},
monthSuffixes: {type: Boolean, default:true},
monthFormat: {type: String, default:'long'},
required: {type: Boolean, default:false},
dayLabel: {type: String, default:'Day'},
monthLabel: {type: String, default:'Month'},
yearLabel: {type: String, default:'Year'},
sortYear: {type: String, default: 'desc'},
monthLongValues: {type: Array, default: () => ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']},
monthShortValues: {type: Array, default: () => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']},
initialDayMonthYearValues: {type: Array, default: () => ['Day', 'Month', 'Year']},
daySuffixValues: {type: Array, default: () => ['st', 'nd', 'rd', 'th']},
onDayChange: {type: Function, default:null},
onMonthChange: {type: Function, default:null},
onYearChange: {type: Function, default:null},
onChange: {type: Function, default: null},
value: {type: String, default:null}