Exclude out of bounds times #1718

PaulRBerg · 2019-04-22T10:09:39Z

Description

Implements #1135. Use it by setting the excludeOutOfBoundsTimes prop on the DatePicker component. Example:

<DatePicker
  selected={this.state.startDate}
  excludeOutOfBoundsTimes
  onChange={this.handleChange}
  minDate={new Date()}
  placeholderText="Click to select a date"
  showTimeSelect
/>

How it works:

If you set a minDate or a maxDate, all times before that date's time will be deselected (if the active date matches the minDate or maxDate)
If you switch dates and select an available time, but then come back to the minDate or maxDate, that time will not be highlighted. I accomplished this by going to the renderTimes function of the Time component and change the base to be activeTime instead of new Date() - I hope there won't be any unexpected side effects.

Caveat: I didn't have time to add tests, but I added examples in the documentation site.

Result

Min Date

Max Date

codecov · 2019-04-22T10:13:29Z

Codecov Report

Merging #1718 into master will decrease coverage by 0.44%.
The diff coverage is 30%.

@@            Coverage Diff             @@
##           master    #1718      +/-   ##
==========================================
- Coverage   90.29%   89.84%   -0.45%     
==========================================
  Files          17       17              
  Lines        1205     1211       +6     
  Branches      208      208              
==========================================
  Hits         1088     1088              
- Misses         10       16       +6     
  Partials      107      107

Impacted Files	Coverage Δ
src/calendar.jsx	`90% <ø> (+0.19%)`	⬆️
src/index.jsx	`90.58% <ø> (-0.54%)`	⬇️
src/date_utils.js	`97.18% <16.66%> (-1.99%)`	⬇️
src/time.jsx	`84.21% <50%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f22cb5c...239e47d. Read the comment docs.

Akash187 · 2019-05-04T00:49:22Z

I guess "excludeOutOfBoundsTimes" is not implemented now in the official package. That's why it's not working for me.

pcaplan-teladoc · 2019-05-17T20:54:02Z

Great, I need this, when can it be merged and released?

alfonmga · 2019-05-31T10:43:25Z

We need to get this merged, it makes so much sense to have it.

CruseCtrl · 2019-06-06T14:22:50Z

src/date_utils.js

@@ -379,6 +379,16 @@ export function isTimeInDisabledRange(time, { minTime, maxTime }) {
  return valid;
 }

+export function isTimeInExcludedRange(time, { minDate, maxDate }) {


This function could be simplified to

return (isDate(minDate) && getDate(minDate) === getDate(time) && getTime(minDate) > getTime(time)) || (isDate(maxDate) && getDate(maxDate) === getDate(time) && getTime(maxDate) < getTime(time))

rdrnt · 2019-10-09T16:48:33Z

Any updates on this?

stale · 2020-01-07T17:04:18Z

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

danielcardoso5 · 2020-01-22T15:50:58Z

It would be really useful to have this merged. I can't block times selection for the current day without blocking them for every other day.

jotak · 2020-01-30T11:40:00Z

Hi @martijnrusschen , @CruseCtrl ,

Is there some reason to block this PR beside the only comment made by @CruseCtrl about a small simplification?
If that can help, I'm happy to take over this PR if there's more that needs to be worked on.

Thanks

CruseCtrl · 2020-02-03T12:00:19Z

I don't have any problem with it being merged

thatguyjono94 · 2020-02-18T05:57:29Z

Please merge

kylepeeler · 2020-02-18T21:42:56Z

PLEASE merge it...

khiner · 2020-04-12T19:09:42Z

Also looking for this feature to enforce min/max datetime. Anything holding this up? @PaulRBerg

PaulRBerg · 2020-04-13T00:08:01Z

Hi @khiner, I am neither the author nor a maintainer of this library. I implemented the PR because I needed it for my own purposes at the time. @Hacker0x01 is the one to talk to.

abhisaha1 · 2020-04-20T13:26:44Z

I made it work this way:

const [startDate, setStartDate] = useState(new Date());

const isSelectedDateToday = new Date().getDate() === startDate.getDate();

let minTimeHour = new Date().getHours();
if (!isSelectedDateToday) minTimeHour = 0;

return (
  <DatePicker
      showTimeSelect
      selected={startDate}
      onChange={date => setStartDate(date)}
      minDate={new Date()}
      minTime={new Date(new Date().setHours(currentHour, 0, 0, 0))}
      maxTime={new Date(new Date().setHours(23, 59, 0, 0))}
      placeholderText="Select date and time"
   />
);

ericvanular · 2020-06-06T02:05:02Z

Please merge this...

Thanks @ajaxtown for the makeshift solution. Assuming you mean minTimeHour instead of currentHour in the minTime parameter. It will also set the min time as the hour you're currently in, so its still possible to set a time in the past.

ghost · 2020-09-30T15:23:54Z

I made it work this way:

const [startDate, setStartDate] = useState(new Date());

const isSelectedDateToday = new Date().getDate() === startDate.getDate();

let minTimeHour = new Date().getHours();
if (!isSelectedDateToday) minTimeHour = 0;

return (
  <DatePicker
      showTimeSelect
      selected={startDate}
      onChange={date => setStartDate(date)}
      minDate={new Date()}
      minTime={new Date(new Date().setHours(currentHour, 0, 0, 0))}
      maxTime={new Date(new Date().setHours(23, 59, 0, 0))}
      placeholderText="Select date and time"
   />
);

This is extremely helpful, thank you. As mentioned in the comment below, the problem is that if you are within the same hour for example it still shows the time when it shouldn't. So, if it is 17:23 it is still allowing me to select 17:00 which it shouldn't. Any suggestions on how to fix that?

ghost · 2020-09-30T15:24:58Z

Please merge this...

Thanks @ajaxtown for the makeshift solution. Assuming you mean minTimeHour instead of currentHour in the minTime parameter. It will also set the min time as the hour you're currently in, so its still possible to set a time in the past.

I have asked ajaxTown if they have a solution for the being able to set a time in the past but also asking you in case you had a solution?

abhisaha1 · 2020-10-01T11:00:46Z

So, if it is 17:23 it is still allowing me to select 17:00 which it shouldn't. Any suggestions on how to fix that?

@ericvanular @Jonofat you can manage the time this way:

const [startDate, setStartDate] = useState(new Date());

const isSelectedDateToday = new Date().getDate() === startDate.getDate();
const isSelectedDateInFuture = +startDate > +new Date();

let minTimeHour = new Date().getHours();
if (!isSelectedDateToday) minTimeHour = 0;

const date = new Date();
let currentMins = date.getMinutes();
let currentHour = date.getHours();
if (isSelectedDateInFuture) {
  currentHour = 0;
  currentMins = 0;
}
return (
  <DatePicker
    showTimeSelect
    selected={startDate}
    onChange={date => setStartDate(date)}
    minDate={new Date()}
    minTime={new Date(new Date().setHours(currentHour, currentMins, 0, 0))}
    maxTime={new Date(new Date().setHours(23, 59, 0, 0))}
    placeholderText="Select date and time"
  />
);

Edit: @Jonofat pointed out that this would not work for the future date. Because the time is still being treat as if its today. I have changed the solution to tackle that.

ghost · 2020-10-01T13:52:31Z

@ajaxtown, thank you! This looks pretty good and is working for the current date. However if I choose tomorrow or any day in the future it still limits the time to what it is now eg: If it is 3:30pm it shows from 4pm. So I can't pick anything before 3:00pm for tomorrow which I should be able to.

I have had to change my code unfortunately before you posted your answer:

const DatePickerField = ({ ...props }) => {
  const { setFieldValue } = useFormikContext();
  const [field, meta] = useField(props);
  const [startDate, setStartDate] = useState(new Date());

  const isSelectedDateToday = new Date().getDate() === startDate.getDate();
  const isSelectedDateInFuture = +startDate > +new Date();

  let minTimeHour = new Date().getHours();
  if (!isSelectedDateToday) minTimeHour = 8;

  const date = new Date();
  let currentMins = date.getMinutes();
  let currentHour = date.getHours();
  if (isSelectedDateInFuture) {
    currentHour = 0;
    currentMins = 0;
  }

  return (
    <span className="input-field">
      <DatePicker
        {...field}
        {...props}
        selected={(field.value && new Date(field.value)) || null}
        onChange={(val) => {
          setFieldValue(field.name, val);
        }}
        value={(field.value && new Date(field.value)) || null}
        minTime={new Date(new Date().setHours(currentHour, currentMins, 0, 0))}
        maxTime={new Date(new Date().setHours(17, 0, 0))}
        maxDate={addDays(new Date(), 3)}
        excludeTimes={excluded.map((exclude) => {
          if (field.value && field.value.getDay() === exclude.day) {
            return new Date(new Date().setHours(exclude.time, 0, 0));
          }
          return null;
        })}
        className="date-input"
      />
      <span className="input-error">
        {meta.error && meta.touched && meta.error}
      </span>
    </span>
  );
};

export default DatePickerField;

abhisaha1 · 2020-10-01T14:00:45Z

@Jonofat ah yes, I missed that one out. Thanks for testing and letting me know. I have edited my answer to tackle that scenario as well.

ghost · 2020-10-01T14:16:55Z

@ajaxtown, thanks once again! I have edited my code above with your changes but it seems to still be doing the same thing ie: issue not resolved. I am trying to troubleshoot...

EDIT: Okay, found my problem. Now seems to work really nicely :) Thanks so much!

ghost · 2020-10-01T15:38:20Z

@ajaxtown Ah, I spoke too soon! One last issue I think. If I have my max time is 5pm (ie: I should not be able to choose a time past 5pm on any given day ) and it is now 5:37 pm, it should show no times for today but it is showing everything from 00:00 to 23:00. It was working 100% when it was before 5pm today.

abhisaha1 · 2020-10-03T22:52:21Z

@Jonofat can this be a timezone issue ?

ghost · 2020-10-04T12:06:09Z

@ajaxtown, I don't think it is a time zone issue ( I am working on my localhost). I have only allowed times between 8am and 5pm on Monday - Friday and 8am - 1pm on Saturday. But it is showing times for a whole 24 hours and ignoring my allowed times so I think it might be something else?

const excluded = [
  {
    time: "14",
    day: 6,
  },
  {
    time: "15",
    day: 6,
  },
  {
    time: "16",
    day: 6,
  },
  {
    time: "17",
    day: 6,
  },
];

  const isSelectedDateToday = new Date().getDate() === startDate.getDate();
  const isSelectedDateInFuture = +field.value > +new Date();

  const date = new Date();
  let currentMins = date.getMinutes();
  let currentHour = date.getHours();
  if (isSelectedDateInFuture) {
    currentHour = 8;
    currentMins = 0;
  }

//Only showing minTime/maxTime & excludedTimes for date picker below
minTime={new Date(new Date().setHours(currentHour, currentMins, 0, 0))}
maxTime={new Date(new Date().setHours(17, 0, 0))}

        excludeTimes={excluded.map((exclude) => {
          if (field.value && field.value.getDay() === exclude.day) {
            return new Date(new Date().setHours(exclude.time, 0, 0));
          }
          return null;
        })}

PaulRBerg force-pushed the feat-exclude-times branch 3 times, most recently from ebbe988 to ab62cf3 Compare April 22, 2019 10:43

Add excludeOutOfBoundsTimes prop to Time component

239e47d

PaulRBerg mentioned this pull request Apr 22, 2019

How to exclude time from the past (minTime), only if selected date is current date (minDate) ? #1135

Closed

PaulRBerg force-pushed the feat-exclude-times branch from ab62cf3 to 239e47d Compare April 22, 2019 11:19

CruseCtrl reviewed Jun 6, 2019

View reviewed changes

stale bot added the wontfix label Jan 7, 2020

stale bot closed this Jan 21, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Exclude out of bounds times #1718

Exclude out of bounds times #1718

PaulRBerg commented Apr 22, 2019 •

edited

codecov bot commented Apr 22, 2019 •

edited

Akash187 commented May 4, 2019

pcaplan-teladoc commented May 17, 2019

alfonmga commented May 31, 2019

CruseCtrl Jun 6, 2019 •

edited

rdrnt commented Oct 9, 2019

stale bot commented Jan 7, 2020

danielcardoso5 commented Jan 22, 2020

jotak commented Jan 30, 2020

CruseCtrl commented Feb 3, 2020

thatguyjono94 commented Feb 18, 2020

kylepeeler commented Feb 18, 2020

khiner commented Apr 12, 2020 •

edited

PaulRBerg commented Apr 13, 2020

abhisaha1 commented Apr 20, 2020 •

edited

ericvanular commented Jun 6, 2020

ghost commented Sep 30, 2020

ghost commented Sep 30, 2020

abhisaha1 commented Oct 1, 2020 •

edited

ghost commented Oct 1, 2020 •

edited by ghost

abhisaha1 commented Oct 1, 2020

ghost commented Oct 1, 2020 •

edited by ghost

ghost commented Oct 1, 2020

abhisaha1 commented Oct 3, 2020

ghost commented Oct 4, 2020 •

edited by ghost

Exclude out of bounds times #1718

Exclude out of bounds times #1718

Conversation

PaulRBerg commented Apr 22, 2019 • edited

Description

Result

Min Date

Max Date

codecov bot commented Apr 22, 2019 • edited

Codecov Report

Akash187 commented May 4, 2019

pcaplan-teladoc commented May 17, 2019

alfonmga commented May 31, 2019

CruseCtrl Jun 6, 2019 • edited

Choose a reason for hiding this comment

rdrnt commented Oct 9, 2019

stale bot commented Jan 7, 2020

danielcardoso5 commented Jan 22, 2020

jotak commented Jan 30, 2020

CruseCtrl commented Feb 3, 2020

thatguyjono94 commented Feb 18, 2020

kylepeeler commented Feb 18, 2020

khiner commented Apr 12, 2020 • edited

PaulRBerg commented Apr 13, 2020

abhisaha1 commented Apr 20, 2020 • edited

ericvanular commented Jun 6, 2020

ghost commented Sep 30, 2020

ghost commented Sep 30, 2020

abhisaha1 commented Oct 1, 2020 • edited

ghost commented Oct 1, 2020 • edited by ghost

abhisaha1 commented Oct 1, 2020

ghost commented Oct 1, 2020 • edited by ghost

ghost commented Oct 1, 2020

abhisaha1 commented Oct 3, 2020

ghost commented Oct 4, 2020 • edited by ghost

PaulRBerg commented Apr 22, 2019 •

edited

codecov bot commented Apr 22, 2019 •

edited

CruseCtrl Jun 6, 2019 •

edited

khiner commented Apr 12, 2020 •

edited

abhisaha1 commented Apr 20, 2020 •

edited

abhisaha1 commented Oct 1, 2020 •

edited

ghost commented Oct 1, 2020 •

edited by ghost

ghost commented Oct 1, 2020 •

edited by ghost

ghost commented Oct 4, 2020 •

edited by ghost