wx-sky-ui 1.0.0

package/miniprogram_dist/datetime-picker/index.js

@@ -0,0 +1,672 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * datetime-picker 组件
+ * 复刻 uni-datetime-picker 功能，适配微信小程序原生语法和 Skyline 渲染引擎
+ */
+const util_1 = require("./util");
+Component({
+    options: {
+        virtualHost: true,
+        multipleSlots: true
+    },
+    properties: {
+        // 选择器类型: datetime | date | time | datetimerange | daterange
+        type: {
+            type: String,
+            value: 'datetime'
+        },
+        // 绑定值
+        value: {
+            type: null,
+            value: ''
+        },
+        // 起始时间
+        start: {
+            type: String,
+            value: ''
+        },
+        // 终止时间
+        end: {
+            type: String,
+            value: ''
+        },
+        // 返回类型: string | timestamp | date
+        returnType: {
+            type: String,
+            value: 'string'
+        },
+        // 占位符
+        placeholder: {
+            type: String,
+            value: ''
+        },
+        // 范围选择开始占位符
+        startPlaceholder: {
+            type: String,
+            value: ''
+        },
+        // 范围选择结束占位符
+        endPlaceholder: {
+            type: String,
+            value: ''
+        },
+        // 范围分隔符
+        rangeSeparator: {
+            type: String,
+            value: '-'
+        },
+        // 是否显示边框
+        border: {
+            type: Boolean,
+            value: true
+        },
+        // 是否禁用
+        disabled: {
+            type: Boolean,
+            value: false
+        },
+        // 是否显示清除按钮
+        clearable: {
+            type: Boolean,
+            value: true
+        },
+        // 是否隐藏秒
+        hideSecond: {
+            type: Boolean,
+            value: false
+        },
+        // 默认值
+        defaultValue: {
+            type: null,
+            value: ''
+        }
+    },
+    data: {
+        isRange: false,
+        hasTime: false,
+        displayValue: '',
+        inputDate: '',
+        calendarDate: '',
+        pickerTime: '',
+        calendarRange: {
+            startDate: '',
+            startTime: '',
+            endDate: '',
+            endTime: ''
+        },
+        displayRangeValue: {
+            startDate: '',
+            endDate: ''
+        },
+        tempRange: {
+            startDate: '',
+            startTime: '',
+            endDate: '',
+            endTime: ''
+        },
+        // 左右日历同步数据
+        startMultipleStatus: {
+            before: '',
+            after: '',
+            data: [],
+            fulldate: '',
+            which: 'right'
+        },
+        endMultipleStatus: {
+            before: '',
+            after: '',
+            data: [],
+            fulldate: '',
+            which: 'left'
+        },
+        pickerVisible: false,
+        isPhone: false,
+        isFirstShow: true,
+        // 国际化文本
+        selectDateText: '选择日期',
+        selectDateTimeText: '选择日期时间',
+        selectTimeText: '选择时间',
+        startDateText: '开始日期',
+        startTimeText: '开始时间',
+        endDateText: '结束日期',
+        endTimeText: '结束时间',
+        okText: '确定',
+        clearText: '清除',
+        cancelText: '取消',
+        isEmitValue: false,
+        _timers: [] // 延时句柄集合，组件销毁时统一清理
+    },
+    lifetimes: {
+        attached() {
+            this.platform();
+        },
+        detached() {
+            const timers = this.data._timers || [];
+            timers.forEach((t) => clearTimeout(t));
+        }
+    },
+    observers: {
+        'type': function (type) {
+            this.setData({
+                hasTime: type.indexOf('time') !== -1,
+                isRange: type.indexOf('range') !== -1
+            });
+        },
+        'value': function (value) {
+            if (!this.data.isEmitValue) {
+                this.initPicker(value);
+            }
+            this.setData({ isEmitValue: false });
+        },
+        'start': function (start) {
+            if (!start)
+                return;
+            this.setData({
+                'calendarRange.startDate': (0, util_1.getDate)(start)
+            });
+            if (this.data.hasTime) {
+                this.setData({
+                    'calendarRange.startTime': (0, util_1.getTime)(start, this.data.hideSecond)
+                });
+            }
+        },
+        'end': function (end) {
+            if (!end)
+                return;
+            this.setData({
+                'calendarRange.endDate': (0, util_1.getDate)(end)
+            });
+            if (this.data.hasTime) {
+                this.setData({
+                    'calendarRange.endTime': (0, util_1.getTime)(end, this.data.hideSecond)
+                });
+            }
+        }
+    },
+    methods: {
+        // 移植解决 TS 编译报错的第二步：将原本在 methods 里的布尔变量删除，避免触发方法签名冲突
+        // 初始化选择器
+        initPicker(newVal) {
+            if ((!newVal && !this.data.defaultValue) || (Array.isArray(newVal) && !newVal.length)) {
+                this.data._timers = this.data._timers || [];
+                this.data._timers.push(setTimeout(() => {
+                    this.clear(false);
+                }, 0));
+                return;
+            }
+            if (!Array.isArray(newVal) && !this.data.isRange) {
+                if (newVal) {
+                    const date = (0, util_1.getDate)(newVal);
+                    this.setData({
+                        displayValue: date,
+                        inputDate: date,
+                        calendarDate: date
+                    });
+                    if (this.data.hasTime) {
+                        const time = (0, util_1.getTime)(newVal, this.data.hideSecond);
+                        this.setData({
+                            pickerTime: time,
+                            displayValue: `${date} ${time}`
+                        });
+                    }
+                }
+                else if (this.data.defaultValue) {
+                    const date = (0, util_1.getDate)(this.data.defaultValue);
+                    this.setData({
+                        inputDate: date,
+                        calendarDate: date
+                    });
+                    if (this.data.hasTime) {
+                        this.setData({
+                            pickerTime: (0, util_1.getTime)(this.data.defaultValue, this.data.hideSecond)
+                        });
+                    }
+                }
+            }
+            else {
+                const [before, after] = newVal || [];
+                if (!before && !after)
+                    return;
+                const beforeDate = (0, util_1.getDate)(before);
+                const beforeTime = (0, util_1.getTime)(before, this.data.hideSecond);
+                const afterDate = (0, util_1.getDate)(after);
+                const afterTime = (0, util_1.getTime)(after, this.data.hideSecond);
+                this.setData({
+                    'displayRangeValue.startDate': beforeDate,
+                    'displayRangeValue.endDate': afterDate,
+                    'tempRange.startDate': beforeDate,
+                    'tempRange.endDate': afterDate
+                });
+                if (this.data.hasTime) {
+                    this.setData({
+                        'displayRangeValue.startDate': `${beforeDate} ${beforeTime}`,
+                        'displayRangeValue.endDate': `${afterDate} ${afterTime}`,
+                        'tempRange.startTime': beforeTime,
+                        'tempRange.endTime': afterTime
+                    });
+                }
+                const defaultRange = { before: beforeDate, after: afterDate };
+                this.setData({
+                    startMultipleStatus: { ...this.data.startMultipleStatus, ...defaultRange, which: 'right' },
+                    endMultipleStatus: { ...this.data.endMultipleStatus, ...defaultRange, which: 'left' }
+                });
+            }
+        },
+        // 更新左侧日历
+        updateLeftCale(e) {
+            // selectComponent 返回的是子组件实例，其自定义方法不在 TS 类型定义中
+            const left = this.selectComponent('#left');
+            if (left && left.cale) {
+                left.cale.setHoverMultiple(e.detail.after);
+                left.setDate(left.data.nowDate.fullDate);
+            }
+        },
+        // 更新右侧日历
+        updateRightCale(e) {
+            const right = this.selectComponent('#right');
+            if (right && right.cale) {
+                right.cale.setHoverMultiple(e.detail.after);
+                right.setDate(right.data.nowDate.fullDate);
+            }
+        },
+        // 判断平台
+        platform() {
+            const sysInfo = wx.getSystemInfoSync();
+            this.setData({
+                isPhone: sysInfo.windowWidth <= 500
+            });
+        },
+        // 显示选择器
+        show() {
+            this.triggerEvent('show');
+            if (this.data.disabled)
+                return;
+            this.platform();
+            if (this.data.isPhone) {
+                const mobile = this.selectComponent('#mobile');
+                if (mobile) {
+                    this.data._timers = this.data._timers || [];
+                    this.data._timers.push(setTimeout(() => mobile.open(), 0));
+                }
+                return;
+            }
+            this.setData({ pickerVisible: true });
+            if (this.data.isRange && this.data.isFirstShow) {
+                this.setData({ isFirstShow: false });
+                const { startDate, endDate } = this.data.calendarRange;
+                if (startDate && endDate) {
+                    if (this.diffDate(startDate, endDate) < 30) {
+                        const right = this.selectComponent('#right');
+                        if (right)
+                            right.changeMonth('pre');
+                    }
+                }
+            }
+        },
+        // 关闭选择器
+        close() {
+            this.data._timers = this.data._timers || [];
+            this.data._timers.push(setTimeout(() => {
+                this.setData({ pickerVisible: false });
+                this.triggerEvent('close');
+                const mobile = this.selectComponent('#mobile');
+                if (mobile)
+                    mobile.close();
+            }, 20));
+        },
+        // 派发事件
+        setEmit(value) {
+            if (this.data.returnType === 'timestamp' || this.data.returnType === 'date') {
+                if (!Array.isArray(value)) {
+                    if (!this.data.hasTime) {
+                        value = value + ' 00:00:00';
+                    }
+                    value = this.createTimestamp(value);
+                    if (this.data.returnType === 'date') {
+                        value = new Date(value);
+                    }
+                }
+                else {
+                    if (!this.data.hasTime) {
+                        value[0] = value[0] + ' 00:00:00';
+                        value[1] = value[1] + ' 00:00:00';
+                    }
+                    value[0] = this.createTimestamp(value[0]);
+                    value[1] = this.createTimestamp(value[1]);
+                    if (this.data.returnType === 'date') {
+                        value[0] = new Date(value[0]);
+                        value[1] = new Date(value[1]);
+                    }
+                }
+            }
+            this.setData({ isEmitValue: true });
+            this.triggerEvent('change', value);
+        },
+        // 创建时间戳
+        createTimestamp(date) {
+            const fixed = (0, util_1.fixIosDateFormat)(date);
+            return Date.parse(new Date(fixed).toString());
+        },
+        // 单选改变
+        singleChange(e) {
+            const fulldate = e.detail.fulldate;
+            this.setData({
+                calendarDate: fulldate,
+                inputDate: fulldate
+            });
+            if (this.data.hasTime)
+                return;
+            this.confirmSingleChange();
+        },
+        // 确认单选
+        confirmSingleChange() {
+            if (!(0, util_1.checkDate)(this.data.inputDate)) {
+                const now = new Date();
+                const date = (0, util_1.getDate)(now);
+                const time = (0, util_1.getTime)(now, this.data.hideSecond);
+                this.setData({
+                    calendarDate: date,
+                    inputDate: date,
+                    pickerTime: time
+                });
+            }
+            let startLaterInputDate = false;
+            let startDate = '', startTime = '';
+            if (this.data.start) {
+                let startString = this.data.start;
+                if (typeof this.data.start === 'number') {
+                    startString = (0, util_1.getDateTime)(this.data.start, this.data.hideSecond);
+                }
+                [startDate, startTime] = startString.split(' ');
+                if (this.data.start && !(0, util_1.dateCompare)(startDate, this.data.inputDate)) {
+                    startLaterInputDate = true;
+                    this.setData({ inputDate: startDate });
+                }
+            }
+            let endEarlierInputDate = false;
+            let endDate = '', endTime = '';
+            if (this.data.end) {
+                let endString = this.data.end;
+                if (typeof this.data.end === 'number') {
+                    endString = (0, util_1.getDateTime)(this.data.end, this.data.hideSecond);
+                }
+                [endDate, endTime] = endString.split(' ');
+                if (this.data.end && !(0, util_1.dateCompare)(this.data.inputDate, endDate)) {
+                    endEarlierInputDate = true;
+                    this.setData({ inputDate: endDate });
+                }
+            }
+            if (this.data.hasTime) {
+                let pickerTime = this.data.pickerTime;
+                if (startLaterInputDate) {
+                    pickerTime = startTime || (0, util_1.getDefaultSecond)(this.data.hideSecond);
+                }
+                if (endEarlierInputDate) {
+                    pickerTime = endTime || (0, util_1.getDefaultSecond)(this.data.hideSecond);
+                }
+                if (!pickerTime) {
+                    pickerTime = (0, util_1.getTime)(Date.now(), this.data.hideSecond);
+                }
+                this.setData({
+                    pickerTime,
+                    displayValue: `${this.data.inputDate} ${pickerTime}`
+                });
+            }
+            else {
+                this.setData({ displayValue: this.data.inputDate });
+            }
+            this.setEmit(this.data.displayValue);
+            this.setData({ pickerVisible: false });
+        },
+        // 左侧日历改变
+        leftChange(e) {
+            const { before, after } = e.detail.range;
+            this.rangeChange(before, after);
+            this.setData({
+                startMultipleStatus: { ...this.data.startMultipleStatus, ...e.detail.range, fulldate: e.detail.fulldate }
+            });
+            this.triggerEvent('calendarClick', e.detail);
+        },
+        // 右侧日历改变
+        rightChange(e) {
+            const { before, after } = e.detail.range;
+            this.rangeChange(before, after);
+            this.setData({
+                endMultipleStatus: { ...this.data.endMultipleStatus, ...e.detail.range, fulldate: e.detail.fulldate }
+            });
+            this.triggerEvent('calendarClick', e.detail);
+        },
+        // 移动端改变
+        mobileChange(e) {
+            if (this.data.isRange) {
+                const { before, after } = e.detail.range;
+                if (!before)
+                    return;
+                this.handleStartAndEnd(before, after, true);
+                if (this.data.hasTime) {
+                    const { startTime, endTime } = e.detail.timeRange || {};
+                    this.setData({
+                        'tempRange.startTime': startTime,
+                        'tempRange.endTime': endTime
+                    });
+                }
+                this.confirmRangeChange();
+            }
+            else {
+                let displayValue = '';
+                if (this.data.hasTime) {
+                    displayValue = e.detail.fulldate + ' ' + e.detail.time;
+                }
+                else {
+                    displayValue = e.detail.fulldate;
+                }
+                this.setData({
+                    displayValue,
+                    calendarDate: displayValue
+                });
+                this.setEmit(displayValue);
+            }
+            const mobile = this.selectComponent('#mobile');
+            if (mobile)
+                mobile.close();
+        },
+        // 范围改变
+        rangeChange(before, after) {
+            if (!(before && after))
+                return;
+            this.handleStartAndEnd(before, after, true);
+            if (this.data.hasTime)
+                return;
+            this.confirmRangeChange();
+        },
+        // 确认范围选择
+        confirmRangeChange() {
+            if (!this.data.tempRange.startDate || !this.data.tempRange.endDate) {
+                this.setData({ pickerVisible: false });
+                return;
+            }
+            let startDate = this.data.tempRange.startDate;
+            let endDate = this.data.tempRange.endDate;
+            if (!(0, util_1.checkDate)(startDate)) {
+                startDate = (0, util_1.getDate)(Date.now());
+            }
+            if (!(0, util_1.checkDate)(endDate)) {
+                endDate = (0, util_1.getDate)(Date.now());
+            }
+            this.setData({
+                'tempRange.startDate': startDate,
+                'tempRange.endDate': endDate
+            });
+            let compareStartDateString = startDate;
+            let compareEndDateString = endDate;
+            if (this.data.hasTime) {
+                compareStartDateString = `${startDate} ${this.data.tempRange.startTime}`;
+                compareEndDateString = `${endDate} ${this.data.tempRange.endTime}`;
+            }
+            let startDateLaterRangeStartDate = false;
+            let startDateLaterRangeEndDate = false;
+            let startDateFromProp = '', startTimeFromProp = '';
+            if (this.data.start) {
+                let startString = this.data.start;
+                if (typeof this.data.start === 'number') {
+                    startString = (0, util_1.getDateTime)(this.data.start, this.data.hideSecond);
+                }
+                [startDateFromProp, startTimeFromProp] = startString.split(' ');
+                if (this.data.start && !(0, util_1.dateCompare)(this.data.start, compareStartDateString)) {
+                    startDateLaterRangeStartDate = true;
+                    this.setData({ 'tempRange.startDate': startDateFromProp });
+                }
+                if (this.data.start && !(0, util_1.dateCompare)(this.data.start, compareEndDateString)) {
+                    startDateLaterRangeEndDate = true;
+                    this.setData({ 'tempRange.endDate': startDateFromProp });
+                }
+            }
+            let endDateEarlierRangeStartDate = false;
+            let endDateEarlierRangeEndDate = false;
+            let endDateFromProp = '', endTimeFromProp = '';
+            if (this.data.end) {
+                let endString = this.data.end;
+                if (typeof this.data.end === 'number') {
+                    endString = (0, util_1.getDateTime)(this.data.end, this.data.hideSecond);
+                }
+                [endDateFromProp, endTimeFromProp] = endString.split(' ');
+                if (this.data.end && !(0, util_1.dateCompare)(compareStartDateString, this.data.end)) {
+                    endDateEarlierRangeStartDate = true;
+                    this.setData({ 'tempRange.startDate': endDateFromProp });
+                }
+                if (this.data.end && !(0, util_1.dateCompare)(compareEndDateString, this.data.end)) {
+                    endDateEarlierRangeEndDate = true;
+                    this.setData({ 'tempRange.endDate': endDateFromProp });
+                }
+            }
+            let start = '', end = '';
+            if (!this.data.hasTime) {
+                start = this.data.tempRange.startDate;
+                end = this.data.tempRange.endDate;
+            }
+            else {
+                let startTime = this.data.tempRange.startTime;
+                let endTime = this.data.tempRange.endTime;
+                if (startDateLaterRangeStartDate) {
+                    startTime = startTimeFromProp || (0, util_1.getDefaultSecond)(this.data.hideSecond);
+                }
+                else if (endDateEarlierRangeStartDate) {
+                    startTime = endTimeFromProp || (0, util_1.getDefaultSecond)(this.data.hideSecond);
+                }
+                if (!startTime) {
+                    startTime = (0, util_1.getTime)(Date.now(), this.data.hideSecond);
+                }
+                if (startDateLaterRangeEndDate) {
+                    endTime = startTimeFromProp || (0, util_1.getDefaultSecond)(this.data.hideSecond);
+                }
+                else if (endDateEarlierRangeEndDate) {
+                    endTime = endTimeFromProp || (0, util_1.getDefaultSecond)(this.data.hideSecond);
+                }
+                if (!endTime) {
+                    endTime = (0, util_1.getTime)(Date.now(), this.data.hideSecond);
+                }
+                this.setData({
+                    'tempRange.startTime': startTime,
+                    'tempRange.endTime': endTime
+                });
+                start = `${this.data.tempRange.startDate} ${startTime}`;
+                end = `${this.data.tempRange.endDate} ${endTime}`;
+            }
+            if (!(0, util_1.dateCompare)(start, end)) {
+                [start, end] = [end, start];
+            }
+            this.setData({
+                'displayRangeValue.startDate': start,
+                'displayRangeValue.endDate': end
+            });
+            this.setEmit([start, end]);
+            this.setData({ pickerVisible: false });
+        },
+        // 处理开始和结束日期
+        handleStartAndEnd(before, after, temp = false) {
+            if (!before)
+                return;
+            if (!after)
+                after = before;
+            const type = temp ? 'tempRange' : 'range';
+            const isStartEarlierEnd = (0, util_1.dateCompare)(before, after);
+            const start = isStartEarlierEnd ? before : after;
+            const end = isStartEarlierEnd ? after : before;
+            this.setData({
+                [`${type}.startDate`]: start,
+                [`${type}.endDate`]: end
+            });
+        },
+        // 比较时间差
+        diffDate(startDate, endDate) {
+            const start = new Date((0, util_1.fixIosDateFormat)(startDate));
+            const end = new Date((0, util_1.fixIosDateFormat)(endDate));
+            const diff = (end.getTime() - start.getTime()) / (24 * 60 * 60 * 1000);
+            return Math.abs(diff);
+        },
+        // 清除
+        clear(needEmit = true) {
+            if (!this.data.isRange) {
+                this.setData({
+                    displayValue: '',
+                    inputDate: '',
+                    pickerTime: ''
+                });
+                const pcSingle = this.selectComponent('#pcSingle');
+                if (pcSingle)
+                    pcSingle.clearCalender();
+                if (needEmit) {
+                    this.triggerEvent('clear');
+                    this.triggerEvent('change', '');
+                }
+            }
+            else {
+                this.setData({
+                    'displayRangeValue.startDate': '',
+                    'displayRangeValue.endDate': '',
+                    'tempRange.startDate': '',
+                    'tempRange.startTime': '',
+                    'tempRange.endDate': '',
+                    'tempRange.endTime': ''
+                });
+                const left = this.selectComponent('#left');
+                const right = this.selectComponent('#right');
+                if (left)
+                    left.clearCalender();
+                if (right) {
+                    right.clearCalender();
+                    right.changeMonth('next');
+                }
+                if (needEmit) {
+                    this.triggerEvent('clear');
+                    this.triggerEvent('change', []);
+                }
+            }
+        },
+        // 日历点击
+        calendarClick(e) {
+            this.triggerEvent('calendarClick', e.detail);
+        },
+        // 时间改变
+        timeChange(e) {
+            const { hour, minute, second } = e.detail;
+            const time = `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}${this.data.hideSecond ? '' : ':' + (second < 10 ? '0' + second : second)}`;
+            this.setData({ pickerTime: time });
+        },
+        // 开始时间改变
+        startTimeChange(e) {
+            const { hour, minute, second } = e.detail;
+            const time = `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}${this.data.hideSecond ? '' : ':' + (second < 10 ? '0' + second : second)}`;
+            this.setData({ 'tempRange.startTime': time });
+        },
+        // 结束时间改变
+        endTimeChange(e) {
+            const { hour, minute, second } = e.detail;
+            const time = `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}${this.data.hideSecond ? '' : ':' + (second < 10 ? '0' + second : second)}`;
+            this.setData({ 'tempRange.endTime': time });
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map