美文网首页
ant design vue 清空a-time-picker和a

ant design vue 清空a-time-picker和a

作者: CoderZb | 来源:发表于2021-12-17 13:30 被阅读0次

a-time-picker清空值

image.png
<a-time-picker
      v-model="startTime"
      @change="onStartTimeChange"
      format="HH:mm"
      placeholder="开始时间"
/>
export default {
  name: "BookingVenue",
  data() {
    return {
      startTime:"",;// 或undefined。前端展示在输入框的。Moment类型
      startTimeString:"",// 后台需要的。例如  12:35
    };
  },
  methods: {
    resetFunc () {// 重置点击
      this.startTime = "";// 或undefined
      this.timeString = "";
      this.venueListFunc(1);// 获取最新数据
    },
    onStartTimeChange (time, timeString) {
      this.startTime = time
      this.timeString = timeString;
    },
  }
}

a-date-picke清空值

image.png
<a-date-picker
  v-model="calendarStartTime"
  format="YYYY-MM-DD"
  @change="onCalendarTimeChange"
/>
export default {
  name: "BookingVenue",
  data() {
    return {
      calendarStartTime:"",// 或undefined。前端展示在输入框的。Moment类型
      calendarStartTimeString:"",// 后台需要的。例如  2021-12-14
    };
  },
  methods: {
    resetFunc () {// 重置点击
      this.calendarStartTime = "";// 或undefined
      this.calendarStartTimeString = "";
      this.venueListFunc(1);// 获取最新数据
    },
    onCalendarTimeChange (time, timeString) {
      this.calendarStartTime = time;
      this.calendarStartTimeString = timeString;
    },
  }
}

a-range-picker清空值

image.png
<a-range-picker
      :ranges="{
      Today: [moment(), moment()],
      'This Month': [moment(), moment().endOf('month')]
      }"
      v-model="fullTime"
      show-time
      format="YYYY-MM-DD"
      @change="onTimeChange"
/>
export default {
  name: "BookingVenue",
  data() {
    return {
      fullTime:[],// 前端展示在输入框的。Moment类型
      calendarRangeStartTime:"",,// 后台需要的。例如  2021-12-08
      calendarRangeEndTime:"",,// 后台需要的。例如  2021-12-09
    };
  },
  methods: {
    resetFunc () {// 重置点击
      this.fullTime = [];
      this.calendarRangeStartTime = "";
      this.calendarRangeEndTime = "";
      this.venueListFunc(1);// 获取最新数据
    },
    onCalendarRangeTimeChange (dates, dateStrings) {
      this.fullTime = dates;
      this.calendarRangeStartTime = dateStrings[0];
      this.calendarRangeEndTime = dateStrings[1];
    },
  }
}

相关文章

网友评论

      本文标题:ant design vue 清空a-time-picker和a

      本文链接:https://www.haomeiwen.com/subject/xixifrtx.html