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属性使用户可以从今天开始选择日期。

反应语义日期选择器禁用选择过去的日期

3 个答案: