React.js：如何在 React 中显示生日字段直到日期？答案

【问题标题】：React.js: How can I show the birthdate field till date in React?React.js：如何在 React 中显示生日字段直到日期？
【发布时间】：2020-12-17 07:28:10
【问题描述】：

当用户选择出生日期时，他/她应该能够选择它直到日期，而不是超过那个日期。我怎样才能在 React 中实现这一点。这样当用户尝试选择一个日期时，他/她可以选择直到今天的日期，而不是超过那个日期。有人可以帮我解决这个问题吗？提前致谢。

代码如下：

import React from 'react'
import {
Form,
Label,
Input,
Button,
Col
} from 'reactstrap'
import useForm from '../useForm'
import validate from '../validateInfo'
import '../error1.css'

const AddUser = () => {
const {handleChange,values,handleSubmit,errors}=useForm(validate)
return (
 <Form onSubmit={handleSubmit} >
  <FormGroup>
    <Label>Name</Label>
    <Input type='text' placeholder='Enter Name'
      value={values.fullname}
      onChange={handleChange}
      name='fullname' 
    />
    {errors.fullname && <p className='error'>{errors.fullname}</p>}
    
   </FormGroup>
   <FormGroup>
    <Label>BirthDate</Label>
    <Input type='date'
      placeholder='Enter BirthDate'
      value={values.birthdate} onChange={handleChange}
      name='birthdate'
    />
    {errors.birthdate && <p className='error'>{errors.birthdate}</p>}
   </FormGroup>
   <FormGroup>
    <Label>Address</Label>
    <Input type='textarea'
      placeholder='Enter Address'
      value={values.address} onChange={handleChange}
    
      name='address' />
      {errors.address && <p className='error'>{errors.address}</p>}
   </FormGroup>
   <FormGroup row>
    <Label for="exampleSelect" sm={2}>Select College Name</Label>
    <Col sm={10}>
      <Input type="select" name="select" id="exampleSelect" onChange={handleChange}>
        <option value='' disabled hidden>College List</option>
        {values.college &&
          values.college.map((col, index) => {
            return <option value={col.name} key={col.name}>{col.name}</option>
          })
        }
      </Input>
    </Col>
    {errors.college && <p className='error'>{errors.college}</p>}
  </FormGroup>
  <FormGroup tag="fieldset">
    <Label>Please Select Gender</Label>
    <FormGroup>
      <Label>
        <Input type='radio' name='gender'
          onChange={handleChange}
          
          value='Male'
          checked={values.gender === "Male"}
        />
        Male
      </Label>
    </FormGroup>
    <FormGroup>
      <Label >
        <Input type='radio' name='gender'
          onChange={handleChange}
          
          value='Female'
          checked={values.gender === "Female"} />
        Female
      </Label>
    </FormGroup>
    <FormGroup>
      <Label>
        <Input type='radio' name='gender'
          onChange={handleChange}
        
          value='Other'
          checked={values.gender === 'Other'} />
      Other
      </Label>
    </FormGroup>
    {errors.gender && <p className='error'>{errors.gender}</p>}
  </FormGroup>
  
  
  <Button type='submit'>Submit</Button>
  </Form>
  )
 }

 export default AddUser

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以使用日期输入的属性max。例如 max="2020-12-17" 将阻止选择该日期之后的日期。

Here 解释了如何使用 JavaScript 获取当前日期。对您的代码进行以下更改：

const current = new Date().toISOString().split("T")[0]

...

    <Input type='date'
      placeholder='Enter BirthDate'
      value={values.birthdate} onChange={handleChange}
      name='birthdate'
      max={current}
    />

【讨论】：

【解决方案2】：

我建议您使用 react-date-picker 或任何其他为用户显示日期的软件包。这样你就可以调整它显示从今天开始的日期。

【讨论】：