zoukankan      html  css  js  c++  java
  • Ant Design Vue日期选择器DatePicker设置日期格式、获取并设置数据

    导入
    在使用日期选择器前需要先引入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 ,如下图:

    可以看到这里的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)
    })
    第一行是如果你格式不对时,添加后面的格式,正常就不需要添加后面的格式。

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

    后面的是为自己记录:

    昨天写了表单设置值,方式二 内的东西:

    this.form.resetFields();
    this.model = Object.assign({}, this.record,{time: moment(this.record.time)});
    this.$nextTick(() => {
      this.form.setFieldsValue(pick(this.model, ',name', 'age'))
    });
    给日期选择框设置值,记录一下。
    ————————————————
    版权声明:本文为CSDN博主「DOM曼珠沙华」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/a18792627168/article/details/108218444

  • 相关阅读:
    [2020.11.15]CCPC Final 2019
    [2020.11.13]UOJ#424. 【集训队作业2018】count
    [2020.11.13]AtCoder Japan Alumni Group Summer Camp 2018 Day 2 K
    [2020.11.13]CF704C Black Widow
    [2020.11.13]CF765F Souvenirs
    [2020.11.13]AGC035D
    [2020.11.10]CSPS2020 翻车记
    拉格朗日反演(暂时鸽)与CF1349F2(xtq F2)
    [2020.6.20]ZJOI2020 Day1游记
    [2020.5.22]UOJ523 【美团杯2020】半前缀计数
  • 原文地址:https://www.cnblogs.com/csjoz/p/15293580.html
Copyright © 2011-2022 走看看