nutui中的datepicker组件应用了之后就必须选一个工夫，有时候，咱们心愿的是抉择空，代表抉择所有的工夫，这个组件仿佛没提供这个性能（如果我错了，感激斧正），所以应用了nutui中的picker组件本人做了一个工夫选择器
组件调用办法 只写了点简略的内容，按钮点击唤醒抉择弹窗没写
<com-date-picker :is-visible="datePicker.visible" title="请抉择日期" @close="datePicker.visible = false" @confirm="dateConfirm"></com-date-picker>-----data () { return { form: { date: '', }, // 工夫抉择 datePicker: { visible: false }, }},methods: { search () { // 申请逻辑--- }, // 工夫选择器 dateConfirm (data) { this.form.date = data; this.search(); // 申请数据 },}组件
<!-- 公共工夫选择器 --><template> <nut-picker class="com-date-picker" :is-visible="isVisible" :list-data="list" :title="title" :default-value-data="defaultValue" @choose="change" @close="close" @confirm="confirm"> </nut-picker></template><script>export default { name: 'comDatePicker', data () { return { timer: null, // 是否是默认值扭转，默认值扭转会默认调用confirm对应办法 defaultTimer: null, list: [ // [ // {label: 2020, value: '2020年'}, // {label: 2019, value: '2019年'}, // {label: 2018, value: '2018年'}, // ], // [ // {label: 1, value: '1月'}, // {label: 2, value: '2月'}, // {label: 3, value: '3月'}, // {label: 4, value: '4月'}, // ], // [ // {label: 1, value: '1日'}, // {label: 2, value: '2日'}, // {label: 3, value: '3日'}, // {label: 4, value: '4日'}, // ] ], defaultValue: [], // 默认值 } }, props: { // 显隐 isVisible: { default: false }, // 题目 title: { default: '' }, // 1-year/2-month/3-day type: { default: 3 }, // 开始工夫 startDate: { default: '2000-01-01' }, // 完结工夫 endDate: { default: new Date().toLocaleDateString() }, // 默认值 default: { default: '' }, // 是否显示中文 isShowChinese: { default: true }, // 所有的文本 allText: { default: '默认' }, }, watch: { default (val) { this.setValue(val); // 设置默认值 } }, created () { this.setDateList(0, this.default); // 设置工夫列表 this.setValue(this.default); // 设置默认值 }, mounted () { }, methods: { // 设置默认值 setValue (sdate) { var res = []; if (sdate) { sdate = typeof sdate == 'number' ? '' + sdate : sdate; var arr = sdate.split('-'); var year = arr[0], month = '', day = ''; if (arr[1]) { month = arr[1]; if (arr[2] && arr[2] <= new Date(year, month, 0).getDate()) { day = arr[2]; } } // 年 if (this.type >= 1 && this.list.length > 0) { for (var i = 0; i < this.list[0].length; i++) { var item = this.list[0][i]; if (item.label == year) { res[0] = item; break; } } } // 月 if (this.type >= 2 && this.list.length > 1) { for (var i = 0; i < this.list[1].length; i++) { var item = this.list[1][i]; if (item.label == month) { res[1] = item; break; } } } // 日 if (this.type >= 3 && this.list.length > 2) { for (var i = 0; i < this.list[2].length; i++) { var item = this.list[2][i]; if (item.label == day) { res[2] = item; break; } } } } clearInterval(this.defaultTimer); this.defaultTimer = setTimeout(() => { this.defaultTimer = null; }, 200); this.defaultValue = res; }, // 顺次返回this、扭转的列数，扭转值，以后选中值 change (target, index, value, choise) { clearTimeout(this.timer); this.timer = setTimeout(() => { var type = index+1; var date = this.getChoise(choise); this.setDateList(type, date); this.setValue(date); }, 50); }, close () { this.$emit('close'); }, confirm (choise) { if (this.defaultTimer) { return; } var date = this.getChoise(choise); this.$emit('confirm', date); }, // 设置工夫列表 // type 1年扭转、2月扭转、3日扭转 setDateList (type, date) { type = type || 0; var y = '', m = '', d = ''; if (date) { var arr = date.split('-'); y = arr[0]; m = arr[1] ? arr[1] : ''; d = arr[2] ? arr[2] : ''; } var startDate = new Date(this.startDate), endDate = new Date(this.endDate); var startY = startDate.getFullYear(), startM = startDate.getMonth() + 1, startD = startDate.getDate(), startT = startDate.getTime(), endY = endDate.getFullYear(), endM = endDate.getMonth() + 1, endD = endDate.getDate(), endT = endDate.getTime(); var aYear = [ {label: '', value: this.allText} ]; var aMonth = [ {label: '', value: this.allText} ]; var aDay = [ {label: '', value:this.allText} ]; if (startT <= endT) { // 年 for (i = startY; i <= endY; i++) { aYear.push({ label: i, value: i + (this.isShowChinese ? '年' : '') }); } // 月 if (y && type <= 1 && this.type >= 2) { var minM = 1, maxM = 12; if (startY == endY) { minM = startM; } if (y == endY) { maxM = endM; } for (var i = minM; i <= maxM; i++) { aMonth.push({ label: i, value: i + (this.isShowChinese ? '月' : '') }) } } // 日 if (m && type <= 2 && this.type >= 3) { var minD = 1, maxD = 30; if (startY == endY && startM == endM) { minD = startD; } if (y == endY && m == endM) { maxD = endD; } else { maxD = new Date(y, m, 0).getDate(); } for (var i = minD; i <= maxD; i++) { aDay.push({ label: i, value: i + (this.isShowChinese ? '日' : '') }) } } } if (type == 0) { this.list[0] = aYear; } if (type <= 1 && this.type >= 2) { this.list[1] = aMonth; } if (type <= 2 && this.type >= 3) { this.list[2] = aDay; } }, // 以后选中工夫 getChoise (choise) { var date = ''; for (var i = 0; i < choise.length; i++) { var item = choise[i]; if (!item.label) { break; } if (i != 0 && item.label) { date += '-'; } date += this.$G.makeUpNum(item.label); } return date; }, }}</script>