现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是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. ES6中的函数和数组补漏

    对象的函数解构 我们在前后端分离时,后端经常返回来JSON格式的数据,前端的美好愿望是直接把这个JSON格式数据当作参数,传递到函数内部进行处理.ES6就为我们提供了这样的解构赋值. let json ...

  2. Jenkins-Publish HTML reports

    创建job:testreport 在job中添加: 在Jenkins服务器上: 创建目录: .jenkins/jobs/{job名称}/workspace/htmlreports    注:此处job ...

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

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

  4. C#:CsvReader读取.CSV文件(转换成DataTable)

    原文引用:https://www.codeproject.com/Articles/9258/A-Fast-CSV-Reader using LumenWorks.Framework.IO.Csv; ...

  5. Codeforces Round #271 (Div. 2) E. Pillars 线段树优化dp

    E. Pillars time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  6. live2d+cocos2dx示例工程

    环境 : win10 64bit visual studio 2013 cocos2d-x-3.9 Live2D_SDK_OpenGL_2.0.06_2_sample_3.3_en 首先安装visua ...

  7. redhat 配置yum源(配置163 yum repo)

    一般安装好redhat后,不能注册的话,不能使用系统自带的yum源.但是我们可以自己配置yum源来解决这一问题.下面介绍下redhat配置163yum源. 1) 查看版本号和系统类别: cat /et ...

  8. 封装sqlhelper【一】

    控件信息展示: //定义调用数据库类文件 namespace SqlHelper { public class TblClass { public int classId { get; set; } ...

  9. tslint无法工作:Failed to load the TSLint library for the document

    1--- 2--- 3---

  10. 《剑指offer》第四十一题(数据流中的中位数)

    // 面试题41:数据流中的中位数 // 题目:如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么 // 中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值, // ...