React 语义日期选择器禁用 select 过去的日期

Question

我正在使用 react-semantic-ui-datepickers 将日期 select 写入表格，还使用 Formik 和 Yup 进行验证。

有没有办法禁用过去的日期，以便用户只能选择从今天开始的日期？

这是代码：

import React from 'react';
import { connect } from 'react-redux';
import * as Yup from 'yup';
import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon';
import { Formik, Form, Field } from 'formik';
import { Button, Modal, Input, Label } from 'semantic-ui-react';
import SemanticDatepicker from 'react-semantic-ui-datepickers';
import { Creators } from '../../../actions';
import './CodeForm.scss';

export default class CodeForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      open: false,
    };
  }

  onOpen = () => {
    this.setState({ open: true });
  };

  closeModal = () => {
    this.setState({ open: false });
  };

  handleSubmit = values => {
    const { companyId, groupId } = this.props;
    if (companyId) {
      // create corporate code
      const { createCorporateCode, getCorporateCodes, getCompany } = this.props;
      createCorporateCode(values, companyId);
      this.setState({ open: false });
      getCompany(companyId);
      getCorporateCodes();
    } else if (groupId) {
      // add coupon
      const { createCorporateCode, getCorporateCodes, getGroup } = this.props;
      createCorporateCode(values, groupId);
      this.setState({ open: false });
      getGroup(groupId);
      getCorporateCodes();
    } else {
      // create promo code
      const { createCode, getCodes } = this.props;
      createCode(values);
      this.setState({ open: false });
      getCodes();
    }
  };

  render() {
    const { trigger, companyId, groupId } = this.props;
    let title = 'CREATE PROMO CODE';
    if (companyId || groupId) {
      title = 'ADD COUPON';
    }

    const { open } = this.state;
    const initialValues = {
      name: '',
      expirationDate: '',
    };
    const requiredErrorMessage = 'This field is required';
    const dateErrorMessage = 'Please select a valid date';
    const validationSchema = Yup.object({
      name: Yup.string().required(requiredErrorMessage),
      expirationDate: Yup.date()
        .typeError(dateErrorMessage)
        .required(requiredErrorMessage),
    });
    return (
      <Modal
        open={open}
        trigger={trigger}
        onOpen={this.onOpen}
        onClose={this.closeModal}
        closeIcon={
          <Icon
            className="modal-close-icon"
            circular
            name="close"
            size="tiny"
          />
        }
        size="small">
        <Modal.Header>{title}</Modal.Header>
        <Modal.Content>
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values => this.handleSubmit(values)}>
            {({ values, errors, touched, setFieldValue }) => (
              <Form>
                <Label>Name</Label>
                <Field name="name" as={Input} placeholder="Add code name" />
                <div>{touched.name && errors.name ? errors.name : null}</div>
                <Label>Expiration date</Label>
                <SemanticDatepicker
                  name="expirationDate"
                  placeholder="Set expiration date"
                  onChange={(e, { name, value }) => setFieldValue(name, value)}
                />
                <div>
                  {touched.expirationDate && errors.expirationDate
                    ? errors.expirationDate
                    : null}
                </div>
                <Button type="submit">Create code</Button>
              </Form>
            )}
          </Formik>
        </Modal.Content>
      </Modal>
    );
  }
}

我已阅读文档，但未找到任何相关信息。可以针对过去的日期禁用它吗？

Answer 1

你可以通过 'minDate' 作为道具

Answer 2

<SemanticDatepicker
     name="expirationDate"
     placeholder="Set expiration date"
     onChange={(e, { name, value }) => setFieldValue(name, value)}
     minDate={new Date()}
/>

minDate 属性允许用户 select 从今天开始的日期。

Answer 3

我认为 filterDate 道具可以解决问题 (docs)。

<SemanticDatepicker
  filterDate={(date) => {
    const now = new Date();
    return date >= now;
  }}
  name="expirationDate"
  placeholder="Set expiration date"
  onChange={(e, { name, value }) => setFieldValue(name, value)}
/>

我不确定 dateA > dateB 计算的确切方式。您可能需要更细化并只比较月、日、年。

@Hrishi 建议的 minDate 道具也可以做到这一点。

React 语义日期选择器禁用 select 过去的日期

React Semantic Date Picker disable select past dates

javascript

reactjs

semantic-ui

yup

formik