项目要求,在时间选择上需要精确到分钟,且分钟只能半小时,既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. NOIP2009-2018简要题解

    口胡警告 NOIP2009 潜伏者 模拟 Hankson 的趣味题 对四个数\(a_0,a_1,b_0,b_1\)分解质因数,结果序列分别记为\(\{p1^{b1}\},\{p2^{b2}\},\{p ...

  2. 搞懂String、StringBuffer、StringBuilder的区别

    String.StringBuffer.StringBuilder有什么区别呢? 1.String: 首先String是不可变的这是家喻户晓的,它的底层是用一个final修饰的char数组来保存数据的 ...

  3. JS-上下文练习

    /** * 因为JS没有块级作用域,if里面的foo又是以var形式声明的,所以会被提升上去, * 被赋值为undefined,之后undefined代表false,所以会进入if语句块, * foo ...

  4. 给datagrid一列中的数据加上单位

    { field:'computeRate', title:'完成百分比', width:100, align:'center', halign:'center', sortable:true, for ...

  5. Java,JavaScript和ABAP通过代码取得当前代码的调用栈Callstack

    Java StackTraceElement stack[] = Thread.currentThread().getStackTrace(); System.out.println("Ca ...

  6. MySQL cmd操作

    1.开启关闭服务 net start mysql net stio mysql 2.登陆 在CMD命令窗口敲入命令 mysql -hlocalhost -uroot -p 后按回车(注意这里的&quo ...

  7. Python3简易接口自动化测试框架设计与实现(中)

    目录 7.Excel数据读取 7.1.读取配置文件 7.1.编写Excel操作类 8.用例组装 9.用例运行结果校验 10.运行用例 11 .小结 上一篇:Python3简易接口自动化测试框架设计与实 ...

  8. Computer Vision_2_Active Shape Models:Active Shape Models-Their Training and Application——1995

    此为计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面. 1. Active Appearance Models 活动表观模型和活动轮廓模型基本思想来源 Snake,现在 ...

  9. Azkaban无法启动错误Error: Could not find or load main class 12321

    1 错误日志 Using Hadoop from /mnt/software/hadoop-2.6.0-cdh5.16.1 bin/internal/../.. /mnt/software/jdk1. ...

  10. Linux下安装opencv(踩坑记录帖)

    1.首先安装依赖项:sudo apt install build-essential sudo apt install build-essentialsudo apt install cmake gi ...