mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
1. Date time control not working on firefox.
2. Replace moment with date-fns in date time control as date-fns is more maintained. Fixes #6816
This commit is contained in:
Aditya Toshniwal
Akshay Joshi
parent
d753719891
commit
332351efaf
@ -10,8 +10,9 @@
|
||||
"@babel/core": "^7.10.2",
|
||||
"@babel/eslint-parser": "^7.12.13",
|
||||
"@babel/eslint-plugin": "^7.12.13",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.10.1",
|
||||
"@babel/preset-env": "^7.10.2",
|
||||
"@babel/preset-typescript": "^7.8.3",
|
||||
"@emotion/core": "^10.0.14",
|
||||
"@emotion/memoize": "^0.7.5",
|
||||
"@emotion/react": "^11.1.5",
|
||||
@ -61,22 +62,20 @@
|
||||
"sass-resources-loader": "^2.2.1",
|
||||
"style-loader": "^2.0.0",
|
||||
"stylis": "^4.0.7",
|
||||
"svgo": "^1.1.1",
|
||||
"svgo-loader": "^2.2.0",
|
||||
"terser-webpack-plugin": "^5.1.1",
|
||||
"typescript": "^3.2.2",
|
||||
"webfonts-loader": "^7.1.1",
|
||||
"webpack": "^5.21.2",
|
||||
"webpack-bundle-analyzer": "^4.4.0",
|
||||
"webpack-cli": "^4.5.0",
|
||||
"yarn-audit-html": "^2.0.0",
|
||||
"@babel/preset-typescript": "^7.8.3",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.10.1",
|
||||
"typescript": "^3.2.2",
|
||||
"svgo": "^1.1.1",
|
||||
"svgo-loader": "^2.2.0"
|
||||
"yarn-audit-html": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-proposal-class-properties": "^7.10.4",
|
||||
"@babel/preset-react": "^7.12.13",
|
||||
"@date-io/moment": "1.x",
|
||||
"@date-io/date-fns": "1.x",
|
||||
"@emotion/sheet": "^1.0.1",
|
||||
"@fortawesome/fontawesome-free": "^5.14.0",
|
||||
"@material-ui/core": "4.11.0",
|
||||
@ -86,8 +85,12 @@
|
||||
"@projectstorm/react-diagrams": "^6.4.2",
|
||||
"@simonwep/pickr": "^1.5.1",
|
||||
"@tippyjs/react": "^4.2.0",
|
||||
"@types/classnames": "^2.2.6",
|
||||
"@types/react": "^16.7.18",
|
||||
"@types/react-dom": "^16.0.11",
|
||||
"acitree": "git+https://github.com/imsurinder90/jquery-aciTree.git#rc.7",
|
||||
"alertifyjs": "git+https://github.com/EnterpriseDB/AlertifyJS/#72c1d794f5b6d4ec13a68d123c08f19021afe263",
|
||||
"aspen-decorations": "^1.0.2",
|
||||
"axios": "^0.21.1",
|
||||
"babelify": "~10.0.0",
|
||||
"backbone": "1.4.0",
|
||||
@ -98,17 +101,22 @@
|
||||
"bootstrap": "^4.3.1",
|
||||
"bootstrap-datepicker": "^1.8.0",
|
||||
"bootstrap4-toggle": "^3.6.1",
|
||||
"browserfs": "^1.4.3",
|
||||
"chart.js": "^2.9.3",
|
||||
"classnames": "^2.2.6",
|
||||
"closest": "^0.0.1",
|
||||
"codemirror": "^5.59.2",
|
||||
"context-menu": "^2.0.0",
|
||||
"css-loader": "^5.0.1",
|
||||
"cssnano": "^5.0.2",
|
||||
"dagre": "^0.8.4",
|
||||
"date-fns": "^2.24.0",
|
||||
"diff-arrays-of-objects": "^1.1.8",
|
||||
"dropzone": "^5.7.4",
|
||||
"html2canvas": "^1.0.0-rc.7",
|
||||
"immutability-helper": "^3.0.0",
|
||||
"imports-loader": "^2.0.0",
|
||||
"insert-if": "^1.1.0",
|
||||
"ip-address": "^7.1.0",
|
||||
"istanbul-instrumenter-loader": "^3.0.1",
|
||||
"jquery": "^3.6.0",
|
||||
@ -123,11 +131,15 @@
|
||||
"moment": "^2.29.1",
|
||||
"moment-timezone": "^0.5.33",
|
||||
"mousetrap": "^1.6.3",
|
||||
"notificar": "^1.0.1",
|
||||
"path-fx": "^2.0.0",
|
||||
"pathfinding": "^0.4.18",
|
||||
"paths-js": "^0.4.9",
|
||||
"pgadmin4-tree": "git+https://github.com/EnterpriseDB/pgadmin4-treeview/#76d7801ae6c179a5efd3c826c1bd91446a2436fb",
|
||||
"postcss": "^8.2.15",
|
||||
"raf": "^3.4.1",
|
||||
"react": "^17.0.1",
|
||||
"react-aspen": "^1.1.0",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-select": "^4.2.1",
|
||||
"react-table": "^7.6.3",
|
||||
@ -144,26 +156,14 @@
|
||||
"tempusdominus-bootstrap-4": "^5.1.2",
|
||||
"tempusdominus-core": "^5.0.3",
|
||||
"underscore": "^1.13.1",
|
||||
"url-loader": "^1.1.2",
|
||||
"valid-filename": "^2.0.1",
|
||||
"webcabin-docker": "git+https://github.com/EnterpriseDB/wcDocker/#5a5a1c96b89e965cb4900520ca7d5740e6a53afa",
|
||||
"wkx": "^0.5.0",
|
||||
"xterm": "^4.11.0",
|
||||
"xterm-addon-fit": "^0.5.0",
|
||||
"xterm-addon-search": "^0.8.0",
|
||||
"xterm-addon-web-links": "^0.4.0",
|
||||
"pgadmin4-tree": "git+https://github.com/EnterpriseDB/pgadmin4-treeview/#76d7801ae6c179a5efd3c826c1bd91446a2436fb",
|
||||
"react-aspen": "^1.1.0",
|
||||
"@types/classnames": "^2.2.6",
|
||||
"@types/react": "^16.7.18",
|
||||
"@types/react-dom": "^16.0.11",
|
||||
"aspen-decorations": "^1.0.2",
|
||||
"browserfs": "^1.4.3",
|
||||
"classnames": "^2.2.6",
|
||||
"context-menu": "^2.0.0",
|
||||
"insert-if": "^1.1.0",
|
||||
"notificar": "^1.0.1",
|
||||
"path-fx": "^2.0.0",
|
||||
"valid-filename": "^2.0.1",
|
||||
"url-loader": "^1.1.2"
|
||||
"xterm-addon-web-links": "^0.4.0"
|
||||
},
|
||||
"scripts": {
|
||||
"linter": "yarn eslint --no-eslintrc -c .eslintrc.js --ext .js --ext .jsx .",
|
||||
|
||||
@ -95,13 +95,13 @@ export class ExceptionsSchema extends BaseUISchema {
|
||||
{
|
||||
id: 'jexdate', cell: 'datetimepicker', label: gettext('Date'),
|
||||
type: 'datetimepicker',
|
||||
controlProps: { format: 'YYYY-MM-DD', placeholder: gettext('<any>'),
|
||||
controlProps: { placeholder: gettext('<any>'),
|
||||
autoOk: true, pickerType: 'Date',
|
||||
},
|
||||
}, {
|
||||
id: 'jextime', cell: 'datetimepicker', label: gettext('Time'),
|
||||
type: 'datetimepicker',
|
||||
controlProps: { format: 'HH:mm', placeholder: gettext('<any>'),
|
||||
controlProps: { placeholder: gettext('<any>'),
|
||||
autoOk: true, pickerType: 'Time', ampm: false,
|
||||
},
|
||||
}
|
||||
@ -289,13 +289,13 @@ export default class PgaJobScheduleSchema extends BaseUISchema {
|
||||
id: 'jscenabled', label: gettext('Enabled?'), type: 'switch', cell: 'switch',
|
||||
}, {
|
||||
id: 'jscstart', label: gettext('Start'), type: 'datetimepicker', cell: 'datetimepicker',
|
||||
controlProps: { format: 'YYYY-MM-DD HH:mm:ss Z', ampm: false,
|
||||
controlProps: { ampm: false,
|
||||
placeholder: gettext('YYYY-MM-DD HH:mm:ss Z'), autoOk: true,
|
||||
disablePast: true,
|
||||
},
|
||||
}, {
|
||||
id: 'jscend', label: gettext('End'), type: 'datetimepicker', cell: 'datetimepicker',
|
||||
controlProps: { format: 'YYYY-MM-DD HH:mm:ss Z', ampm: false,
|
||||
controlProps: { ampm: false,
|
||||
placeholder: gettext('YYYY-MM-DD HH:mm:ss Z'), autoOk: true,
|
||||
disablePast: true,
|
||||
},
|
||||
|
||||
@ -100,7 +100,8 @@ export default class RoleSchema extends BaseUISchema {
|
||||
mode: ['properties', 'edit', 'create'],
|
||||
deps: ['rolcanlogin'],
|
||||
helpMessage: gettext('Please note that if you leave this field blank, then password will never expire.'),
|
||||
controlProps: { format: 'YYYY-MM-DD HH:mm:ss Z', ampm: false,
|
||||
controlProps: {
|
||||
ampm: false,
|
||||
placeholder: gettext('No Expiry'), autoOk: true,
|
||||
},
|
||||
disabled: obj.readOnly,
|
||||
|
||||
@ -27,7 +27,9 @@ import clsx from 'clsx';
|
||||
import PropTypes from 'prop-types';
|
||||
import HTMLReactParse from 'html-react-parser';
|
||||
import { KeyboardDateTimePicker, KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider} from '@material-ui/pickers';
|
||||
import MomentUtils from '@date-io/moment';
|
||||
import DateFnsUtils from '@date-io/date-fns';
|
||||
import * as DateFns from 'date-fns';
|
||||
|
||||
import moment from 'moment';
|
||||
|
||||
import CodeMirror from './CodeMirror';
|
||||
@ -200,40 +202,60 @@ FormInputSQL.propTypes = {
|
||||
change: PropTypes.func,
|
||||
};
|
||||
|
||||
/* 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: 'yyyy-MM-dd',
|
||||
TIME_12: 'hh:mm aa',
|
||||
TIME_24: 'HH:mm',
|
||||
};
|
||||
|
||||
export function InputDateTimePicker({value, onChange, readonly, controlProps, ...props}) {
|
||||
|
||||
const onDateTimeChange = (momentVal)=> {
|
||||
onChange(momentVal ? momentVal.format(controlProps.format || 'YYYY-MM-DD HH:mm:ss Z') : null);
|
||||
};
|
||||
|
||||
const onDateChange = (momentVal)=> {
|
||||
onChange(momentVal ? momentVal.format(controlProps.format || 'YYYY-MM-DD') : null);
|
||||
};
|
||||
|
||||
const onTimeChange = (momentVal)=> {
|
||||
onChange(momentVal ? momentVal.format(controlProps.format || 'HH:mm') : null);
|
||||
};
|
||||
|
||||
if (readonly) {
|
||||
return (<InputText value={value} {...props}/>);
|
||||
let format = '';
|
||||
if (controlProps?.pickerType === 'Date') {
|
||||
format = controlProps.format || DATE_TIME_FORMAT.DATE;
|
||||
} else if (controlProps?.pickerType === 'Time') {
|
||||
format = controlProps.format || (controlProps.ampm ? DATE_TIME_FORMAT.TIME_12 : DATE_TIME_FORMAT.TIME_24);
|
||||
} else {
|
||||
format = controlProps.format || (controlProps.ampm ? DATE_TIME_FORMAT.DATE_TIME_12 : DATE_TIME_FORMAT.DATE_TIME_24);
|
||||
}
|
||||
|
||||
if (controlProps && controlProps.pickerType === 'Date') {
|
||||
const handleChange = (dateVal)=> {
|
||||
onChange(DateFns.format(dateVal, format));
|
||||
};
|
||||
|
||||
/* Value should be a date object instead of string */
|
||||
value = _.isUndefined(value) ? null : value;
|
||||
if(!_.isNull(value)) {
|
||||
let parseValue = DateFns.parse(value, format, new Date());
|
||||
if(!DateFns.isValid(parseValue)) {
|
||||
parseValue = DateFns.parseISO(value);
|
||||
}
|
||||
value = !DateFns.isValid(parseValue) ? null : parseValue;
|
||||
}
|
||||
|
||||
if (readonly) {
|
||||
return (<InputText value={value ? DateFns.format(value, format) : value}
|
||||
readonly={readonly} controlProps={{placeholder: controlProps.placeholder}} {...props}/>);
|
||||
}
|
||||
|
||||
if (controlProps?.pickerType === 'Date') {
|
||||
return (
|
||||
<MuiPickersUtilsProvider utils={MomentUtils}>
|
||||
<KeyboardDatePicker value={value} onChange={onDateChange} readOnly={Boolean(readonly)}
|
||||
format={controlProps.format || 'YYYY-MM-DD'}
|
||||
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
||||
<KeyboardDatePicker value={value} onChange={handleChange} readOnly={Boolean(readonly)}
|
||||
format={format}
|
||||
placeholder={controlProps.placeholder || 'YYYY-MM-DD'}
|
||||
autoOk={controlProps.autoOk || false}
|
||||
{...props} label={''}/>
|
||||
</MuiPickersUtilsProvider>
|
||||
);
|
||||
} else if (controlProps && controlProps.pickerType === 'Time') {
|
||||
} else if (controlProps?.pickerType === 'Time') {
|
||||
let newValue = (!_.isNull(value) && !_.isUndefined(value)) ? moment(value, 'HH:mm').toDate() : value;
|
||||
return (
|
||||
<MuiPickersUtilsProvider utils={MomentUtils}>
|
||||
<KeyboardTimePicker value={newValue} onChange={onTimeChange} readOnly={Boolean(readonly)}
|
||||
format={controlProps.format || 'HH:mm'}
|
||||
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
||||
<KeyboardTimePicker value={newValue} onChange={handleChange} readOnly={Boolean(readonly)}
|
||||
format={format}
|
||||
placeholder={controlProps.placeholder || 'HH:mm'}
|
||||
autoOk={controlProps.autoOk || false}
|
||||
ampm={controlProps.ampm || false}
|
||||
@ -243,11 +265,11 @@ export function InputDateTimePicker({value, onChange, readonly, controlProps, ..
|
||||
}
|
||||
|
||||
return (
|
||||
<MuiPickersUtilsProvider utils={MomentUtils}>
|
||||
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
||||
<KeyboardDateTimePicker
|
||||
variant="inline"
|
||||
ampm={controlProps.ampm || false}
|
||||
format={controlProps.format || 'YYYY-MM-DD HH:mm:ss Z'}
|
||||
format={format}
|
||||
placeholder={controlProps.placeholder || 'YYYY-MM-DD HH:mm:ss Z'}
|
||||
autoOk={controlProps.autoOk || false}
|
||||
disablePast={controlProps.disablePast || false}
|
||||
@ -255,7 +277,7 @@ export function InputDateTimePicker({value, onChange, readonly, controlProps, ..
|
||||
invalidDateMessage=""
|
||||
maxDateMessage=""
|
||||
minDateMessage=""
|
||||
onChange={onDateTimeChange}
|
||||
onChange={handleChange}
|
||||
readOnly={Boolean(readonly)}
|
||||
{...props} label={''}
|
||||
/>
|
||||
|
||||
@ -1150,10 +1150,10 @@
|
||||
resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
|
||||
integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==
|
||||
|
||||
"@date-io/moment@1.x":
|
||||
"@date-io/date-fns@1.x":
|
||||
version "1.3.13"
|
||||
resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-1.3.13.tgz#56c2772bc4f6675fc6970257e6033e7a7c2960f0"
|
||||
integrity sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==
|
||||
resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-1.3.13.tgz#7798844041640ab393f7e21a7769a65d672f4735"
|
||||
integrity sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==
|
||||
dependencies:
|
||||
"@date-io/core" "^1.3.13"
|
||||
|
||||
@ -3744,6 +3744,11 @@ dashdash@^1.12.0:
|
||||
dependencies:
|
||||
assert-plus "^1.0.0"
|
||||
|
||||
date-fns@^2.24.0:
|
||||
version "2.24.0"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.24.0.tgz#7d86dc0d93c87b76b63d213b4413337cfd1c105d"
|
||||
integrity sha512-6ujwvwgPID6zbI0o7UbURi2vlLDR9uP26+tW6Lg+Ji3w7dd0i3DOcjcClLjLPranT60SSEFBwdSyYwn/ZkPIuw==
|
||||
|
||||
date-format@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/date-format/-/date-format-2.1.0.tgz#31d5b5ea211cf5fd764cd38baf9d033df7e125cf"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user