项目要求,在时间选择上需要精确到分钟,且分钟只能半小时,既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. js date对象传参获取特定日期的时间戳

    当我们想要通过js获取某一特定时间的时间戳时,会通过给date对象传参再通过getTime函数来获取,传递的参数格式也有不同形式.有些时候,可能会因为自己传入参数的格式不正确而导致date对象inva ...

  2. kubernetes 实现redis-statefulset集群

    Kubernetes 通过statefulset部署redis cluster集群 部署redis集群方式的选择 Statefulset Service&depolyment 对于redis, ...

  3. 最简单的一个win32程序

    #include <windows.h> HINSTANCE g_hInst = NULL; //2 窗口处理函数 LRESULT CALLBACK WndProc( HWND hWnd, ...

  4. 基于SDP的提议/应答(offer/answer)模型简介

    1.引入 在松耦合会议中,会话参数完全由会议创建者来确定,参与者能做的仅仅是根据这些会话参数来加入会议(当然也可以选择不加入).这种情况下,主要要做的就是会话描述,在这里SDP本身就足够了. 但是在更 ...

  5. 【php设计模式】门面模式

    门面模式又叫外观模式,用来隐藏系统的复杂性,并向客户端提供了一个客户端可以访问系统的接口.这种类型的设计模式属于结构型模式,它向现有的系统添加一个接口,来隐藏系统的复杂性. 这种模式涉及到一个单一的类 ...

  6. Java 程序员必备的一些流程图

    1.spring的生命周期 2.TCP三次握手,四次挥手 3.线程池执行流程图 4.JVM内存结构 5.Java内存模型 6.springMVC执行流程图 7.JDBC执行流程 8.spring cl ...

  7. WebLogic 12c Linux 命令行 静默安装

    CentOS 6.3安装配置Weblogic 10  http://www.linuxidc.com/Linux/2014-02/96918.htm Oracle WebLogic 11g 安装部署文 ...

  8. 第一章 Django之MVC模式(2)

    让我们来研究一个简单的例子,通过该实例,你可以分辨出,通过 Web 框架来实现的功能与之前的方式有何不同.下面就是通过使用 Django 来完成以上功能的例子: # models.py (the da ...

  9. (备忘)Java Map 遍历

    //最常规的一种遍历方法,最常规就是最常用的,虽然不复杂,但很重要,这是我们最熟悉的,就不多说了!! public static void work(Map<String, Student> ...

  10. 利用Pycharm部署同步更新Django项目文件

    利用Pycharm部署同步更新Django项目文件 这里使用同步更新的前提是你已经在服务器上上传了你的Django项目文件. 在"工具(Tools)"菜单中找到"部署(D ...