React.js: How can I show the birthdate field till date in React?

Viewed 2731

When the user selects the birthdate he/she should be able to select it till date and not beyond that. How can I achieve this in React. So that when a user tries to select a date he/she can select the date till today and not beyond that. Can someone please help me out to solve this issue? Thanks in advance.

Here's the code :

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
2 Answers

You can use attribute max of date input. For example max="2020-12-17" would prevent selecting date after that date.

Here is explained how to get current date with JavaScript. Make these changes to your code:

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

...

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

i would suggest you to use react-date-picker or any other package that presenting the date for the user. in that way you can adjust it show the date from today.

Related