@10yun/cv-mobile-ui 0.4.1 → 0.4.2

package/ui-cv/cv-datetime-picker/cv-datetime-picker.vue

@@ -0,0 +1,958 @@
+<template>
+  <view class="uni-date">
+    <view class="uni-date-editor" @click="show">
+      <slot>
+        <view class="uni-date-editor--x" :class="{ 'uni-date-editor--x__disabled': disabled, 'uni-date-x--border': border }">
+          <view v-if="!isRange" class="uni-date-x uni-date-single">
+            <view class="uni-date__icon-logo">
+              <image class="uni-date-editor--logo" :src="iconBase64" mode=""></image>
+            </view>
+            <input class="uni-date__input" type="text" v-model="singleVal" :placeholder="placeholder" :disabled="true" />
+          </view>
+          <view v-else class="uni-date-x uni-date-range">
+            <view class="uni-date__icon-logo">
+              <image class="uni-date-editor--logo" :src="iconBase64" mode=""></image>
+            </view>
+            <input
+              class="uni-date__input uni-date-range__input"
+              type="text"
+              v-model="range.startDate"
+              :placeholder="startPlaceholder"
+              :disabled="true"
+            />
+            <slot>
+              <view class="">{{ rangeSeparator }}</view>
+            </slot>
+            <input
+              class="uni-date__input uni-date-range__input"
+              type="text"
+              v-model="range.endDate"
+              :placeholder="endPlaceholder"
+              :disabled="true"
+            />
+          </view>
+          <view
+            v-show="clearIcon && !disabled && !isPhone && (singleVal || (range.startDate && range.endDate))"
+            class="uni-date__icon-clear"
+            @click.stop="clear"
+          >
+            <cv-icon2 type="clear" color="#e1e1e1" size="14"></cv-icon2>
+          </view>
+        </view>
+      </slot>
+    </view>
+
+    <view v-show="popup" class="uni-date-mask" @click="close"></view>
+    <view v-if="!isPhone" ref="datePicker" v-show="popup" class="uni-date-picker__container">
+      <view v-if="!isRange" class="uni-date-single--x" :style="popover">
+        <view v-show="hasTime" class="uni-date-changed popup-x-header">
+          <input class="uni-date__input uni-date-range__input" type="text" v-model="tempSingleDate" placeholder="选择日期" />
+          <time-picker
+            type="time"
+            v-model="time"
+            :border="false"
+            :disabled="!tempSingleDate"
+            :start="reactStartTime"
+            :end="reactEndTime"
+          >
+            <input
+              class="uni-date__input uni-date-range__input"
+              type="text"
+              v-model="time"
+              placeholder="选择时间"
+              :disabled="!tempSingleDate"
+            />
+          </time-picker>
+        </view>
+        <calendar
+          ref="pcSingle"
+          :showMonth="false"
+          :start-date="caleRange.startDate"
+          :end-date="caleRange.endDate"
+          :date="defSingleDate"
+          @change="singleChange"
+        />
+        <view v-if="hasTime" class="popup-x-footer">
+          <!-- <text class="">此刻</text> -->
+          <text class="confirm" @click="confirmSingleChange">确定</text>
+        </view>
+        <view class="uni-date-popper__arrow"></view>
+      </view>
+
+      <view v-else class="uni-date-range--x" :style="popover">
+        <view v-show="hasTime" class="popup-x-header uni-date-changed">
+          <view class="popup-x-header--datetime">
+            <input
+              class="uni-date__input uni-date-range__input"
+              type="text"
+              v-model="tempRange.startDate"
+              placeholder="开始日期"
+            />
+            <time-picker
+              type="time"
+              v-model="tempRange.startTime"
+              :start="reactStartTime"
+              :border="false"
+              :disabled="!tempRange.startDate"
+            >
+              <input
+                class="uni-date__input uni-date-range__input"
+                type="text"
+                v-model="tempRange.startTime"
+                placeholder="开始时间"
+                :disabled="!tempRange.startDate"
+              />
+            </time-picker>
+          </view>
+          <cv-icon2 type="arrowthinright" color="#999" style="line-height: 40px"></cv-icon2>
+          <view class="popup-x-header--datetime">
+            <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endDate" placeholder="结束日期" />
+            <time-picker
+              type="time"
+              v-model="tempRange.endTime"
+              :end="reactEndTime"
+              :border="false"
+              :disabled="!tempRange.endDate"
+            >
+              <input
+                class="uni-date__input uni-date-range__input"
+                type="text"
+                v-model="tempRange.endTime"
+                placeholder="结束时间"
+                :disabled="!tempRange.endDate"
+              />
+            </time-picker>
+          </view>
+        </view>
+        <view class="popup-x-body">
+          <calendar
+            ref="left"
+            :showMonth="false"
+            :start-date="caleRange.startDate"
+            :end-date="caleRange.endDate"
+            :range="true"
+            @change="leftChange"
+            :pleStatus="endMultipleStatus"
+            @firstEnterCale="updateRightCale"
+            @monthSwitch="leftMonthSwitch"
+            style="padding-right: 16px"
+          />
+          <calendar
+            ref="right"
+            :showMonth="false"
+            :start-date="caleRange.startDate"
+            :end-date="caleRange.endDate"
+            :range="true"
+            @change="rightChange"
+            :pleStatus="startMultipleStatus"
+            @firstEnterCale="updateLeftCale"
+            @monthSwitch="rightMonthSwitch"
+            style="padding-left: 16px; border-left: 1px solid #f1f1f1"
+          />
+        </view>
+        <view v-if="hasTime" class="popup-x-footer">
+          <text class="" @click="clear">清空</text>
+          <text class="confirm" @click="confirmRangeChange">确定</text>
+        </view>
+      </view>
+    </view>
+    <calendar
+      v-if="isPhone"
+      ref="mobile"
+      :clearDate="false"
+      :date="defSingleDate"
+      :defTime="reactMobDefTime"
+      :start-date="caleRange.startDate"
+      :end-date="caleRange.endDate"
+      :selectableTimes="mobSelectableTime"
+      :pleStatus="endMultipleStatus"
+      :showMonth="false"
+      :range="isRange"
+      :typeHasTime="hasTime"
+      :insert="false"
+      @confirm="mobileChange"
+    />
+  </view>
+</template>
+<script>
+import calendar from './calendar.vue';
+import timePicker from './time-picker.vue';
+
+/**
+ * DatetimePicker 时间选择器
+ * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
+ * @property {String} type 选择器类型
+ * @property {String|Array} value 绑定值
+ * @property {String} placeholder 单选择时的占位内容
+ * @property {String} start 起始时间
+ * @property {String} start 终止时间
+ * @property {String} start-placeholder 范围选择时开始日期的占位内容
+ * @property {String} end-placeholder 范围选择时结束日期的占位内容
+ * @property {String} range-separator 选择范围时的分隔符
+ * @property {Boolean} border = [true|false] 是否有边框
+ * @property {Boolean} disabled = [true|false] 是否禁用
+ * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
+ * @event {Function} change 确定日期时触发的事件
+ **/
+
+export default {
+  name: 'UniDatetimePicker',
+  components: {
+    calendar,
+    timePicker
+  },
+  data() {
+    return {
+      isRange: false,
+      hasTime: false,
+      mobileRange: false,
+      // 单选
+      singleVal: '',
+      tempSingleDate: '',
+      defSingleDate: '',
+      time: '',
+      // 范围选
+      caleRange: {
+        startDate: '',
+        startTime: '',
+        endDate: '',
+        endTime: ''
+      },
+      range: {
+        startDate: '',
+        // startTime: '',
+        endDate: ''
+        // endTime: ''
+      },
+      tempRange: {
+        startDate: '',
+        startTime: '',
+        endDate: '',
+        endTime: ''
+      },
+      // 左右日历同步数据
+      startMultipleStatus: {
+        before: '',
+        after: '',
+        data: [],
+        fulldate: ''
+      },
+      endMultipleStatus: {
+        before: '',
+        after: '',
+        data: [],
+        fulldate: ''
+      },
+      visible: false,
+      popup: false,
+      popover: null,
+      isEmitValue: false,
+      isPhone: false,
+      isFirstShow: true,
+      iconBase64:
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAACVklEQVRoge2Zv2vTQRTAP4oWJQQskmolBAnSQVMcSxbp4ubmIEWETu0oIjg5iIOgpLNunfQfMHToUgpOVgfRqRAL4q8WRLQVq4sOdyHPL9/7evfNJReS+8DB433v7r37fl/eu9xBJBKUB0BLt+uDaOOQZb8SUNXyuKuRftg46NeXcBww6M8AC0ANOAycAyb1s7e6+SbNxi/gBfAQ2HadcA7YB/4MUPsKzLos4jzwewAcNy3mhMnx5I/9BiqUAD4DDWAXmAfqWt8Enlq+GBfSbEwAt4AicAxYBO7aTPaGzhu4KvTLQn/Hh9cpmGzcFvqmaXAyaxWE/MGTg93yXsgFUyfbOrJCJ2s8y+tRP21s0fmMTlmih8zT8WnN1GloCmJWaF0CpvrlSAb1/3fJXshNT470hZEIrZeoahqaU8BZ10Exa4XGtiCaKKL+EIHaMX8U81ZEP7ntrwi7n4CfWi7p+UCFdFdh7Rpaps9+mn93rjY2THut0QqtoVlIkpi1QjNyCzEdnl0W+idCXxb6VmKudaGfsbBhRbcHdEWhf5eYt0o6FVR6BjhqYcOKoQkt2y/SAB5rWVbpVeCilmUl3hb6JNeAI1p+ZWEjFzH9hsY2tEwHdHX9DGATWNLyceCeGL/YhY+58LWhy9o0uhJDKw3T4dlr4L6WZab5JvRBGJqs9UPI5R44lQfpx56pUzK0NlA3R6AK1Engu1+/nGhfK7R5bjtwGnXdFfpSJ6190Quz5grqQCC048lFXMhy2nQZWkUVsRowZv8OvLOPCvdHwE5APyKRSMQzfwE22DtT3T5PPwAAAABJRU5ErkJggg=='
+    };
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'datetime'
+    },
+    value: {
+      type: [String, Number, Array, Date],
+      default: ''
+    },
+    modelValue: {
+      type: [String, Number, Array, Date],
+      default: ''
+    },
+    start: {
+      type: [Number, String],
+      default: ''
+    },
+    end: {
+      type: [Number, String],
+      default: ''
+    },
+    returnType: {
+      type: String,
+      default: 'string'
+    },
+    placeholder: {
+      type: String,
+      default: '选择日期'
+    },
+    startPlaceholder: {
+      type: String,
+      default: '起始日期'
+    },
+    endPlaceholder: {
+      type: String,
+      default: '结束日期'
+    },
+    rangeSeparator: {
+      type: String,
+      default: '-'
+    },
+    border: {
+      type: [Boolean],
+      default: true
+    },
+    disabled: {
+      type: [Boolean],
+      default: false
+    },
+    clearIcon: {
+      type: [Boolean],
+      default: true
+    }
+  },
+  watch: {
+    type: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (newVal.indexOf('time') !== -1) {
+          this.hasTime = true;
+        } else {
+          this.hasTime = false;
+        }
+        if (newVal.indexOf('range') !== -1) {
+          this.isRange = true;
+        } else {
+          this.isRange = false;
+        }
+      }
+    },
+    value: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (this.isEmitValue) {
+          this.isEmitValue = false;
+          return;
+        }
+        this.initPicker(newVal);
+      }
+    },
+
+    start: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (!newVal) return;
+        const { defDate, defTime } = this.parseDate(newVal);
+        this.caleRange.startDate = defDate;
+        if (this.hasTime) {
+          this.caleRange.startTime = defTime;
+        }
+      }
+    },
+
+    end: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (!newVal) return;
+        const { defDate, defTime } = this.parseDate(newVal);
+        this.caleRange.endDate = defDate;
+        if (this.hasTime) {
+          this.caleRange.endTime = defTime;
+        }
+      }
+    }
+  },
+  computed: {
+    reactStartTime() {
+      const activeDate = this.isRange ? this.tempRange.startDate : this.tempSingleDate;
+      const res = activeDate === this.caleRange.startDate ? this.caleRange.startTime : '';
+      return res;
+    },
+    reactEndTime() {
+      const activeDate = this.isRange ? this.tempRange.endDate : this.tempSingleDate;
+      const res = activeDate === this.caleRange.endDate ? this.caleRange.endTime : '';
+      return res;
+    },
+    reactMobDefTime() {
+      return this.isRange
+        ? {
+            start: this.tempRange.startTime,
+            end: this.tempRange.endTime
+          }
+        : this.time;
+    },
+    mobSelectableTime() {
+      return {
+        start: this.caleRange.startTime,
+        end: this.caleRange.endTime
+      };
+    },
+    datePopupWidth() {
+      // todo
+      return this.isRange ? 653 : 301;
+    }
+  },
+  created() {
+    this.form = this.getForm('uniForms');
+    this.formItem = this.getForm('uniFormsItem');
+
+    // if (this.formItem) {
+    // 	if (this.formItem.name) {
+    // 		this.rename = this.formItem.name
+    // 		this.form.inputChildrens.push(this)
+    // 	}
+    // }
+  },
+  mounted() {
+    this.platform();
+  },
+  methods: {
+    /**
+     * 获取父元素实例
+     */
+    getForm(name = 'uniForms') {
+      let parent = this.$parent;
+      let parentName = parent.$options.name;
+      while (parentName !== name) {
+        parent = parent.$parent;
+        if (!parent) return false;
+        parentName = parent.$options.name;
+      }
+      return parent;
+    },
+    initPicker(newVal) {
+      if (!newVal || (Array.isArray(newVal) && !newVal.length)) {
+        this.$nextTick(() => {
+          this.clear(false);
+        });
+        return;
+      }
+      if (!Array.isArray(newVal) && !this.isRange) {
+        const { defDate, defTime } = this.parseDate(newVal);
+        this.singleVal = defDate;
+        this.tempSingleDate = defDate;
+        this.defSingleDate = defDate;
+        if (this.hasTime) {
+          this.singleVal = defDate + ' ' + defTime;
+          this.time = defTime;
+        }
+      } else {
+        const [before, after] = newVal;
+        if (!before && !after) return;
+        const defBefore = this.parseDate(before);
+        const defAfter = this.parseDate(after);
+        const startDate = defBefore.defDate;
+        const endDate = defAfter.defDate;
+        this.range.startDate = this.tempRange.startDate = startDate;
+        this.range.endDate = this.tempRange.endDate = endDate;
+
+        if (this.hasTime) {
+          this.range.startDate = defBefore.defDate + ' ' + defBefore.defTime;
+          this.range.endDate = defAfter.defDate + ' ' + defAfter.defTime;
+          this.tempRange.startTime = defBefore.defTime;
+          this.tempRange.endTime = defAfter.defTime;
+        }
+        const defaultRange = {
+          before: defBefore.defDate,
+          after: defAfter.defDate
+        };
+        this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, {
+          which: 'right'
+        });
+        this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
+          which: 'left'
+        });
+      }
+    },
+    updateLeftCale(e) {
+      const left = this.$refs.left;
+      // 设置范围选
+      left.cale.setHoverMultiple(e.after);
+      left.setDate(this.$refs.left.nowDate.fullDate);
+    },
+    updateRightCale(e) {
+      const right = this.$refs.right;
+      // 设置范围选
+      right.cale.setHoverMultiple(e.after);
+      right.setDate(this.$refs.right.nowDate.fullDate);
+    },
+    platform() {
+      const systemInfo = uni.getSystemInfoSync();
+      this.isPhone = systemInfo.windowWidth <= 500;
+      this.windowWidth = systemInfo.windowWidth;
+    },
+    show(event) {
+      if (this.disabled) {
+        return;
+      }
+      this.platform();
+      if (this.isPhone) {
+        this.$refs.mobile.open();
+        return;
+      }
+      this.popover = {
+        top: '10px'
+      };
+      const dateEditor = uni.createSelectorQuery().in(this).select('.uni-date-editor');
+      dateEditor
+        .boundingClientRect((rect) => {
+          if (this.windowWidth - rect.left < this.datePopupWidth) {
+            this.popover.right = 0;
+          }
+        })
+        .exec();
+      setTimeout(() => {
+        this.popup = !this.popup;
+        if (!this.isPhone && this.isRange && this.isFirstShow) {
+          this.isFirstShow = false;
+          const { startDate, endDate } = this.range;
+          if (startDate && endDate) {
+            if (this.diffDate(startDate, endDate) < 30) {
+              this.$refs.right.next();
+            }
+          } else {
+            this.$refs.right.next();
+            this.$refs.right.cale.lastHover = false;
+          }
+        }
+      }, 20);
+    },
+
+    close() {
+      setTimeout(() => {
+        this.popup = false;
+        this.$emit('maskClick', this.value);
+      }, 20);
+    },
+    setEmit(value) {
+      if (this.returnType === 'timestamp' || this.returnType === 'date') {
+        if (!Array.isArray(value)) {
+          if (!this.hasTime) {
+            value = value + ' ' + '00:00:00';
+          }
+          value = this.createTimestamp(value);
+          if (this.returnType === 'date') {
+            value = new Date(value);
+          }
+        } else {
+          if (!this.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.returnType === 'date') {
+            value[0] = new Date(value[0]);
+            value[1] = new Date(value[1]);
+          }
+        }
+      }
+      this.formItem && this.formItem.setValue(value);
+      this.$emit('change', value);
+      this.$emit('input', value);
+      this.$emit('update:modelValue', value);
+      this.isEmitValue = true;
+    },
+    createTimestamp(date) {
+      date = this.fixIosDateFormat(date);
+      return Date.parse(new Date(date));
+    },
+    singleChange(e) {
+      this.tempSingleDate = e.fulldate;
+      if (this.hasTime) return;
+      this.confirmSingleChange();
+    },
+
+    confirmSingleChange() {
+      if (!this.tempSingleDate) {
+        this.popup = false;
+        return;
+      }
+      if (this.hasTime) {
+        this.singleVal = this.tempSingleDate + ' ' + (this.time ? this.time : '00:00:00');
+      } else {
+        this.singleVal = this.tempSingleDate;
+      }
+      this.setEmit(this.singleVal);
+      this.popup = false;
+    },
+
+    leftChange(e) {
+      const { before, after } = e.range;
+      this.rangeChange(before, after);
+      const obj = {
+        before: e.range.before,
+        after: e.range.after,
+        data: e.range.data,
+        fulldate: e.fulldate
+      };
+      this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj);
+    },
+
+    rightChange(e) {
+      const { before, after } = e.range;
+      this.rangeChange(before, after);
+      const obj = {
+        before: e.range.before,
+        after: e.range.after,
+        data: e.range.data,
+        fulldate: e.fulldate
+      };
+      this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj);
+    },
+
+    mobileChange(e) {
+      if (this.isRange) {
+        const { before, after } = e.range;
+        this.handleStartAndEnd(before, after, true);
+        if (this.hasTime) {
+          const { startTime, endTime } = e.timeRange;
+          this.tempRange.startTime = startTime;
+          this.tempRange.endTime = endTime;
+        }
+        this.confirmRangeChange();
+      } else {
+        if (this.hasTime) {
+          this.singleVal = e.fulldate + ' ' + e.time;
+        } else {
+          this.singleVal = e.fulldate;
+        }
+        this.setEmit(this.singleVal);
+      }
+      this.$refs.mobile.close();
+    },
+
+    rangeChange(before, after) {
+      if (!(before && after)) return;
+      this.handleStartAndEnd(before, after, true);
+      if (this.hasTime) return;
+      this.confirmRangeChange();
+    },
+
+    confirmRangeChange() {
+      if (!this.tempRange.startDate && !this.tempRange.endDate) {
+        this.popup = false;
+        return;
+      }
+      let start, end;
+      if (!this.hasTime) {
+        start = this.range.startDate = this.tempRange.startDate;
+        end = this.range.endDate = this.tempRange.endDate;
+      } else {
+        start = this.range.startDate =
+          this.tempRange.startDate + ' ' + (this.tempRange.startTime ? this.tempRange.startTime : '00:00:00');
+        end = this.range.endDate = this.tempRange.endDate + ' ' + (this.tempRange.endTime ? this.tempRange.endTime : '00:00:00');
+      }
+      const displayRange = [start, end];
+      this.setEmit(displayRange);
+      this.popup = false;
+    },
+
+    handleStartAndEnd(before, after, temp = false) {
+      if (!(before && after)) return;
+      const type = temp ? 'tempRange' : 'range';
+      if (this.dateCompare(before, after)) {
+        this[type].startDate = before;
+        this[type].endDate = after;
+      } else {
+        this[type].startDate = after;
+        this[type].endDate = before;
+      }
+    },
+
+    /**
+     * 比较时间大小
+     */
+    dateCompare(startDate, endDate) {
+      // 计算截止时间
+      startDate = new Date(startDate.replace('-', '/').replace('-', '/'));
+      // 计算详细项的截止时间
+      endDate = new Date(endDate.replace('-', '/').replace('-', '/'));
+      if (startDate <= endDate) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+
+    /**
+     * 比较时间差
+     */
+    diffDate(startDate, endDate) {
+      // 计算截止时间
+      startDate = new Date(startDate.replace('-', '/').replace('-', '/'));
+      // 计算详细项的截止时间
+      endDate = new Date(endDate.replace('-', '/').replace('-', '/'));
+      const diff = (endDate - startDate) / (24 * 60 * 60 * 1000);
+      return Math.abs(diff);
+    },
+
+    clear(needEmit = true) {
+      if (!this.isRange) {
+        this.singleVal = '';
+        if (this.isPhone) {
+          this.defSingleDate = '';
+        } else {
+          this.$refs.pcSingle.calendar.fullDate = '';
+          this.$refs.pcSingle.setDate();
+        }
+        if (needEmit) {
+          this.formItem && this.formItem.setValue('');
+          this.$emit('change', '');
+          this.$emit('input', '');
+          this.$emit('update:modelValue', '');
+        }
+      } else {
+        this.range.startDate = '';
+        this.range.endDate = '';
+        this.tempRange = {};
+        if (this.isPhone) {
+          this.endMultipleStatus = Object.assign(
+            {},
+            this.endMultipleStatus,
+            {
+              before: '',
+              after: '',
+              data: [],
+              fulldate: ''
+            },
+            {
+              which: 'left'
+            }
+          );
+        } else {
+          this.$refs.left.cale.multipleStatus.before = '';
+          this.$refs.left.cale.multipleStatus.after = '';
+          this.$refs.left.cale.multipleStatus.data = [];
+          this.$refs.left.cale.lastHover = false;
+          this.$refs.left.setDate();
+          this.$refs.right.cale.multipleStatus.before = '';
+          this.$refs.right.cale.multipleStatus.after = '';
+          this.$refs.right.cale.multipleStatus.data = [];
+          this.$refs.right.cale.lastHover = false;
+          this.$refs.right.setDate();
+          this.$refs.right.next();
+        }
+        if (needEmit) {
+          this.formItem && this.formItem.setValue([]);
+          this.$emit('change', []);
+          this.$emit('input', []);
+          this.$emit('update:modelValue', []);
+        }
+      }
+    },
+
+    parseDate(date) {
+      date = this.fixIosDateFormat(date);
+      const defVal = new Date(date);
+      const year = defVal.getFullYear();
+      const month = defVal.getMonth() + 1;
+      const day = defVal.getDate();
+      const hour = defVal.getHours();
+      const minute = defVal.getMinutes();
+      const second = defVal.getSeconds();
+      const defDate = year + '-' + this.lessTen(month) + '-' + this.lessTen(day);
+      const defTime = this.lessTen(hour) + ':' + this.lessTen(minute) + ':' + this.lessTen(second);
+      return {
+        defDate,
+        defTime
+      };
+    },
+
+    lessTen(item) {
+      return item < 10 ? '0' + item : item;
+    },
+
+    //兼容 iOS、safari 日期格式
+    fixIosDateFormat(value) {
+      if (typeof value === 'string') {
+        value = value.replace(/-/g, '/');
+      }
+      return value;
+    },
+
+    leftMonthSwitch(e) {
+      // console.log('leftMonthSwitch 返回:', e)
+    },
+    rightMonthSwitch(e) {
+      // console.log('rightMonthSwitch 返回:', e)
+    }
+  }
+};
+</script>
+
+<style scoped>
+@charset "UTF-8";
+
+.uni-date-x {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  border-radius: 4px;
+  background-color: #fff;
+  color: #666;
+  font-size: 14px;
+}
+
+.uni-date-x--border {
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+}
+
+.uni-date-editor--x {
+  position: relative;
+}
+
+.uni-date-editor--x .uni-date__icon-clear {
+  position: absolute;
+  top: 5px;
+  right: 0;
+  display: inline-block;
+  box-sizing: border-box;
+  border: 6px solid transparent;
+  margin-right: 6px;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-date__input {
+  height: 40px;
+  width: 100%;
+  padding: 0 8px;
+  line-height: 40px;
+  font-size: 14px;
+}
+
+.uni-date-range__input {
+  text-align: center;
+}
+
+.uni-date-picker__container {
+  position: relative;
+  /* 		position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  z-index: 996;
+  font-size: 14px; */
+}
+
+.uni-date-mask {
+  position: fixed;
+  bottom: 0px;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: rgba(0, 0, 0, 0);
+  transition-duration: 0.3s;
+  z-index: 996;
+}
+
+.uni-date-single--x {
+  /* padding: 0 8px; */
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.uni-date-range--x {
+  padding: 0 8px;
+  background-color: #fff;
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.uni-date-editor--x__disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.uni-date-editor--logo {
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+}
+
+/* 添加时间 */
+.popup-x-header {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  /* justify-content: space-between; */
+}
+
+.popup-x-header--datetime {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  flex: 1;
+}
+
+.popup-x-body {
+  display: flex;
+}
+
+.popup-x-footer {
+  padding: 0 15px;
+  border-top-color: #f1f1f1;
+  border-top-style: solid;
+  border-top-width: 1px;
+  background-color: #fff;
+  line-height: 40px;
+  text-align: right;
+  color: #666;
+}
+
+.popup-x-footer text:hover {
+  color: #007aff;
+  cursor: pointer;
+  opacity: 0.8;
+}
+
+.popup-x-footer .confirm {
+  margin-left: 20px;
+  color: #007aff;
+}
+
+.uni-date-changed {
+  background-color: #fff;
+  text-align: center;
+  color: #333;
+  border-bottom-color: #f1f1f1;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  /* padding: 0 50px; */
+}
+
+.uni-date-changed--time text {
+  /* padding: 0 20px; */
+  height: 50px;
+  line-height: 50px;
+}
+
+.uni-date-changed .uni-date-changed--time {
+  /* display: flex; */
+  flex: 1;
+}
+
+.uni-date-changed--time-date {
+  color: #333;
+  opacity: 0.6;
+}
+
+.mr-50 {
+  margin-right: 50px;
+}
+</style>