Home > Net >  How to disable past time in react js using react date picker
How to disable past time in react js using react date picker

Time:09-29

Please guide me how can i disable past time in react JS. Below I am sharing code?

import DatePicker from "react-datepicker";
import setHours from "date-fns/setHours";
import setMinutes from "date-fns/setMinutes";
import "react-datepicker/dist/react-datepicker.css";

<DatePicker selected={startDates} onChange={(date) => setStartDates(date)} showTimeSelect
excludeTimes={[
setHours(setMinutes(new Date(), 0), new Date().getHours())]} dateFormat="MMMM d, yyyy h:mm aa" />

CodePudding user response:

yeah as per the comment above you can use minDate

<DatePicker
  selected={startDate}
  onChange={(date) => setStartDate(date)}
  {... otherProps}
  minDate={new Date()} // This here is what we require
/>

CodePudding user response:

I think this is what you want

<DatePicker
  selected={startDates}
  onChange={(date) => setStartDates(date)}
  showTimeSelect
  minDate={new Date()} //set the current date to disable past date
  minTime={new Date().getTime()} //set current time to disable past time
  maxTime={setHours(setMinutes(new Date(), 59), 23)} //this set the max time (i.e. 23:59)
  dateFormat="MMMM d, yyyy h:mm aa"
/>
  • Related