antd日期选择器如何输出特定格式以及设置禁选时间段
案例:在项目中,需要用户选择大于今天的日期,并以"YYYY/MM/DD"的格式传递给后端。
1、解决日期禁选问题
在官方api中也提到,可以设置disabledDate来实现日期的禁选
语法:
js中定义disabledData函数
const disabledDate = (current) => {设置禁选范围}
在DatePicker 标签中引入
<DatePicker disabledDate={disabledDate} />
同时我们要知道antd是默认使用moment.js来实现日期格式化的,文档中有体现
在官网中可以通过moment().endOf(String)方法设置该时间单位的结束
可选的时间单位有day(默认今天)、week(默认本周)、month(默认本月)以及year(默认本年)
这样我们就可以将该方法运用到disabledDate 函数中
const disabledDate = (current) => {return current <= moment().endOf('day'); // 如果选择时间小于等于今天则禁选。
}
// 当然也可以使用moment().startOf('String') 方法
const disabledDate = (current) => {return current <= moment().startOf('day'); // 不过有个问题就是'今天'仍然可选
}
实现结果:灰色部分为禁选
以day为时间单位 | 以week为时间单位 |
2、解决以特定格式输出日期问题
如果不设置输出格式,将会默认输出完整日期 (如上图userBirth字段)
方法一: moment().format(String) 方法设置格式
userBirth = moment(value.userBirth).format('YYYY/MM/DD');
方法二:moment(String, String) 方法设置,这样设置更加灵活、日期格式可以动态更换(这里的dateFormat格式可以从其他接口获取)
const dateFormat = 'YYYY/MM/DD';
userBirth = moment(value.userBirth , dateFormat);
实现结果
Moment官网https://momentjs.com/
antd日期选择器如何输出特定格式以及设置禁选时间段相关推荐
- 微信小程序日期选择器控件xxxx-xx-xx格式
这个时间选择器,不用在util里面写,直接在js里面写就好啦.这个是2022-08-09格式的,和上一个不太一样,看自己需求选择合适的选择器. 1.indx.js文件 const date = new ...
- C++如何输出特定格式浮点数
1.C++情况下 先贴一段代码: float c = 2.5555566; cout<<setiosflags(ios::fixed)<<setprecision(2) < ...
- Antd RangePicker 时间日期选择器 禁用当前时间往后的日期及现在时间往后的时分秒禁选
RangePicker 组件 <RangePickeronChange={onSearch}placeholder={[formatMessage({ id: 'page.Business.St ...
- antd 日期时间选择_antd日期选择器禁止选择当天之前的时间操作
使用disabledDate属性(不可选择的日期) 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current &&am ...
- html5 自定义 datepicker,如何使用 React 构建自定义日期选择器(3)
本文作者:IMWeb howenhuo 未经同意,禁止转载 Datepicker 组件 构建 Datepicker 组件 要开始构建 Datepicker 组件,请将以下代码片段添加到 src/com ...
- java中时间输出的格式_Java 打印日期/时间格式
Java格式 - Java 打印日期/时间格式 Java 打印日期/时间格式处理日期,时间和日期时间值. Java 打印日期/时间格式可以应用于格式值为long,Long,java.util.Cale ...
- C语言如何返回格式化日期时间(格式化时间)?(将日期和时间以字符串格式输出)ctime()、asctime()、localtime()、strftime()
文章目录 ctime()函数: asctime()函数 获取自定义格式化时间(有bug,当时间为个位数时,没有在前面自动补零) 改成函数接口形式(传入字符指针) 20220107 优化后(能自动补零) ...
- 用DateTime.ToString(string format)输出不同格式的日期
引自[IT168知识库] 记录下来,方便以后自己查询,不用每次都上去找 DateTime.ToString()函数有四个重载.一般用得多的就是不带参数的那个了.殊不知,DateTime.ToStrin ...
- 使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep 22 2017 00:00:00 GM ...
最新文章
- 雷军坚持了 10 年的东西,现在彻底凉了
- ASP.NET简化编辑界面 V3
- centos下保留python2安装python3
- java web--servlet(2)
- 阿里云智能物联网解决方案宣讲会,帮助天津东丽临空经济区数字腾飞
- Linux中的基础IO(二)
- 【QMIX】一种基于Value-Based多智能体算法
- java vector_Java Vector size()方法与示例
- matlab 查看dll的函数参数类型,MATLAB调用dll文件中的库函数时的变量类型匹配问题?...
- Spring Boot Web相关配置
- 生成N位的数字英文随机混合的字符串
- 甘特图控件VARCHART XGantt:XGantt的用途
- 为什么网站打得开,却ping不通, 网站却打得开
- Contrastive Loss
- mysql 木马_通过mysql写入一句话木马
- java中对手机号、邮箱等隐私信息脱敏展示,如手机号138****8888。
- Ubuntu16 桌面卡死 重启桌面
- 组播地址分类 Cyrus
- 生成对抗网络——原理解释和数学推导
- tomcat启动错误Error deploying web application directory
热门文章
- 第六章 C语言数组_C语言变长数组:使用变量指明数组的长度
- 连接服务器时遇到报错:ERROR:ORA-12638: 身份证明检索失败(问题已解决)
- python dialog使用_dialog的使用方法
- flash与动画:人物动作动画
- python中 .py .pyc .pyw .pyo .pyd各后缀文件区别
- linux中ctags的使用方法
- AES128加密解密以及遇到的问题
- shell | 基基基础
- 苹果手机如何新建提醒事项?
- vertx rx java_光魔科技