antd-DatePicker组件获取时间值,及相关设置方式


Posted in Javascript onOctober 27, 2020

DatePicker组件默认语言是英语,需要设置为中文的话,需要安装moment。

import moment from "moment";

import "moment/locale/zh-cn"

format属性,设置日期的格式,如“2020-02-28”。

设置日期

选择日期是今天之前【包含今天】

需要和moment搭配应用

// 设置默认的起始日期
    const disabledDate = (current) => {
      console.log(current)
      return current > moment().startOf('day');
    }
    <DatePicker disabledDate={disabledDate}

效果如下图:

antd-DatePicker组件获取时间值,及相关设置方式

如果是选择今天之后的日期【包含今天】

const disabledDate = (current) => {
      console.log(current)
      return current > moment().startOf('day');
    }

如图:

antd-DatePicker组件获取时间值,及相关设置方式

关于moment的API,可以参考 moment 的具体文档

获取时间值

官网提供的函数:

function onChange(date, dateString) {
 console.log(date, dateString);
 // date 就是原始的日期数值,dateString 就是我们需要的日期格式
}

antd-DatePicker组件获取时间值,及相关设置方式

如果DatePicker组件嵌套在form表单里面,有两种方式获取日期值

第一种方式:

使用官网提供的函数,并在State中设置日期参数

constructor(){
  super()
  this.state={
    date:""
  }
}

onChange = (value,dateString)=>{
  this.setState({
    date:dateString
  })
}

  handleSubmit1 = e => {
    const that = this;
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log(values.date)
        that.setState({
          date: that.state.date
        })
        that.getData(1, 10, that.state.date);
      }
    });
  };
<Form className="ant-advanced-search-form" onSubmit={this.handleSubmit1}>
            <div className="search-report">
              <Form.Item label="日期">
                {getFieldDecorator('date', {
                  rules: [
                    {
                      required: false,
                      message: '选择日期',
                    },
                  ],
                })(<DatePicker onChange={this.onChange} format="YYYY-MM-DD" placeholder="选择日期" />)}

              </Form.Item>
              <Button type="primary" htmlType="submit">查询</Button>
            </div>
          </Form>

这种方式在提交表单的时候,直接从state中获取日期参数值。

第二种方式:

使用moment转换日期

handleSubmit3 = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      const data = moment(values.date).format('YYYY-MM-DD')
      console.log(data)
    });
  };

补充知识:moment.js可以通过 .format()方法将时间变成字符串:

我就废话不多说了,就是一行代码的事,来看看吧~

moment(moment().add(1, 'M')).format(dateFormat)

以上这篇antd-DatePicker组件获取时间值,及相关设置方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 #Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 #Javascript
ant design 日期格式化的实现
Oct 27 #Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 #Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 #Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 #Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 #Javascript
You might like
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python2包含中文报错的解决方法
2018/07/09 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
python中 * 的用法详解
2019/07/10 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
《珍珠泉》教学反思
2014/02/20 职场文书
书香校园活动方案
2014/02/28 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
内乡县衙导游词
2015/02/05 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
小学运动会通讯稿
2015/07/18 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
2016年教师节感言
2015/12/09 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书