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 相关文章推荐
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
javascript二维数组转置实例
Jan 22 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
浅析创建javascript对象的方法
May 13 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
ES6新增的数组知识实例小结
May 23 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
使用无限生命期Session的方法
2006/10/09 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python获取邮件地址的方法
2015/07/10 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
python绘制直线的方法
2018/06/30 Python
Python线程同步的实现代码
2018/10/03 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python 日期与时间转换的方法
2020/08/01 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
应聘销售主管的求职信
2014/04/26 职场文书
化学教育专业自荐信
2014/07/04 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
社区助残日活动总结
2014/08/29 职场文书
小学见习报告
2014/10/31 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
Python基础详解之描述符
2021/04/28 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏