现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是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. UI、JS框架----Bootstrap、Metro

    Bootstrap Datagrid EasyUI Metro bootstrap Datepicker Editable for Bootstrap:bootstrap-editable.js X- ...

  2. 解决Maven管理项目update Maven时,jre自动变为1.5

    本文为博主原创,未经允许不得转载: 在搭建一个maven web项目时,项目已经按步骤搭建完好,之后项目上就报了一个错误. 在控制台看到错误提示如下:Dynamic Web Module 3.0 re ...

  3. Linux中.rar文件解压

    1. 下载: https://www.rarlab.com/download.htm 我下载的是RAR 5.61 for Linux x64 2. 安装: 解压:tar -zxvf rarlinux- ...

  4. 【Python】【电子邮箱】

    #[[电子邮件]]'''Email的历史比Web还要久远,直到现在,Email也是互联网上应用非常广泛的服务. 几乎所有的编程语言都支持发送和接收电子邮件,但是,先等等,在我们开始编写代码之前,有必要 ...

  5. Codeforces 510 E. Fox And Dinner

    题目链接:http://codeforces.com/problemset/problem/510/E 乍一看和那啥魔术球问题有点神似啊/XD 其实是不一样的. 解决这道问题的关键在于发现若是相邻的两 ...

  6. 配置多个版本的jdk

    引言: 由于公司有多个项目都需要我开发,而各个项目所依赖的jdk版本又不同,因此需要配置多个jdk; 配置方法: 什么也不说了,直接上图: 然后在其他需要制定Tomcat的地方直接引用JAVA_HOM ...

  7. 1. dubbo概述

    dubbo简介: 官网:http://dubbo.io 最大程度进行解耦,降低系统耦合性,可以跨工程,跨项目; 生产者/消费者模式; jdk:1.6以上 maven:3.0以上 国际maven仓库:h ...

  8. [c][c++]按位操作

    因为有时候需要大量的标志位来判断当前状态等.使用太多的int,bool等会使得程序不“漂亮” 这时候需要“位”操作来解决 建立一个标志位 unsigned ; 在定义一些宏,如 #define CON ...

  9. 力扣(LeetCode)412. Fizz Buzz

    写一个程序,输出从 1 到 n 数字的字符串表示. 如果 n 是3的倍数,输出"Fizz": 如果 n 是5的倍数,输出"Buzz": 3.如果 n 同时是3和 ...

  10. leecode第十五题(三数之和)

    class Solution { public: void quick_order(vector<int>& num, int star, int en)//快排 { int st ...