nutui datepicker功能补充

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>