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了,有时间多看书吧,这么简单的问题查了好多资料!

  • 相关阅读:
    【负载均衡】1.负载均衡介绍
    1.tcpdump、wireshark常用用法
    10.prometheus PromQL
    9.prometheus pushgateway介绍与部署
    服装行业生产按客户订制的解决方案
    课程总结
    第十四周课程总结&实验报告
    第十三周学习总结
    第十二周总结
    时间过得好快,第十一周就要截止了。不该遗憾的,要开心,要努力。
  • 原文地址:https://www.cnblogs.com/miximixi/p/14599230.html
Copyright © 2011-2022 走看看