react-datepicker icon indicating copy to clipboard operation
react-datepicker copied to clipboard

How to preset the time of day to a specific hour on a range?

Open alimovz opened this issue 2 years ago • 2 comments

I am using react-datepicker as a date range picker and everything works great except for the fact that there doesn't seem to be a way to preselect the endDate's time to, in my case, 23:59:59. Instead it defaults to 00:00:00 and I need to manually scroll through the time panel to pick the last hour. Here is the setup I have:

                        <DatePicker
                            placeholderText="Start Date"
                            selected={start_date}
                            onChange={date => setStartDate(date)}
                            selectsStart
                            startDate={start_date}
                            endDate={end_date}
                            showTimeSelect
                            className="form-control form-control-xsm"
                            dateFormat="MM/dd/yyyy HH:mm:ss"
                            timeIntervals={60}
                        />
                        <div className={"pl-2 pr-2"}> TO </div>
                        <DatePicker
                            placeholderText="End Date"
                            selected={end_date}
                            onChange={date => setEndDate(date)}
                            selectsEnd
                            startDate={start_date}
                            endDate={end_date}
                            minDate={start_date}
                            showTimeSelect
                            className="form-control form-control-xsm"
                            dateFormat="MM/dd/yyyy HH:59:59"
                            timeIntervals={60}
                        />

When the page loads, both inputs are empty. What do I need to do for the latter DatePicker to make sure the time is automatically at 11pm when a day is picked?

alimovz avatar Apr 12 '22 21:04 alimovz