乐趣区

关于vue.js: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>
退出移动版