现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是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. HTTP 返回状态码说明

    HTTP 返回状态码一.1xx - 信息提示 这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个 1xx 响应. • 100 - 继续. • 101 - 切换协议. 二.2xx ...

  2. Git stash 常用命令

    参考: Git: How to look at the stash Git学习笔记05--git stash Git stash 常用命令 1.git stash: 保存当前的工作进度: 2.git ...

  3. 你所要掌握的最简单基础的React渲染优化

    一.React的渲染机制 要掌握一两项React-render优化的方法不难,但是非常重要.无论是在实际项目中的一个小细节,还是迎合'面试官'的口味 1.1 触发Render 我们知道React要更新 ...

  4. CentOS6.5下卸载自带的MySQL数据库安装MySQL5.6

    1)查看CentOS自带的mysql 输入 rpm -qa | grep mysql mysql-libs-5.1.71-1.el6.x86_64 2)将其自带的mysql版本全部卸载(非常重要,如不 ...

  5. 剖析Hadoop和Spark的Shuffle过程差异

    一.前言 对于基于MapReduce编程范式的分布式计算来说,本质上而言,就是在计算数据的交.并.差.聚合.排序等过程.而分布式计算分而治之的思想,让每个节点只计算部分数据,也就是只处理一个分片,那么 ...

  6. OSI 七层和五层

  7. 《剑指offer》第五十九题(滑动窗口的最大值)

    // 面试题59(一):滑动窗口的最大值 // 题目:给定一个数组和滑动窗口的大小,请找出所有滑动窗口里的最大值.例如, // 如果输入数组{2, 3, 4, 2, 6, 2, 5, 1}及滑动窗口的 ...

  8. 学习笔记33—graphPad画图集

    1.如何去掉如下图所示的基准线(baseline):   解决办法:鼠标左键双击基准线 --->出现下图对话框,勾选Hide baseline即可. 2.画柱状图时,如何将正常人和病人的信息画在 ...

  9. 四个session

  10. ubuntu 中文设置

    1,安装中文语言包 sudo apt-get install language-pack-zh-hans sudo update-locale LANG=zh_CN.UTF-8 添加中文支持: sud ...