app-mob-datetime-picker.vue 3.4 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172
<template>
  <div class="app-mob-datetime-picker">
    <ion-datetime
      class="form-value-content"
      :max="max"
      :min="min"
      :display-format="displayFormat"
      :value="curValue"
      :placeholder="placeholder"
      :readonly="readOnly"
      :disabled="disabled"
      :cancel-text="$t('cancel_text')"
      :done-text="$t('done_text')"
      @ionChange="valueChange($event)"
      @ionCancel="clear"
      @ionFocus="enter"
      @ionBlur="leave"
    ></ion-datetime>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
const moment = require("moment");
@Component({
  i18n: {
    messages: {
      "ZH-CN": {
        cancel_text: "取消",
        done_text: "完成",
      },
      "EN-US": {
        cancel_text: "cancel",
        done_text: "submit",
      },
    },
  }
})
export default class AppDateTimePicker extends Vue {
  /**
   * 传入值
   *
   * @type {string}
   * @memberof AppDateTimePicker
   */
  @Prop() public value!: string;

  /**
   * 编辑器名称
   *
   * @type {string}
   * @memberof AppDateTimePicker
   */
  @Prop() public name?: string;

  /**
   * 是否禁用
   *
   * @type {boolean}
   * @memberof AppDateTimePicker
   */
  @Prop() public disabled?: boolean;

  /**
   * 是否只读
   *
   * @type {boolean}
   * @memberof AppDateTimePicker
   */
  @Prop() public readOnly?: boolean;

  /**
   * placeholder
   *
   * @type {boolean}
   * @memberof AppDateTimePicker
   */
  @Prop() public placeholder?: string;

  /**
   * 时间精度
   * @memberof AppDateTimePicker
   */
  @Prop({ default: "YYYY-MM-DD" }) public displayFormat?: string;

  /**
   * 当前选中值
   * @memberof AppDateTimePicker
   */
  public curValue: any = "";

  /**
   * 当前日期
   * @type {*}
   * @memberof MOBILEENTITY3Canlen
   */
  protected currentDate: any = new Date().getFullYear();

  /**
   * 最小值
   * @memberof AppDateTimePicker
   */
  public min: any = this.currentDate - 100;

  /**
   * 最大值
   * @memberof AppDateTimePicker
   */
  public max: any = this.currentDate + 100;

  /**
   * 监控值变化
   * @memberof AppDateTimePicker
   */
  @Watch("value", { immediate: true })
  public on_value_change(newVal: string, oldVal: any) {
    if (!newVal) {
      this.curValue = null;
      return;
    }
    this.curValue = moment(newVal).format(this.displayFormat);
  }

  /**
   * 时间选择改变
   *
   * @param event{*}
   * @memberof AppDateTimePicker
   */
  public valueChange(event: any) {
    this.curValue = moment(event.detail.value).format(this.displayFormat);
    const tempTime = moment(this.value).format(this.displayFormat);
    if (Object.is("Invalid date", this.curValue)) {
      this.curValue = null;
    }
    if (Object.is(this.curValue, tempTime)) {
      return;
    }
    this.$emit("change", {
      name: this.name,
      value: this.curValue,
      event: event,
    });
  }

  /**
   * 清空值
   * @memberof AppDateTimePicker
   */
  public clear(event: any) {
    this.curValue = null;
    this.$emit("change", { name: this.name, value: "", event: event });
  }

  /**
   * 有焦点时事件
   *
   * @memberof AppDateTimePicker
   */
  public enter(e: any) {
    this.$emit("enter", { name: this.name, value: this.curValue, event: e });
  }

  /**
   * 失去焦点事件
   *
   * @memberof AppDateTimePicker
   */
  public leave(e: any) {
    this.$emit("leave", { name: this.name, value: this.curValue, event: e });
  }
}
</script>