现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是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日期选择组件使用的更多相关文章

  1. react-native DatePicker日期选择组件的实现

    本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...

  2. 支付宝小程序日期选择组件datePicker封装

    github 地址 https://github.com/iocool/antminDatePicker 最近在做支付宝小程序(以下简称小程序)开发,发现小程序的日期选择组件很不好用,比如安卓和IOS ...

  3. 日期选择组件(DatePicker)的实现

    一.效果图 日期选择组件大概长这样: 从效果图可以看出,日期选择组件由两部分组成:日历表格和顶部操作栏. 二.日历表格 日期选择组件的核心主体是日历表格: 可以将日历表格表示成一个7️*的二维数组,数 ...

  4. Ant Design 日期选择组件RangePicker 选择时间范围后计算范围内的天数。

    /** *需求:同年同月,同年不同月(两个月相减大于1,小于1),不同年(两个年相减大于1(是否为闰年),小于1),起止包含的月份及天 */ //首先引入组件 import { DatePicker} ...

  5. sencha:日期选择组件datepicker

    来源于<sencha touch权威指南> ------------------------------- 除app.js外,其它内容都与上一篇博客里的内容相同.app.js代码如下: E ...

  6. My97DatePicker -- 一个功能丰富, 而且兼容 ie 6, 7的日期选择组件

    easyUI 也提供了 功能强大的日期组件, 可惜在ie 6,7,8下会报错,没有找到 addEventListener , JSON,  可能现在不想再支持低版本ie了 另外avalon也提供了 日 ...

  7. My97 DatePicker 日期选择插件.

    My97DatePicker是一个纯js写的时间插件,体积较小,更可以自己扩展皮肤,且样式不和页面相冲突,有多钟配置,近期项目用了一下感觉还不错...分享给大家 软件官网:http://www.my9 ...

  8. vue 移动端日期选择组件 vue-mobile-calendar

    vue-mobile-calendar cnpm install vue-mobile-calendar -S import Vue from 'vue' import Calendar from ' ...

  9. element-ui日期组件DatePicker设置日期选择范围Picker Options

    element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...

随机推荐

  1. js数组常用方法,含es5

    (1)基本的数组方法 1.join() Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串.可以自己指定分隔的符号,如果不指定,默认使用逗号 var arr ...

  2. Java LocalDateTime,DateTimeFomatter----JDK8新时间类的简单使用

    JDK8中增加了一系列时间的类, (据说)是为了干掉过去的Date,Calendar类的, 过去的Date类(据说)有着线程不安全等诸多弊端, 至于我的个人感受就是用起来实在是很麻烦,我一般封装成几个 ...

  3. Money 20/20 | 未来金融数字化转型:数字化半径与全栈式战略观

    小蚂蚁说: 近年来,国际和国内的领先银行纷纷全力投入数字化转型.IDC去年报告说,全球1000大企业里面,67%已经把数字化转型定为企业级战略,而决定数字化转型成功与否的是人的思想改变.我们用数字化半 ...

  4. mac 下安装ES 与 Head插件 以及安装Kibana

    一.安装Elasticsearch 在Mac上可以使用brew快速安装Elasticsearch brew install elasticsearch 安装完成后可使用elasticsearch -- ...

  5. java 四种线程池的异同

    四种线程池的区别仅仅在于executors让threadpoolexecutor的构造器的参数不同,即核心线程池数,最大线程池数等不同.但是其他的,例如终止线程池等都是一样的

  6. django特殊的标签和过滤器

    国际化标签和过滤器 Django还提供了一些模板标签和过滤器,用以控制模板中国际化的每个方面.它们允许对翻译,格式化和时区转换进行粒度控制. 1. i18n 此标签允许在模板中指定可翻译文本.要启用它 ...

  7. STL_string.【转】C++中int、string等常见类型转换

    ZC:#include <sstream> ZC:貌似还有 istringstream 和 ostringstream ... https://www.cnblogs.com/gaobw/ ...

  8. [原][osg][QT]osg与QT界面结合的简单例子二

    //main.cpp #include "VREObliqueEditorQTWindow.h" #include <QtWidgets/QApplication> # ...

  9. github Bash教程

    1.只在本地使用 配置github git config --global user.name 你的英文名 git config --global user.email 你的邮箱 git config ...

  10. Math.abs(~2020) 按位取反后的绝对值是多少 2021, 按位取反后,比正数多1

    Math.abs(~2020)  按位取反后的绝对值是多少 2021, 按位取反后,比正数多1 int 值的取值 范围:   -128 ---  127   之间, 0000 0000     按位取 ...