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#数字前补0
[TestMethod] public void Test8() { ; string b = string.Format("{0:000000}", a); , '); }
- hdu 1068 最大子序列和变形,,,
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #d ...
- ButterKnife8.5.1最新版本使用详细步骤
android studio中使用方法: 1.build.gradle(Modul: app) 添加dependencies{ compile 'com.jakewharton:butterknife ...
- ES6用来判断数值的相关函数
最近在学习ES6的基础知识,整理了一下ES6用来判断数值的相关函数 Math.sign() =>判断正负数的函数 Math.trunc() =>取整函数 Number.isInteger( ...
- sketch最强切图工具Sketch Measure
https://www.inpandora.com/sketch-measure.html https://www.jianshu.com/p/c11ae88e6b1d
- 关于dataset
举个栗子: <div id="cost" data-drink="coffee" data-food="sushi" data-mea ...
- NSInvocation简单总结
(1)用法 NSInvocation是调用函数的另一种方式,它将调用者,函数名,参数封装到一个对象,然后通过一个invoke函数来执行被调用的函数,其思想就是命令者模式,将请求封装成对象. 例如,有这 ...
- 智能指针原理及实现(1)shared_ptr
0.异常安全 C++没有内存回收机制,每次程序员new出来的对象需要手动delete,流程复杂时可能会漏掉delete,导致内存泄漏.于是C++引入智能指针,可用于动态资源管理,资源即对象的管理策略. ...
- 安全开发Java动态代理
关于安全开发的一些思考 之前面试某宝的时候,某人问过我,如果解决开发不懂安全的问题,就比如说SSRF,XEE这样的漏洞,如果一旦发生,应该如果立刻去响应,并帮助开发人员修复漏洞,难道写一个jar包?然 ...
- PMM 监控 MySQL
Percona Monitoring and Management (PMM)是一款开源的用于监控 MySQL 和 MongoDB 性能的开源平台,通过 PMM 客户端收集到的 DB 监控数据用第三方 ...