Change: Update datepicker to use current version of react-datepicker

react-datepicker > 1.8.0 dropped the usage of moment.js and requires
native JS Date objects as inputs. Therefore we didn't update it for a
long time. This change adjusts our own datepicker component to still use
moment.js dates and passes the wrapped JS Date objects to
react-datepicker. Because native Date objects don't know anything about
timezone the datepicker component requires a timezone prop now to be
able to convert the native Date object into a timezone aware moment.js
date.

This change might also fix a small issue with out datepicker component
on initial creation. The datepicker created a moment.js date having
possibly the wrong timezone information.

Also with updating react-datepicker to the latest release all blockers
for updating to React 18 are resolved.

package.json

@@ -55,7 +55,7 @@
     "qs": "^6.11.2",
     "react": "^16.14.0",
     "react-beautiful-dnd": "^13.1.1",
-    "react-datepicker": "^1.8.0",
+    "react-datepicker": "^6.0.0",
     "react-dom": "^16.14.0",
     "react-redux": "^8.1.3",
     "react-router-dom": "^5.2.0",

src/web/components/form/datepicker.js

@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import React from 'react';
+import React, {useCallback} from 'react';
 
 import styled from 'styled-components';
 
@@ -73,32 +73,34 @@ InputField.propTypes = {
   onClick: PropTypes.func,
 };
 
-const DatePickerComponent = props => {
-  const handleChange = value => {
-    const {name, onChange} = props;
-
-    if (isDefined(onChange)) {
-      onChange(value, name);
-    }
-  };
-
-  const {
-    disabled,
-    minDate = date(),
-    name,
-    width,
-    value = date(),
-    ...restProps
-  } = props;
-
+const DatePickerComponent = ({
+  disabled,
+  timezone,
+  minDate = date().tz(timezone),
+  name,
+  width,
+  value = date().tz(timezone),
+  onChange,
+  ...restProps
+}) => {
+  const handleChange = useCallback(
+    newValue => {
+      if (isDefined(onChange)) {
+        onChange(date(newValue).tz(timezone), name);
+      }
+    },
+    [name, onChange, timezone],
+  );
   return (
     <DatePicker
       {...restProps}
       disabled={disabled}
       customInput={<InputField width={width} disabled={disabled} />}
-      minDate={minDate === false ? undefined : minDate}
-      maxDate={date().add(3, 'years')}
-      selected={value}
+      minDate={
+        minDate === false || !isDefined(minDate) ? undefined : minDate.toDate()
+      }
+      maxDate={date().add(3, 'years').toDate()}
+      selected={value.toDate()}
       todayButton={_('Today')}
       locale={getLocale()}
       onChange={handleChange}
@@ -110,6 +112,7 @@ DatePickerComponent.propTypes = {
   disabled: PropTypes.bool,
   minDate: PropTypes.oneOfType([PropTypes.date, PropTypes.oneOf([false])]),
   name: PropTypes.string,
+  timezone: PropTypes.string.isRequired,
   value: PropTypes.date.isRequired,
   width: PropTypes.string,
   onChange: PropTypes.func,

src/web/pages/performance/startendtimeselection.js

@@ -118,6 +118,7 @@ class StartTimeSelection extends React.Component {
             <Datepicker
               value={startDate}
               name="startDate"
+              timezone={timezone}
               minDate={false}
               onChange={this.handleValueChange}
             />
@@ -149,6 +150,7 @@ class StartTimeSelection extends React.Component {
             <Datepicker
               value={endDate}
               name="endDate"
+              timezone={timezone}
               minDate={false}
               onChange={this.handleValueChange}
             />

src/web/pages/schedules/dialog.js

@@ -435,6 +435,7 @@ class ScheduleDialog extends React.Component {
 
             <FormGroup title={_('First Run')}>
               <DatePicker
+                timezone={timezone}
                 name="startDate"
                 value={startDate}
                 onChange={this.handleValueChange}

src/web/wizard/advancedtaskwizard.js

@@ -239,6 +239,7 @@ const AdvancedTaskWizard = ({
                       <Datepicker
                         name="start_date"
                         value={state.start_date}
+                        timezone={state.start_timezone}
                         onChange={onValueChange}
                       />
                     </FormGroup>

src/web/wizard/modifytaskwizard.js

@@ -152,6 +152,7 @@ const ModifyTaskWizard = ({
                   <FormGroup offset="1">
                     <Datepicker
                       name="start_date"
+                      timezone={state.start_timezone}
                       value={state.start_date}
                       onChange={onValueChange}
                     />