react Antd 日期限制三天

262 阅读1分钟

先看效果图

aaaaa2.gif

封装日期格式工具;

  • 可在项目中引入(本人每个项目都会用到~,经得起生产的验证)
//封装获取日期插件
export const chinaDate=(times: any, fengefu = '-')=> {
  if (times === null || times === undefined) {
    times = new Date();
  }
  if (typeof times === 'string') {
    times = times.replace(/-/g, '/');
  }
  fengefu = fengefu || '/';
  const time = new Date(times);
  const nian = time.getFullYear();
  const yue = ('00' + (time.getMonth() + 1)).slice(-2);
  const ri = ('00' + time.getDate()).slice(-2);
  const get0 = new Date(nian + '/' + yue + '/' + ri + ' 00:00:00').getTime();
  const get59 = new Date(nian + '/' + yue + '/' + ri + ' 23:59:59').getTime();

  return {
    fengefu,
    newDate: time,
    nian,
    yue,
    ri,
    shi,
    fen,
    miao,
    date: nian + fengefu + yue + fengefu + ri + ' ' + shi + ':' + fen + ':' + miao,
    date0: nian + fengefu + yue + fengefu + ri + ' ' + '00:00:00',
    date59: nian + fengefu + yue + fengefu + ri + ' ' + '23:59:59',
    nyr: nian + fengefu + yue + fengefu + ri,
    sfm: shi + ':' + fen + ':' + miao,
    number: time.getTime(),
    get0,
    get59,
  };
}

具体实现

  const smallPolicyCreateDate = useRef<any>([]);
  const disabledDate = (currentDate: any) => {
    const [start, end] = smallPolicyCreateDate.current ?? [];
    if (start) {
      return (
        (currentDate && chinaDate(currentDate).get0 < chinaDate(start.$d).get0) ||
        (currentDate && chinaDate(currentDate).get0 >= chinaDate(start.$d).get0 + 3 * 86400000)
      );
    } else if (end) {
      return (
        (currentDate && chinaDate(currentDate).get0 > chinaDate(end.$d).get0) ||
        (currentDate && chinaDate(currentDate).get0 <= chinaDate(end.$d).get0 - 3 * 86400000)
      );
    }
    return null;
  };
    <Form
      form={form} layout="inline" name="formxxx">
        <Form.Item
            label="小保单创建时间" name="smallPolicyCreateDate">
            <RangePicker
              //ranges={ranges} 
              disabledDate={disabledDate}
              onCalendarChange={(e: any) => {
                smallPolicyCreateDate.current = e;
              }}
            />
          </Form.Item>
      </Form>