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在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 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下10件你也许并不了解的事情
2008/09/11 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
python原始套接字编程示例分享
2014/02/21 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
简单租房协议书范本
2014/08/20 职场文书
教师个人学习总结
2015/02/11 职场文书
学校重阳节活动总结
2015/03/24 职场文书
行政处罚听证告知书
2015/07/01 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python