美文网首页
根据antd(^4.2.0)组件库DatePicker自定义时间

根据antd(^4.2.0)组件库DatePicker自定义时间

作者: 无缘霸哥 | 来源:发表于2022-02-11 10:07 被阅读0次

    index.jsx

    import React, { useState } from 'react';
    import { DatePicker } from 'antd';
    import moment from 'moment';
    const CustomRangePicker = (props) => {
      const { onChange, showToday, defaultValue = [], format = 'YYYY-MM-DD' } = props;
      const [startDate, setStartDate] = useState(defaultValue[0] || null);
      const [endDate, setEndDate] = useState(defaultValue[1] || null);
      const onChangeStart = (date, dateString) => {
        setStartDate(dateString);
        onChange([dateString, endDate]);
      };
      const onChangeEnd = (date, dateString) => {
        setEndDate(dateString);
        onChange([startDate, dateString]);
      };
      const disableStart = (current) => {
        return current && endDate && current > moment(endDate);
      };
      const disableEnd = (current) => {
        return current && startDate && current < moment(startDate);
      };
      return (
        <div className="custom-rangePicker">
          <DatePicker
            onChange={onChangeStart}
            placeholder={'开始时间'}
            disabledDate={disableStart}
            showToday={showToday}
            className={'start-time'}
            value={startDate ? moment(startDate, format) : null}
          />
          <span className="time-symbol">~</span>
          <DatePicker
            onChange={onChangeEnd}
            placeholder={'结束时间'}
            disabledDate={disableEnd}
            showToday={showToday}
            className={'end-time'}
            value={endDate ? moment(endDate, format) : null}
          />
        </div>
      );
    };
    export default CustomRangePicker;
    

    index.less

    .custom-rangePicker {
        display: flex;
        margin-left: 50px;
        .start-time {
            border-right: none;
            border-radius: 2px 0 0 2px;
        }
        .time-symbol {
            display: flex;
            width: 20px;
            height: 32px;
            line-height: 30px;
            border-top: 1px solid #d9d9d9;
            border-bottom: 1px solid #d9d9d9;
        }
        .end-time {
            border-left: none;
            border-radius: 0 2px 2px 0;
        }
        .ant-picker:hover, .ant-picker-focused {
            border-color: #d9d9d9;
            box-shadow: none;
            border-bottom-color: #40a9ff;
        }
    }
    

    其他组件引用

    const Sub1 = () => {
      const change = (value) => {
        console.log(value);
      };
      return (
        <CustomRangePicker
          onChange={change}
          showToday={false}
          defaultValue={['2021-11-01', '2022-01-11']}
        />
      );
    };
    

    主要是解决:antd本来的时间筛选组件RangePicker,在选择一个时间的时候,另外一个时间只会显示当前时间前后的时间,如果是跨年的话就会出现体验不好的感觉,为了解决这个问题,就自己简单写了一个时间范围筛选

    相关文章

      网友评论

          本文标题:根据antd(^4.2.0)组件库DatePicker自定义时间

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