zoukankan      html  css  js  c++  java
  • antd react 时间选择框显示,回显,格式等问题

    这些日子在做关于antd+react的项目,遇到了时间选择框,在添加表单的时候看了官网的组件,说的很详细一看就懂。

    import { TimePicker } from 'antd';
    
    ReactDOM.render(<TimePicker.RangePicker />, mountNode);
    

    引入和使用相当简单。但是问题来了,这样使用的时候并不符合项目的需求,项目需求只是到分钟,不需要秒级别的。所以查看了文档,format属性,来格式化数据。只想要时分的话,format={'HH:mm'},这样显示的就是时分格式了。下面是我项目中的具体用法:

    <TimePicker.RangePicker onChange={(e)=>{changeRangePicker(e)}} format={'HH:mm'}/>
    

    这是引入和格式化时间格式,下面我们来说说取值和回显的问题。因为当时我项目中需要的是字符串,而他返回的是这样的

    所以我这边需要处理下数据,以下方法获取字符串时间:

    let start = e[0].format('HH:mm')
    let end = e[1].format('HH:mm')
    

    现在数据也获取到了,下一步是我编辑时遇到的回显问题,因为我存的时候就是字符串,所以我在想怎么才能让他回显呢,其实也挺简单,就是我用的不熟导致的问题。看来还是得多学习啊!下面是回显具体步骤:

    1. 引入moment

    import moment from 'moment';
    

    2.获取值直接调用moment方法:

    moment(data,'HH:mm')
    

    这样就OK了,有时间多看书吧,这么简单的问题查了好多资料!

  • 相关阅读:
    Git命令branch-分支
    Git基础命令(二)
    Git基础命令(一)
    【转载】Android状态栏微技巧,带你真正理解沉浸式模式
    Android性能分析工具
    【转载】Android卡顿检测方案
    WebView loadData中文乱码
    【Cocos2dx】新建场景、场景的切换、设置启动场景与菜单的新建
    Cocos2d-JS切换场景与切换特效
    COCOS2DX场景切换特效
  • 原文地址:https://www.cnblogs.com/miximixi/p/14599230.html
Copyright © 2011-2022 走看看