现在项目上有个需求，在时间选择上需要精确到分钟，且分钟只能是0分钟或者是30分钟。

其中组件有个minuteStep参数，将其设置成30，即可只显示0分钟或者30分钟了。

但是在选择的时候发现了问题，点击时间控件，弹出时间选择的界面，如果不去选择0分钟或者30分钟，直接点击确认，控件会选择到当前时间的分钟数，这是不合理的，解决方法：

参考了https://www.zhihu.com/question/56076235，使用到了moment对象，需要在项目中引入moment.js。增加一个判断，如果选择到30分钟了，即不变。如果不是30分钟则将分钟数设置为0，具体做法如下:

value={this.state.startTime} minuteStep = {30}

onChange={startTime => this.setState({startTime: new Date(startTime).getMinutes() == 30 ? startTime : moment( new Date(startTime).setMinutes(0) ) })}

>

* 开始时间

这样既可实现。

react-native DatePicker日期选择组件的实现

本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...

支付宝小程序日期选择组件datePicker封装

github 地址 https://github.com/iocool/antminDatePicker 最近在做支付宝小程序(以下简称小程序)开发,发现小程序的日期选择组件很不好用,比如安卓和IOS ...

Ant Design 日期选择组件RangePicker 选择时间范围后计算范围内的天数。

/** *需求:同年同月,同年不同月(两个月相减大于1,小于1),不同年(两个年相减大于1(是否为闰年),小于1),起止包含的月份及天 */ //首先引入组件 import { DatePicker} ...

sencha：日期选择组件datepicker

来源于 ------------------------------- 除app.js外,其它内容都与上一篇博客里的内容相同.app.js代码如下: E ...

My97DatePicker -- 一个功能丰富， 而且兼容 ie 6, 7的日期选择组件

easyUI 也提供了 功能强大的日期组件, 可惜在ie 6,7,8下会报错,没有找到 addEventListener , JSON,  可能现在不想再支持低版本ie了 另外avalon也提供了 日 ...

My97 DatePicker 日期选择插件.

My97DatePicker是一个纯js写的时间插件,体积较小,更可以自己扩展皮肤,且样式不和页面相冲突,有多钟配置,近期项目用了一下感觉还不错...分享给大家 软件官网:http://www.my9 ...

vue 移动端日期选择组件 vue-mobile-calendar

vue-mobile-calendar cnpm install vue-mobile-calendar -S import Vue from 'vue' import Calendar from ' ...

element-ui日期组件DatePicker设置日期选择范围Picker Options

element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...

十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件

一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...

随机推荐

memset函数详解

语言中memset函数详解(2011-11-16 21:11:02)转载▼标签: 杂谈 分类: 工具相关  功 能: 将s所指向的某一块内存中的每个字节的内容全部设置为ch指定的ASCII值, 块的大 ...

JUnit报错需导入两个jar包

org.hamcresthamcrest-core

CCF 最大的矩形

问题描述 试题编号: 3 试题名称: 最大的矩形 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个 ...

IIS删除http header信息如Server, X-Powered-By, 和X-AspNet-Version

响应头信息原始头信息 Cache-Control private Content-Length 78457 Content-Type text/html; charset=utf-8 Date Fri ...

codeforces300A Array

A. Array time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

DamonOehlman/detect-browser

https://github.com/DamonOehlman/detect-browser detect-browser This is a package that attempts to det ...

Windows10下安装Maven以及Eclipse安装Maven插件 + 创建Maven项目

在官网下载Maven      http://maven.apache.org/download.cgi 下载下来后加压缩,将apache-maven-3.5.4文件夹复制到想要存放它的位置,我放在了 ...

OAF 动态创建组件以及动态绑定属性

在开发中,我们遇到以下一个需求. 一个表格左侧有5列是固定存在的,右侧有N列是动态生成的,并且该N列中第一列可输入,第二列是不可编辑的,但是是数字,如果小于0,那么就要显示为红色,重点标识出来. 首先 ...

iOS - UIScrollView xib添加约束的坑

一.Storyboard中的UIScrollView使用自动布局 在使用storyboard和xib时,我们经常要用到ScrollView,还有自动布局AutoLayout,但是ScrollView和 ...

EF中連表查詢的應用方式

1.首先我們想讓列表頁顯示兩個表的共同數據 這裡有兩張表 public class mytype    {        public int mytypeID { get; set; }       ...