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 相关文章推荐
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
js如何取消事件冒泡
Sep 23 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
Vue.js对象转换实例
Jun 07 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
详解微信UnionID作用
May 15 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
PHP 微信支付类 demo
2015/11/30 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
奇妙的js
2007/09/24 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
关于教师节的演讲稿
2014/09/04 职场文书
涨价通知怎么写
2015/04/23 职场文书
高中历史教学反思
2016/02/19 职场文书
DE1103使用报告
2022/04/05 无线电
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript