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}
  />