共计 4129 个字符，预计需要花费 11 分钟才能阅读完成。
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>正文完