项目要求,在时间选择上需要精确到分钟,且分钟只能半小时,既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. spring-cloud 学习四 服务网关

    API Gateway 服务网关在微服务中是一个很重要的组成部分,通过服务网关可以统一向外提供REST API,例如 / 映射到后端应用 /api/user 映射到 user service,  /a ...

  2. 【ES6 】Promise

    Promise对象定义: 用来处理异步编程 Promise对象的特点 对象的状态不受外界影响 一旦状态改变,就不会再变,任何时候都可以得到这个结果 Promise对象的状态 pending(进行中) ...

  3. JS基础_函数的返回值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. luogu1731生日蛋糕题解--恶心剪枝

    题目链接 https://www.luogu.org/problemnew/show/P1731 分析 这题真[哔]恶心,加了一堆奇奇怪怪的优化 首先明确一点,半径和高都必须是正整数,意味着它们最小为 ...

  5. python简答

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

  6. 【opencv 源码剖析】 四、 Mat的赋值构造函数 和 拷贝构造函数

    1.赋值构造函数 右值引用 inline Mat& Mat::operator = (Mat&& m) { if (this == &m) return *this; ...

  7. 15 Django之Celery发送邮件

    异步任务--celery发送邮件 安装两个python包: pip install celery==3.1.25 pip install django-celery==3.2.1 pip instal ...

  8. Python打

    .智能识别图片物体.这步是智能垃圾分类的魔法核心.原理是人工智能会根据打上标签的海量图片来识别新的图片所归属的分类标签.好奇的读者可能会问,我没学过深度学习啊?我也不会训练模型,怎么办? python ...

  9. SpringBoot + Dubbo + zookeeper 搭建简单分布式服务

    SpringBoot + Dubbo + zookeeper 搭建简单分布式服务 详细操作及源码见: https://github.com/BillyYangOne/dubbo-springboot

  10. 【Struts2】拦截器

    一.概述 二.在Struts2中使用拦截器 2.1 步骤 2.2 分析拦截器原理 2.3 关于interceptor与Filter区别: 三.案例 一.概述 介绍拦截器: struts2拦截器使用的是 ...