antd组件禁用时分秒和年月日

eternallycyf

已于 2022-11-13 21:10:55 修改

阅读量1.9k

点赞数

分类专栏：问题文章标签： javascript react.js typescript

于 2022-03-18 09:51:25 首次发布

本文链接：https://blog.csdn.net/weixin_44457030/article/details/123567000

版权

我的社交平台有问题可以在这里留言呀
github
博客

1.关于该仓库

工作中经常碰到业务需求是
两个时间组件要求第二个的时间不能超过前一个的时间
如果是只限制日期就很简单官网直接复制就行
但当掺杂了时分秒后就不是很清晰了
因此在这里把常用关于时间禁用的方法封装成了一个类
以方便查找调用
然后总结了一些Bug的解决

2.后续有空就会封装的方法

7天范围
禁用指定年月日
禁用指定时分秒
组合禁用 7天范围禁用指定年月日禁用指定时分秒
还有别的常用的需求可以 @ 下

3.两个DatePicker交互

import moment from 'moment'
import {
    Form, DatePicker } from 'antd'
import ToolClass from '../toolClass'
const Picker1 = () => {
   
  const [form] = Form.useForm();
  const transformFn = new ToolClass()
  const disabledTime = (CurrentFormMoment: moment.MomentInput) => {
   
    const StartTime = form.getFieldValue('startTime')
    return transformFn.disabledTime(StartTime, CurrentFormMoment)
  }
  const disabledDate = (CurrentFormMoment: moment.MomentInput) => {
   
    const StartTime = form.getFieldValue('startTime')
    return transformFn.disabledDate(StartTime, CurrentFormMoment)
  }
  return (
    <>
      <h2>Picker1</h2>
      <Form form={
   form}>
        <Form.Item name='startTime'>
          <DatePicker
            style={
   {
    minWidth: '100%' }}
            showToday={
   false}
            showTime
            showNow={
   false}
            onChange={
   () => form.setFieldsValue({
    endTime: null })}
          />
        </Form.Item>
        <Form.Item name='endTime'>
          <DatePicker
            style={
   {
    minWidth: '100%' }}
            showToday={
   false}
            showTime={
   {
   
              hideDisabledOptions: true
            }}
            showNow={
   false}
            disabledDate={
   disabledDate}
            disabledTime={
   disabledTime}
          />
        </Form.Item>
      </Form>
    </>
  )