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日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...
随机推荐
- Java基础 【自动装箱和拆箱、面试题】
JDK 1.5 (以后的版本)的新特性自动装箱和拆箱 1. 自动装箱:把基本类型转换为包装类类型 int a =10; Integer i = new Integer(a); Integer valu ...
- to do list_hadoop
1.页面翻译 2.UI优化 vue.js reactive.js 3.Hadoop生态学习 Spark.Kafka.Druid……
- Async、Await
Async.Await:net4.x新增的异步编程方式: 目的:为了简化异步程序编写 Async方式, 使用Async标记Async1为异步方法, 用Await标记GetRequestStreamAs ...
- Leetcode121-Best Time to Buy and Sell Stock I - Easy
I Say you have an array for which the ith element is the price of a given stock on day i. If you wer ...
- hihoCoder 1116 计算(线段树)
http://hihocoder.com/problemset/problem/1116 题意: 思路: 用线段树解决,每个节点需要设置4个变量,sum记录答案,all记录整个区间的乘积,pre记录该 ...
- python学习 day011打卡 迭代器
本节的主要内容: 1.函数名的使用以及第一类对象 2.闭包 3.迭代器 一.函数名的运用. 函数名是一个变量,但它是一个特殊的变量,与括号配合可以执行函数的变量. 1.函数名的内存地址 def fun ...
- JQ遇到$(‘.xxx’).attr(‘display’)一直返回undefined
jq attr && jq css 1.1 attr() 方法设置或返回被选元素的属性值 我们就题目遇到的问题做一个测试 //html <div class="div1 ...
- 深入JVM对象引用
在jdk 1.2以前,创建的对象只有处在可触及(reachaable)状态下,才能被程序所以使用,垃圾回收器一旦发现无用对象,便会对其进行回收.但是,在某些情况下,我们希望有些对象不需要立刻回收或者说 ...
- [原][osg]Geometry详解
//geometry成员变量 PrimitiveSetList _primitives; osg::ref_ptr<Array> _vertexArray; //顶点 osg::ref_p ...
- 使用Rancher的RKE部署Kubernetes要点
简要说明: RKE (Rancher Kubernetes Engine)是RancherLabs提供的一个工具,可以在裸机.虚拟机.公私有云上快速安装Kubernetes集群.整个集群的部署只需要一 ...