antd-mobile的DatePicker分钟精度半小时
项目要求,在时间选择上需要精确到分钟,且分钟只能半小时,既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分钟精度半小时的更多相关文章
- Redis 在java中的使用(登录验证,5分钟内连续输错3次密码,锁住帐号,半小时后解封)(三)
在java中使用redis,做简单的登录帐号的验证,使用string类型,使用redis的过期时间功能 1.首先进行redis的jar包的引用,因为用的是springBoot,springBoot集成 ...
- spring定时器,当遇见半小时的情况时
spring定时器遇见半小时的解决方法(这里只提供注解方式) @Scheduled(fixedRate=6000000)//每隔100分钟执行方法 fixedRate的值是毫秒
- sql查询技巧,按时间分段进行分组,每半小时一组统计组内记录数量
今天拿到一个查询需求,需要统计某一天各个时间段内的记录数量. 具体是统计某天9:00至22:00时间段,每半小时内订单的数量,最后形成的数据形式如下: 时间段 订单数 9:00~9: ...
- React-Native 之 GD (十二)海淘半小时热门 及 获取最新数据个数功能 (角标)
1.海淘半小时热门 基本功能和首页相似 GDHt.js /** * 海淘折扣 */ import React, { Component } from 'react'; import { Style ...
- Oracle中获取当前时间半小时前的时间
最近项目中有个要根据半个小时前的数据情况判断某一栏位的值,但是一直没想到怎样获取当前时间的半小时前的时间,今天突然想到可以通过sysdate做差来获取,比如sysdate-1这样的,刚开始没有对结果进 ...
- Quartz 设置一个半小时任务实现
该文章属于本人原创,转载请注明出处. spring + Quartz 设置定时任务时要求没一个半小时执行一次 设置两个相同的定时任务 第一个从整点开始每三小时执行一次 ...
- 半小时学会上传本地项目到github
半小时学会上传本地项目到github 闲着无聊写给那些正在学习怎么上传本地项目到github的同学. 开始学习 一.创建github账号 好吧,这步多余了. 二.创建个人仓库 三.配置SSH keys ...
- smarty半小时快速上手入门教程
http://www.jb51.net/article/56754.htm http://www.yiibai.com/smarty/smarty_functions.html http://www. ...
- 每篇半小时1天入门MongoDB——2.MongoDB环境变量配置和Shell操作
上一篇:每篇半小时1天入门MongoDB——1.MongoDB介绍和安装 配置环境变量 Win10系统为例 右键单击“此电脑”——属性——高级系统设置——高级——环境变量,添加C:\Program F ...
随机推荐
- C# 委托 、事件、同步、异步知识点归纳
一.委托 基本用法: 1.声明一个委托类型.委托就像是‘类'一样,声明了一种委托之后就可以创建多个具有此种特征的委托.(特征,指的是返回值.参数类型) public delegate void Som ...
- IDEA乱码总结和处理
工程乱码 打开File-Setting, 找到File Encodings这个选项,把encoding设置成你工程的编码即可,一般是UTF-8,如下图(红框的地方),然后重新rebuild一下,基本就 ...
- const成员函数和const对象
从成员函数说起 在说const成员函数之前,先说一下普通成员函数,其实每个成员函数都有一个隐形的入参:T *const this. int getValue(T *const this) { retu ...
- Python入门之第三方模块安装
Python入门之第三方模块安装 平台:Win10 x64 + Anaconda3-5.3.0 (+Python3.7.0) Issue说明:pip install line_profiler-2.1 ...
- Airflow安装异常:ERROR: flask-appbuilder 1.12.3 has requirement Flask<2,>=0.12, but you'll have flask 0.11.1 which is incompatible.
1 详细异常: ERROR: flask-appbuilder 1.12.3 has requirement Flask<2,>=0.12, but you'll have flask 0 ...
- 网络编程基础之TCP学习(二)编程案例
TCP网络编程流程如下: 实现功能:服务器端与客户端成功通讯后返回get! 服务器端程序 #include <netdb.h> #include <sys/socket.h> ...
- linux基础4-压缩及其相关的命令
一 压缩的原理以及gzip.bzip2.tar三个命令的: Linux下文件的压缩与打包 二 zip.zipinfo.unzip: zip:压缩成.zip文件 zipinfo:列出压缩文件信息
- sql server 防 注入
这里使用的是参数化 SqlParameter useremail = new SqlParameter("@useremail", user.user_Email); SqlPar ...
- GOLANG的继承语法练习
package main import( "fmt" _"sort" _"math/rand" ) // type WuDangMaster ...
- 记一次idea后台日志乱码解决办法