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

使用了antd-mobile的DatePicker组件,具体用法可参考:https://mobile.ant.design/components/date-picker-cn/

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

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

参考了https://www.zhihu.com/question/56076235,使用到了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. react-native DatePicker日期选择组件的实现

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

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

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

  3. 日期选择组件(DatePicker)的实现

    一.效果图 日期选择组件大概长这样: 从效果图可以看出,日期选择组件由两部分组成:日历表格和顶部操作栏. 二.日历表格 日期选择组件的核心主体是日历表格: 可以将日历表格表示成一个7️*的二维数组,数 ...

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

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

  5. sencha:日期选择组件datepicker

    来源于<sencha touch权威指南> ------------------------------- 除app.js外,其它内容都与上一篇博客里的内容相同.app.js代码如下: E ...

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

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

  7. My97 DatePicker 日期选择插件.

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

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

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

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

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

随机推荐

  1. (转)Is attacking machine learning easier than defending it?

    转自:http://www.cleverhans.io/security/privacy/ml/2017/02/15/why-attacking-machine-learning-is-easier- ...

  2. HDU 6191 Query on A Tree(可持久化Trie)

    题意 \(n\) 个点的有根树,根为 \(1\) .每个点有点权,有 \(q\) 个询问,每次询问以 \(u\) 为根的子树的点的点权中异或 \(x\) 所得的最大值是多少. 思路 求出整棵树的 \( ...

  3. redis事务之watch

    三.redis事务之watch 首先要了解redis事务中watch的作用,watch命令可以监控一个或多个键,一旦其中有一个键被修改(或删除),之后的事务就不会执行.监控一直持续到exec命令(事务 ...

  4. 【ASP.NET】System.Web.Routing - Route Class

    Provides properties and methods for defining a route and for obtaining information about the route. ...

  5. 【ASP.Net】 http请求中get,put,post,delete的区别与使用总结

    在web api的设计上, 需要设计这个每个action对应的资源的请求方法是什么. Get方法是对服务器资源的请求获取, 一般get方法的参数都放在URL当中的. 所以通常情况下这种请求方式都是不安 ...

  6. 关于jQ的Ajax操作

    jQ的Ajax操作 什么是AJAX AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 它不是一门编程语言,而是利用JavaScript ...

  7. PHP 冒泡排序(Bubble Sort)

    冒泡排序指的是依次比较相邻的两个数,然后根据大小做出排序,直至最后两位数.因为在排序的 过程中总是小数放前面,大数放后面,和气泡上升有点类似,所以又称作冒泡排序. 下面通过一个实例看一下如何实现冒泡排 ...

  8. Android RealativeLayout 布局gravity不能居中的解决办法

    对于LinerLayout中的gravity发现复制到realativeLayout布局中发现不起作用,后来发现只要在他的每个子组件中使用  android:layout_centerVertical ...

  9. [从零开始搭网站三]CentOS配置JDK

    点击下面连接查看从零开始搭网站全系列 从零开始搭网站 上一章我介绍了,如何不用每次都输密码连接服务器.那么这一章终于要开始服务器的开发环境配置了. 1:先输入以下代码来检验有没有已经安装的CDK: r ...

  10. ZZNU 正约数之和 2094

    #include<iostream> #include<cstring> #include<queue> #include<cstdio> #inclu ...