项目要求,在时间选择上需要精确到分钟,且分钟只能半小时,既0分钟或者是30分钟。

前期引用的时间控件是antd-mobile的DatePicker组件,具体用法可参考:https://mobile.ant.design/components/date-picker-cn/

其中组件有个minuteStep参数,将其设置成30,即可只显示0分钟或者30分钟了。

但是在选择的时候发现了问题,点击时间控件,弹出时间选择的界面,如果不去选择0分钟或者30分钟,直接点击确认,控件会选择到当前时间的分钟数,这是不合理的,解决方法:

使用到了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. Redis 在java中的使用(登录验证,5分钟内连续输错3次密码,锁住帐号,半小时后解封)(三)

    在java中使用redis,做简单的登录帐号的验证,使用string类型,使用redis的过期时间功能 1.首先进行redis的jar包的引用,因为用的是springBoot,springBoot集成 ...

  2. spring定时器,当遇见半小时的情况时

    spring定时器遇见半小时的解决方法(这里只提供注解方式) @Scheduled(fixedRate=6000000)//每隔100分钟执行方法 fixedRate的值是毫秒

  3. sql查询技巧,按时间分段进行分组,每半小时一组统计组内记录数量

    今天拿到一个查询需求,需要统计某一天各个时间段内的记录数量. 具体是统计某天9:00至22:00时间段,每半小时内订单的数量,最后形成的数据形式如下: 时间段          订单数 9:00~9: ...

  4. React-Native 之 GD (十二)海淘半小时热门 及 获取最新数据个数功能 (角标)

    1.海淘半小时热门   基本功能和首页相似 GDHt.js /** * 海淘折扣 */ import React, { Component } from 'react'; import { Style ...

  5. Oracle中获取当前时间半小时前的时间

    最近项目中有个要根据半个小时前的数据情况判断某一栏位的值,但是一直没想到怎样获取当前时间的半小时前的时间,今天突然想到可以通过sysdate做差来获取,比如sysdate-1这样的,刚开始没有对结果进 ...

  6. Quartz 设置一个半小时任务实现

    该文章属于本人原创,转载请注明出处.   spring + Quartz 设置定时任务时要求没一个半小时执行一次   设置两个相同的定时任务   第一个从整点开始每三小时执行一次           ...

  7. 半小时学会上传本地项目到github

    半小时学会上传本地项目到github 闲着无聊写给那些正在学习怎么上传本地项目到github的同学. 开始学习 一.创建github账号 好吧,这步多余了. 二.创建个人仓库 三.配置SSH keys ...

  8. smarty半小时快速上手入门教程

    http://www.jb51.net/article/56754.htm http://www.yiibai.com/smarty/smarty_functions.html http://www. ...

  9. 每篇半小时1天入门MongoDB——2.MongoDB环境变量配置和Shell操作

    上一篇:每篇半小时1天入门MongoDB——1.MongoDB介绍和安装 配置环境变量 Win10系统为例 右键单击“此电脑”——属性——高级系统设置——高级——环境变量,添加C:\Program F ...

随机推荐

  1. springboot+mybatis调用oracle存储过程

    1 存储过程参数为VARCHAR 代码逻辑:controller层定义实体类对象entity,并entity.set给存储过程的输入参数赋值,把赋值后的实体类通过service层传到dao层,然后通过 ...

  2. python简答

    解释 GIL 全局解释器锁 def func(*args): for i in args: print(i) func(3,2,1,4,7) 在我们不知道该传递多少关键字参数时,使用**kwargs ...

  3. IOS 改变UISearchBar的背景色

    之前网上提供的方法试了很多种  都不能很好的去掉背景色  ,修改背景色方法如下: searchbar.barStyle = UIBarStyleBlackTranslucent; searchbar. ...

  4. 关于windows下编写的shell脚本在linux下无法运行报错问题

    首先,你写的shell脚本必须是正确的, 其次,无法运行的原因:因为windows下的换行是两个字节,而你上传到linux,linux下换行是两个字节,所以编译的酒不正确的,导致无法 运行脚本, 这种 ...

  5. SparkSQL读取HBase数据

    这里的SparkSQL是指整合了Hive的spark-sql cli(关于SparkSQL和Hive的整合,见文章后面的参考阅读). 本质上就是通过Hive访问HBase表,具体就是通过hive-hb ...

  6. 【php设计模式】观察者模式

    当对象间存在一对多关系时,则使用观察者模式.比如,当一个对象被修改时,则会自动通知它的依赖对象.观察者模式属于行为型模式. <?php class Subject{ private $obser ...

  7. C++ STL 之 multimap案例之员工分组

    #include <iostream> #include <vector> #include <map> #include <string> #incl ...

  8. 在eclipse导入项目的步骤

    1. Import 2. Next 3. 确定  选中copy projects into workspace    Finish 这样项目就导入进来了. 4.导入jar包 Configure Bui ...

  9. 7.使用EXPLAIN 来分析SQL和表结构_1

    explain:查看执行计划 使用explain 关键字可以模拟优化器执行SQL查询语句,从而知道MySQL是如何处理你的SQL语句的 分析你的查询语句或是表结构的性能瓶颈 使用explain 可以获 ...

  10. Kinect 深度测量原理

    和其他摄像机一样,近红外摄像机也有视场.Kinect摄像机的视野是有限的,如下图所示: 如图,红外摄像机的视场是金字塔形状的.离摄像机远的物体比近的物体拥有更大的视场横截面积.这意味着影像的高度和宽度 ...