javascript - React-datepicker minTime and maxTime not works - Stack Overflow

admin管理员组

文章数量:1288048

I have DatePicker on my form and;

i'm using this package: [][1]

on the selection start date: I want to make disable all times before the current time. So if now 3 AM. before hours (2 AM, 1 AM, 12 AM) will be disabled.

Usually, it's making like that: But here they write static time, I want to add there current hour of the current time.

<DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeSelect
      minTime={setHours(setMinutes(new Date(), 0), 17)}
      maxTime={setHours(setMinutes(new Date(), 30), 20)}
      dateFormat="MMMM d, yyyy h:mm aa"
    />

So i saw some examples about that and trying this:

const now = moment().toDate();

<DatePicker
                    selected={this.state.startDate}
                    onChange={event => this.getStartDate(event)}
                    showTimeSelect
                    timeFormat="haa"
                    timeIntervals={60}
                    minDate={now}
                    minTime={now.hours(now.hour()).minutes(now.minutes())}
                    maxTime={now.hours(23).minutes(45)}
                    dateFormat="MM/d/yyyy hhaa"
                    timeCaption="Hour"
                  />

but nothing happened. Where I make a mistake?

I have DatePicker on my form and;

i'm using this package: [https://reactdatepicker./#example-specific-time-range][1]

on the selection start date: I want to make disable all times before the current time. So if now 3 AM. before hours (2 AM, 1 AM, 12 AM) will be disabled.

Usually, it's making like that: But here they write static time, I want to add there current hour of the current time.

<DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeSelect
      minTime={setHours(setMinutes(new Date(), 0), 17)}
      maxTime={setHours(setMinutes(new Date(), 30), 20)}
      dateFormat="MMMM d, yyyy h:mm aa"
    />

So i saw some examples about that and trying this:

const now = moment().toDate();

<DatePicker
                    selected={this.state.startDate}
                    onChange={event => this.getStartDate(event)}
                    showTimeSelect
                    timeFormat="haa"
                    timeIntervals={60}
                    minDate={now}
                    minTime={now.hours(now.hour()).minutes(now.minutes())}
                    maxTime={now.hours(23).minutes(45)}
                    dateFormat="MM/d/yyyy hhaa"
                    timeCaption="Hour"
                  />

but nothing happened. Where I make a mistake?

• javascript
• reactjs
• momentjs
• react-datepicker

Share Improve this question Follow edited Jan 20, 2020 at 15:42 Squti 4,49733 gold badges1212 silver badges2525 bronze badges asked Jan 20, 2020 at 15:38 user3348410user3348410 2,8331111 gold badges5656 silver badges9191 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Filtering passed times works for me using the filterTime prop. Here's a link to the snippet from the docs:

https://reactdatepicker./#example-filter-times

Essentially, this is what you need to do:

() => {
  const [startDate, setStartDate] = useState(null);
  
  const filterPassedTime = (time) => {
    const currentDate = new Date();
    const selectedDate = new Date(time);

    return currentDate.getTime() < selectedDate.getTime();
  };

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showTimeSelect
      filterTime={filterPassedTime}
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};

You also won't need to use any external libraries e.g. date-fns

You can use the libraries built in time functions to set the time correctly. Since the min hours is the current hour that you want then you only need to use setMinutes to set the minutes back to 0. The resulting code should look something like this:

<DatePicker
  selected={now}
  onChange={event => this.getStartDate(event)}
  showTimeSelect
  timeFormat="haa"
  timeIntervals={60}
  minDate={now}
  minTime={setMinutes(now, 0)}
  maxTime={setHours(setMinutes(now, 45), 23)}
  maxDate={now}
  dateFormat="MM/d/yyyy hhaa"
  timeCaption="Hour"
/>

Checkout a demo here: https://stackblitz./edit/react-time-picker-demo

本文标签： javascriptReactdatepicker minTime and maxTime not worksStack Overflow