antd-mobile的DatePicker日期选择组件使用
现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是0分钟或者是30分钟。
使用了antd-mobile的DatePicker组件,具体用法可参考:https://mobile.ant.design/components/date-picker-cn/
其中组件有个minuteStep参数,将其设置成30,即可只显示0分钟或者30分钟了。
但是在选择的时候发现了问题,点击时间控件,弹出时间选择的界面,如果不去选择0分钟或者30分钟,直接点击确认,控件会选择到当前时间的分钟数,这是不合理的,解决方法:
参考了https://www.zhihu.com/question/56076235,使用到了moment对象,需要在项目中引入moment.js。增加一个判断,如果选择到30分钟了,即不变。如果不是30分钟则将分钟数设置为0,具体做法如下:
<DatePicker
value={this.state.startTime} minuteStep = {30}
onChange={startTime => this.setState({startTime: new Date(startTime).getMinutes() == 30 ? startTime : moment( new Date(startTime).setMinutes(0) ) })}
>
<List.Item arrow="horizontal"><font color="red"> * </font>开始时间</List.Item>
</DatePicker>
这样既可实现。
antd-mobile的DatePicker日期选择组件使用的更多相关文章
- react-native DatePicker日期选择组件的实现
本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...
- 支付宝小程序日期选择组件datePicker封装
github 地址 https://github.com/iocool/antminDatePicker 最近在做支付宝小程序(以下简称小程序)开发,发现小程序的日期选择组件很不好用,比如安卓和IOS ...
- 日期选择组件(DatePicker)的实现
一.效果图 日期选择组件大概长这样: 从效果图可以看出,日期选择组件由两部分组成:日历表格和顶部操作栏. 二.日历表格 日期选择组件的核心主体是日历表格: 可以将日历表格表示成一个7️*的二维数组,数 ...
- Ant Design 日期选择组件RangePicker 选择时间范围后计算范围内的天数。
/** *需求:同年同月,同年不同月(两个月相减大于1,小于1),不同年(两个年相减大于1(是否为闰年),小于1),起止包含的月份及天 */ //首先引入组件 import { DatePicker} ...
- sencha:日期选择组件datepicker
来源于<sencha touch权威指南> ------------------------------- 除app.js外,其它内容都与上一篇博客里的内容相同.app.js代码如下: E ...
- My97DatePicker -- 一个功能丰富, 而且兼容 ie 6, 7的日期选择组件
easyUI 也提供了 功能强大的日期组件, 可惜在ie 6,7,8下会报错,没有找到 addEventListener , JSON, 可能现在不想再支持低版本ie了 另外avalon也提供了 日 ...
- My97 DatePicker 日期选择插件.
My97DatePicker是一个纯js写的时间插件,体积较小,更可以自己扩展皮肤,且样式不和页面相冲突,有多钟配置,近期项目用了一下感觉还不错...分享给大家 软件官网:http://www.my9 ...
- vue 移动端日期选择组件 vue-mobile-calendar
vue-mobile-calendar cnpm install vue-mobile-calendar -S import Vue from 'vue' import Calendar from ' ...
- element-ui日期组件DatePicker设置日期选择范围Picker Options
element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...
随机推荐
- 【论文笔记】Learning Convolutional Neural Networks for Graphs
Learning Convolutional Neural Networks for Graphs 2018-01-17 21:41:57 [Introduction] 这篇 paper 是发表在 ...
- 今天就整一个bug了
BeanPostProcessor加载次序及其对Bean造成的影响分析 SSM整合出现not found for dependency: expected at least 1 bean which ...
- mySql 数据库设计原则
mysql数据库设计原则: 必须使用InnoDB存储引擎 解读:支持事务.行级锁.并发性能更好.CPU及内存缓存页优化使得资源利用率更高 禁止使用存储过程.视图.触发器.Event 解读:高并发大数据 ...
- 【转载】大连商品交易所-新套利撮合算法FAQ
原文网址:http://www.dce.com.cn/dalianshangpin/yw/fw/ywzy/jyywzy/498201/1500371/index.html 大连商品交易所 新套利撮 ...
- Java 虚拟机 最易理解的 全面解析
先上一个最容易理解的类实例化的内存模型案例截图: 转载自:https://www.zybuluo.com/Yano/note/321063 周志明著的<深入理解 Java 虚拟机>的干货~ ...
- maven 引入外部jar包的几种方式
方式1:dependency 本地jar包 <dependency> <groupId>com.hope.cloud</groupId> <!--自定义--& ...
- Android 虹软免费人脸识别 SDK开发
目前我们的应用内使用了 ArcFace 的人脸检测功能,其他的我们并不了解,所以这里就和大家分享一下我们的集成过程和一些使用心得集成ArcFace FD 的集成过程非常简单在 ArcFace FD 的 ...
- Scrapy基本命令
全局命令,不用在项目中运行fetch:爬取网页,不依赖爬虫项目直接爬网页信息,并显示爬取过程scrapy命令格式:scrapy 命令名 --参数,可能通过--控制,例如:scrapy fetch -h ...
- Android接入微信SDK之一:发起微信授权登录
1.重要的事情首先说! 包名.应用签名.app id 三者都必须和在腾讯上申请的一致!!!否则将不能成功. 包名:就是在腾讯上申请的包名 应用签名:使用微信官网提供的<签名生成工具>(这个 ...
- 日常英语---六、Maplestory Illium
日常英语---六.Maplestory Illium 一.总结 一句话总结: maplestory-['meiplstɔri] illium-镍铬合金 ['meiplstɔri] n. 枫之谷(网 ...