Few more stability improvements to date time picker.

refs #6816

web/package.json

@@ -75,6 +75,7 @@
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-react": "^7.12.13",
+    "@date-io/core": "^1.3.6",
     "@date-io/date-fns": "1.x",
     "@emotion/sheet": "^1.0.1",
     "@fortawesome/fontawesome-free": "^5.14.0",

web/pgadmin/static/js/components/FormComponents.jsx

@@ -30,8 +30,6 @@ import { KeyboardDateTimePicker, KeyboardDatePicker, KeyboardTimePicker, MuiPick
 import DateFnsUtils from '@date-io/date-fns';
 import * as DateFns from 'date-fns';
 
-import moment from 'moment';
-
 import CodeMirror from './CodeMirror';
 import gettext from 'sources/gettext';
 import { showFileDialog } from '../helpers/legacyConnector';
@@ -205,7 +203,7 @@ FormInputSQL.propTypes = {
 /* https://date-fns.org/v2.24.0/docs/format */
 const DATE_TIME_FORMAT = {
   DATE_TIME_12: 'yyyy-MM-dd hh:mm:ss aa xxx',
-  DATE_TIME_24: 'yyyy-MM-dd HH:mm:ss XXX',
+  DATE_TIME_24: 'yyyy-MM-dd HH:mm:ss xxx',
   DATE: 'yyyy-MM-dd',
   TIME_12: 'hh:mm:ss aa',
   TIME_24: 'HH:mm:ss',
@@ -213,16 +211,20 @@ const DATE_TIME_FORMAT = {
 
 export function InputDateTimePicker({value, onChange, readonly, controlProps, ...props}) {
   let format = '';
+  let placeholder = '';
   if (controlProps?.pickerType === 'Date') {
     format = controlProps.format || DATE_TIME_FORMAT.DATE;
+    placeholder = controlProps.placeholder || 'YYYY-MM-DD';
   } else if (controlProps?.pickerType === 'Time') {
     format = controlProps.format || (controlProps.ampm ? DATE_TIME_FORMAT.TIME_12 : DATE_TIME_FORMAT.TIME_24);
+    placeholder = controlProps.placeholder || 'HH:mm:ss';
   } else {
     format = controlProps.format || (controlProps.ampm ? DATE_TIME_FORMAT.DATE_TIME_12 : DATE_TIME_FORMAT.DATE_TIME_24);
+    placeholder = controlProps.placeholder || 'YYYY-MM-DD HH:mm:ss Z';
   }
 
-  const handleChange = (dateVal)=> {
+  const handleChange = (dateVal, stringVal)=> {
-    onChange(DateFns.format(dateVal, format));
+    onChange(stringVal);
   };
 
   /* Value should be a date object instead of string */
@@ -232,7 +234,7 @@ export function InputDateTimePicker({value, onChange, readonly, controlProps, ..
     if(!DateFns.isValid(parseValue)) {
       parseValue = DateFns.parseISO(value);
     }
-    value = !DateFns.isValid(parseValue) ? null : parseValue;
+    value = !DateFns.isValid(parseValue) ? value : parseValue;
   }
 
   if (readonly) {
@@ -240,47 +242,41 @@ export function InputDateTimePicker({value, onChange, readonly, controlProps, ..
       readonly={readonly} controlProps={{placeholder: controlProps.placeholder}} {...props}/>);
   }
 
+  let commonProps = {
+    ...props,
+    value: value,
+    format: format,
+    placeholder: placeholder,
+    label: '',
+    variant: 'inline',
+    readOnly: Boolean(readonly),
+    autoOk: controlProps.autoOk || false,
+    ampm: controlProps.ampm || false,
+    disablePast: controlProps.disablePast || false,
+    invalidDateMessage: '',
+    maxDateMessage: '',
+    minDateMessage: '',
+    onChange: handleChange,
+    fullWidth: true,
+  };
+
   if (controlProps?.pickerType === 'Date') {
     return (
       <MuiPickersUtilsProvider utils={DateFnsUtils}>
-        <KeyboardDatePicker value={value} onChange={handleChange} readOnly={Boolean(readonly)}
+        <KeyboardDatePicker {...commonProps}/>
-          format={format}
-          placeholder={controlProps.placeholder || 'YYYY-MM-DD'}
-          autoOk={controlProps.autoOk || false}
-          {...props} label={''}/>
       </MuiPickersUtilsProvider>
     );
   } else if (controlProps?.pickerType === 'Time') {
-    let newValue = (!_.isNull(value) && !_.isUndefined(value)) ? moment(value, 'HH:mm').toDate() : value;
     return (
       <MuiPickersUtilsProvider utils={DateFnsUtils}>
-        <KeyboardTimePicker value={newValue} onChange={handleChange} readOnly={Boolean(readonly)}
+        <KeyboardTimePicker {...commonProps}/>
-          format={format}
-          placeholder={controlProps.placeholder || 'HH:mm'}
-          autoOk={controlProps.autoOk || false}
-          ampm={controlProps.ampm || false}
-          {...props} label={''}/>
       </MuiPickersUtilsProvider>
     );
   }
 
   return (
     <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      <KeyboardDateTimePicker
+      <KeyboardDateTimePicker {...commonProps}/>
-        variant="inline"
-        ampm={controlProps.ampm || false}
-        format={format}
-        placeholder={controlProps.placeholder || 'YYYY-MM-DD HH:mm:ss Z'}
-        autoOk={controlProps.autoOk || false}
-        disablePast={controlProps.disablePast || false}
-        value={value}
-        invalidDateMessage=""
-        maxDateMessage=""
-        minDateMessage=""
-        onChange={handleChange}
-        readOnly={Boolean(readonly)}
-        {...props} label={''}
-      />
     </MuiPickersUtilsProvider>
   );
 }

web/yarn.lock

@@ -1145,7 +1145,7 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@date-io/core@1.x", "@date-io/core@^1.3.13":
+"@date-io/core@1.x", "@date-io/core@^1.3.13", "@date-io/core@^1.3.6":
   version "1.3.13"
   resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
   integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==