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

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

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"))
  );
}

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容