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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 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读取xml方法介绍
2013/01/12 PHP
解析php中的escape函数
2013/06/29 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
python仿抖音表白神器
2019/04/08 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
群众路线教育党课主持词
2014/04/01 职场文书
记账会计岗位职责
2014/06/16 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL