热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了antd-DatePicker组件获取时间值,及相关设置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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');
    }
    

效果如下图:

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

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

如图:

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

获取时间值

官网提供的函数:

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

如果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);
      }
    });
  };

            
{getFieldDecorator('date', { rules: [ { required: false, message: '选择日期', }, ], })()}

这种方式在提交表单的时候,直接从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组件获取时间值,及相关设置方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • 线段树详解与实现
    本文详细介绍了线段树的基本概念及其在编程竞赛中的应用,并提供了一个具体的线段树实现代码示例。 ... [详细]
  • C# 中创建和执行存储过程的方法
    本文详细介绍了如何使用 C# 创建和调用 SQL Server 存储过程,包括连接数据库、定义命令类型、设置参数等步骤。 ... [详细]
  • 1#include2#defineM1000103#defineRGregister4#defineinf0x3f3f3f3f5usingnamespacestd;6boolrev ... [详细]
  • 本文主要介绍如何在Mac操作系统中配置和安装Yii2的基础应用程序模板,同时提供解决常见安装问题的方法。对于高级或自定义应用模板的搭建,可参阅官方文档。 ... [详细]
  • 根据官方定义,RxJava是一种用于异步编程和可观察数据流的API。其核心特性在于流式处理能力和丰富的操作符支持。 ... [详细]
  • 探讨如何有效应对卡巴斯基密钥被列入黑名单的情况,提供安全可靠的解决方案,确保用户能够继续使用卡巴斯基的全部功能。 ... [详细]
  • SQL Server 存储过程实践任务(第二部分)
    本文档详细介绍了三个SQL Server存储过程的创建与使用方法,包括统计特定类型客房的入住人数、根据房间号查询客房详情以及删除特定类型的客房记录。 ... [详细]
  • Java注解(Annotations)简介与应用
    自从Java SE 5.0引入了注解(Annotations)这一特性以来,它就成为了增强代码功能和可读性的重要工具。注解允许开发者在不改变程序逻辑的前提下,在源代码中添加额外的元数据信息。 ... [详细]
  • 在编程实践中,正确管理和释放资源是非常重要的。本文将探讨 Python 中的 'with' 关键字及其背后的上下文管理器机制,以及它们如何帮助我们更安全、高效地管理资源。 ... [详细]
  • 微信小程序开发指南:创建动态电影选座界面
    本文详细介绍如何在微信小程序中实现一个动态且可视化的电影选座组件,提高用户体验。通过合理的布局和交互设计,使用户能够轻松选择心仪的座位。 ... [详细]
  • 本文介绍了如何解决 ChinaASP.Upload 错误 '80040002',即必须添加版权信息的问题,并提供了详细的步骤和注意事项。 ... [详细]
  • 材料光学属性集
    材料光学属性集概述了材料在不同光谱下的光学行为,包括可见光透射率、太阳光透射率等关键参数。 ... [详细]
  • VC++ 文件操作实践案例
    本文介绍如何在Visual C++ 6.0环境下,通过下载的VC源代码实现文件的基本读写操作,并解决常见的运行错误。 ... [详细]
  • Web前端开发的职业前景与就业指南
    随着互联网行业的蓬勃发展,Web前端技术因其在用户界面和交互设计中的关键作用而备受企业重视。本文探讨了前端开发的职业前景,以及应届毕业生如何提高自己的竞争力。 ... [详细]
  • 本文详细记录了腾讯ABS云平台的一次前端开发岗位面试经历,包括面试过程中遇到的JavaScript相关问题、Vue.js等框架的深入探讨以及算法挑战等内容。 ... [详细]
author-avatar
手机用户2502930417
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有