美文网首页
Ant Design中日期选择控件的使用

Ant Design中日期选择控件的使用

作者: franose | 来源:发表于2020-11-23 21:52 被阅读0次

    基础的使用就不多说了,说几个使用中遇到的坑。

    moment对象为mutable

    antd中datepicker使用moment,moment对象是mutable,即引用更改是会改变原对象值的

        const now = moment()
        const tomorrow = now.add(1, 'days')
    

    这里,tomorrow的值由now加一天得到,同时now的值也会被改变,因此每次使用moment对象进行加减等操作时,需要新建一个moment对象,即

        const now = moment()
        const tomorrow = moment(now).add(1, 'days')
    

    使用disabledDate

    function disabledDate(current) {
      const now = moment();
      return (
        current &&
        (current < now.subtract(1, "day") || current > now.add(6, "months"))
      );
    }
    

    这里now.subtract(1, "day")是当前时间减少一天,这里的对比也包括了选择的具体小时分钟的对比,因此如果选择的时分在今天之前,那么这里的判断就是昨天也是可选,晚于今天时分的昨天就不可选
    因此disabledDate的函数从

    function disabledDate(current) {
      const now = moment();
      return (
        current &&
        (current < now.startOf('day) || current > now.add(6, "months"))
      );
    }
    

    如果改成

    function disabledDate(current) {
      const now = moment();
      return (
        current &&
        (current < now.subtract(0, "day") || current > now.add(6, "months"))
      );
    }
    

    也就是现在之前的时间都不能选择

    相关文章

      网友评论

          本文标题:Ant Design中日期选择控件的使用

          本文链接:https://www.haomeiwen.com/subject/muqbiktx.html