antdv + moment DatePicker日期组件默认显示当天、当周、当月

最新推荐文章于 2024-05-30 14:37:18 发布

心若向阳(*￣︶￣)

最新推荐文章于 2024-05-30 14:37:18 发布

阅读量5.2k

点赞数

分类专栏： vue2.0 个人项目 ant-design vue 文章标签： antdv DatePicker RangePicker moment 日期组件默认显示

本文链接：https://blog.csdn.net/agua001/article/details/122937230

版权

个人项目同时被 3 个专栏收录

144 篇文章 5 订阅

订阅专栏

ant-design vue

58 篇文章 1 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

本文介绍了在Ant Design中使用<a-range-picker>组件处理日期选择的多种场景，包括非表单和表单形式，展示了如何初始化当前时间、本周和本月的选择，并提供了禁止选择过去日期或未来日期的实现。同时，详细地展示了数据处理和初始化的逻辑，适用于前端开发中的日期管理。

摘要由CSDN通过智能技术生成

一、当天: 两种形式

1、非表单

<a-range-picker
  :allowClear="false"
  v-model="timeForm"
  class="range-item"
  style="width: 98%"
  format="YYYY-MM-DD"
  :ranges="{
    当天: [moment(), moment()],
  }"
  :placeholder="['开始时间', '结束时间']"
  :disabledDate="disabledDate"
  show-time
  @ok="confirm"
>
</a-range-picker>

data() {
  // 初始化时间
  this.starTime = moment().format("YYYY-MM-DD");
  this.endTime = moment().format("YYYY-MM-DD");
  return {
    timeForm: [
      moment(this.starTime, "YYYY-MM-DD"),
      moment(this.endTime, "YYYY-MM-DD"),
    ],
  };
},
// 在方法中使用：
if (this.timeForm[0] instanceof Object) {
  let starTime = moment(this.timeForm[0]).format("YYYY-MM-DD");
  let endTime = moment(this.timeForm[1]).format("YYYY-MM-DD");
}

2、表单

<a-col :xxl="5" :xl="6" :lg="12">
  <a-form-item
    label="时间"
    :labelCol="{ span: 4 }"
    :wrapperCol="{ span: 19 }"
  >
    <a-range-picker
      v-decorator="['timeForm']"
      format="YYYY-MM-DD"
      :disabledDate="disabledDate"
    />
  </a-form-item>
</a-col>
// 在初始化
created() {
  this.$nextTick(() => {
    // 初始化时间
    let timeData = this.configForm.getFieldsValue();
    if(timeData.timeForm && timeData.timeForm.length > 0) {
      timeData.starTime = moment(timeData.timeForm[0]).format('YYYY-MM-DD');
      timeData.endTime = moment(timeData.timeForm[1]).format('YYYY-MM-DD');
      delete timeData.timeForm
    } else {
      // 无数据时默认显示的时间
      let time = [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")];
      timeData.starTime = moment().format("YYYY-MM-DD");
      timeData.endTime = moment().format("YYYY-MM-DD");
      this.configForm.setFieldsValue({
        timeForm: time
      })
    }
    this.getData(timeData);
  });
},

二、当周、当月（除了初始化默认显示的时间不一致，其它都相同）

1、当周非表单

this.starTime = moment().startOf("isoWeek").format("YYYY-MM-DD");
this.endTime = moment().startOf("day").format("YYYY-MM-DD");

2、当周表单

let time = [moment().startOf("isoWeek").format("YYYY-MM-DD"), moment().startOf("day").format("YYYY-MM-DD")];
timeData.starTime = moment().startOf("isoWeek").format("YYYY-MM-DD");
timeData.endTime = moment().startOf("day").format("YYYY-MM-DD");
this.configForm.setFieldsValue({
  timeForm: time
})

3、当月非表单

this.starTime = moment().startOf("month").format("YYYY-MM-DD")
this.endTime = moment().format("YYYY-MM-DD")

4、当月表单

let time = [moment().startOf("month").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")];
timeData.starTime = moment().startOf("month").format("YYYY-MM-DD");
timeData.endTime = moment().format("YYYY-MM-DD");
this.configForm.setFieldsValue({
  timeForm: time
})

三、不可选择过去日期或未来的日期

// 禁止日期
disabledDate(current) {
  // 不可选过去时间
  // return current < moment().add(-1, 'd');
  // 不可选未来时间
  return current && current > moment().add(+1, "d");
},