A simple exercise in functional React/JavaScript that exemplify a common use-case with date pickers.

In the following I will refer to the widely used react-datepicker component, although the considerations I will make can be applied to any date picker that provides similar capabilities.

The Problem

React-datepicker component provides two properties to constraint the selection of dates: minDate and maxDate.

When the minDate property is set, previous days cannot be selected and browsing to previous months is inhibited. The same happens in the opposite direction with maxDate.

If you enable the time picker section and specify a minDate that contains a minimum time, the expected behavior would be to have the same type of constraint in the time picker as well: the selection of times before the minDate time should not be enabled.

Well, this is not the case: times before the minimum time can still be selected.

To constraint the selection of times, the component provides two additional properties: minTime and maxTime.

Their operation is subject to the following rules:

• Both must be set to take effect. For example, to disable the selection of times before 08:30AM, minTime must be set at 08:30 AM and maxTime must be set at 11:59PM
• When specified, the constraints are applied regardless of the selected day. Therefore, to apply them correctly, the two properties must be related to the current selected day.

#datepicker #javascript #react #programming