React Semantic Date Picker 禁用選擇過去的日期

Question

我正在使用react-semantic-ui-datepickers將日期選擇到表單中，還使用 ​​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

我認為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道具也可以做到這一點。

Answer 2

您可以將“minDate”作為道具傳遞

Answer 3

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

minDate 屬性允許用戶選擇今天的日期。