Ant Design Vue日期选择器DatePicker设置日期格式、获取并设置数据

亦凉 2022-12-01 01:14 3052阅读 0赞

### 导入 ###

在使用日期选择器前需要先引入momnet：

import moment from "moment";
    import "moment/locale/zh-cn"

在引入后使用选择器：

<a-date-picker
    	format="YYYY-MM-DD HH:mm:ss"
    	v-decorator="['time',{rules: [{ required: true, message: '请输入时间!' }]}]"
            :showTime="{ initialValue: moment('00:00:00', 'HH:mm:ss') }"
    	placeholder="请选择时间"
    	@change="onChange"
    	@ok="onOk" />

这里的`format` 属性，用于自定义日期显示格式，我这里使用的是 2020-08-25，showTime是展示默认时间的，但是，嗯，我设置了好像没什么用，可能有问题，可以给我留言，说一下这个是什么问题。。多谢。

### 获取时间的方式 ###

方式一：

在上述操作完成后，事件的添加：

methods: {
        moment,
        onChange (value, dateString) {
          console.log('Selected Time: ', value)
          console.log('Formatted Selected Time: ', dateString)
        },
        onOk (value) {
          console.log('onOk: ', value)
        },
    }

这里可以获取你需要的日期数据 dateString ，如下图：

![20200825115854927.png][]

可以看到这里的dateString是你可以获取得到的时间数据。

这个是获取时间，通过v-model设置的话可以采用方式一获取使用获取。

方式二：

如果你表单内采用v-decorator进行数据绑定，也可以通过表单的方式获取：

获取到之后需要采用moment进行格式转换

this.form.validateFields((err, values) => {
    	if (!err) {
    	  console.log('Received values of form: ', values);
    	  values.time = moment(values.time).format('YYYY-MM-DD HH:mm:ss')
    	}
    })

这个time与我上述a-input标签内的v-decorator绑定的数据一致。

这样你可以拿到表单内time的数据并转换格式。

在说完获取数据后，再说一下日期选择器设置数据吧

### 设置数据 ###

如果你拿到个日期数据，后台返回的json数据，我拿到的为字符串，但是我直接设置不上去，是因为日期选择器这里会报错，我报错没截图，但是记得这个会报需要拿到的是日期对象，而不能设置字符串。

所以，在设置数据前先对数据进行moment进行格式转换

用法：在设置数据前先转化要设置的时间格式：

this.form.setFieldsValue({
        // "date": moment("自定义默认日期", 'YYYY-MM-DD')
        “startTime": moment(this.startTime)
    })

第一行是如果你格式不对时，添加后面的格式，正常就不需要添加后面的格式。

设置数据的核心就是这样子，也可以其他方式实现。

后面的是为自己记录：

昨天写了[表单设置值][Link 1]，方式二 内的东西：

this.form.resetFields();
    this.model = Object.assign({}, this.record,{time: moment(this.record.time)});
    this.$nextTick(() => {
      this.form.setFieldsValue(pick(this.model, ',name', 'age'))
    });

给日期选择框设置值，记录一下。

[20200825115854927.png]: /images/20221123/92b4b325894b4b8996f4709561053408.png
[Link 1]: https://blog.csdn.net/a18792627168/article/details/108201832