|
1 | 1 | /** |
2 | 2 | * @module FieldControls |
3 | 3 | */ |
4 | | -import { createStyles, FormHelperText, makeStyles, TextField, Theme, Tooltip, Typography } from '@material-ui/core' |
5 | | -import { KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers' |
6 | | -import type { MaterialUiPickersDate } from '@material-ui/pickers/typings/date' |
| 4 | +import { createStyles, FormHelperText, makeStyles, Theme, Tooltip, Typography } from '@material-ui/core' |
7 | 5 | import { deepMerge } from '@sensenet/client-utils' |
8 | 6 | import { DateTimeFieldSetting, DateTimeMode } from '@sensenet/default-content-types' |
9 | | -import DateFnsUtils from '@date-io/date-fns' |
10 | 7 | import intlFormatDistance from 'date-fns/intlFormatDistance' |
11 | 8 | import React, { useState } from 'react' |
| 9 | +import DatePickerLib from 'react-datepicker' |
12 | 10 | import { changeTemplatedValue } from '../helpers' |
13 | 11 | import { ReactClientFieldSetting } from './client-field-setting' |
14 | 12 | import { defaultLocalization } from './localization' |
| 13 | +import 'react-datepicker/dist/react-datepicker.css' |
| 14 | + |
15 | 15 | const minDatePickerDate = new Date('0001-01-01') |
16 | 16 |
|
17 | 17 | export const dateTimeOptions: Intl.DateTimeFormatOptions = { |
@@ -41,83 +41,67 @@ const initialValueState = ({ |
41 | 41 | fieldValue, |
42 | 42 | actionName, |
43 | 43 | settings, |
44 | | -}: Pick<ReactClientFieldSetting<DateTimeFieldSetting>, 'fieldValue' | 'actionName' | 'settings'>) => { |
45 | | - if (fieldValue === '0001-01-01T00:00:00Z') { |
46 | | - return null |
47 | | - } |
| 44 | +}: Pick<ReactClientFieldSetting<DateTimeFieldSetting>, 'fieldValue' | 'actionName' | 'settings'>): Date | null => { |
| 45 | + if (fieldValue === '0001-01-01T00:00:00Z') return null |
48 | 46 |
|
49 | 47 | if (fieldValue) { |
50 | | - return fieldValue |
| 48 | + const parsed = new Date(fieldValue) |
| 49 | + return isNaN(parsed.getTime()) ? null : parsed |
51 | 50 | } |
52 | 51 |
|
53 | | - if (actionName !== 'new') { |
54 | | - return null |
55 | | - } |
| 52 | + if (actionName !== 'new') return null |
56 | 53 |
|
57 | | - const secureCheckedDateInput = changeTemplatedValue(settings.DefaultValue, settings.EvaluatedDefaultValue) |
| 54 | + const defaultVal = changeTemplatedValue(settings.DefaultValue, settings.EvaluatedDefaultValue) |
| 55 | + if (!defaultVal) return null |
58 | 56 |
|
59 | | - return secureCheckedDateInput |
| 57 | + const parsed = new Date(defaultVal) |
| 58 | + return isNaN(parsed.getTime()) ? null : parsed |
60 | 59 | } |
| 60 | + |
61 | 61 | /** |
62 | 62 | * Field control that represents a Date field. Available values will be populated from the FieldSettings. |
63 | 63 | */ |
64 | 64 | export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>> = (props) => { |
65 | 65 | const classes = useStyles() |
66 | | - |
67 | 66 | const { settings, actionName, fieldValue, locale, localization, hideDescription, fieldOnChange } = props |
68 | | - |
69 | 67 | const localizationMerged = deepMerge(defaultLocalization.datePicker, localization?.datePicker) |
70 | | - |
71 | | - const [value, setValue] = useState(initialValueState({ fieldValue, actionName, settings })) |
72 | | - |
73 | | - const handleDateChange = (date: MaterialUiPickersDate) => { |
74 | | - if (!date || isNaN(date.getTime())) { |
75 | | - return |
76 | | - } |
77 | | - const isoString: string = new Date(date).toISOString() |
78 | | - setValue(isoString) |
79 | | - fieldOnChange?.(settings.Name, isoString) |
80 | | - } |
81 | | - |
| 68 | + const [value, setValue] = useState<Date | null>(initialValueState({ fieldValue, actionName, settings })) |
82 | 69 | const localeCode = locale?.code || window.navigator.language |
83 | | - |
84 | 70 | const isDisabled = settings.ReadOnly || disabledDateTimes.includes(settings.Name) |
85 | | - |
86 | 71 | const dateFieldValue: Date = new Date(fieldValue as string) |
87 | 72 |
|
| 73 | + const handleDateChange = (date: Date | null) => { |
| 74 | + if (!date || isNaN(date.getTime())) return |
| 75 | + setValue(date) |
| 76 | + const isoString = date.toISOString() |
| 77 | + fieldOnChange?.(settings.Name, isoString) |
| 78 | + } |
| 79 | + |
88 | 80 | switch (actionName) { |
89 | 81 | case 'edit': |
90 | 82 | case 'new': |
91 | 83 | return ( |
92 | | - <MuiPickersUtilsProvider utils={DateFnsUtils} locale={locale}> |
93 | | - <> |
94 | | - <label htmlFor={props.settings.Name} style={{ fontSize: '15px' }}> |
95 | | - {props.settings.DisplayName} |
96 | | - </label> |
97 | | - <KeyboardDateTimePicker |
98 | | - style={{ display: 'inherit' }} |
99 | | - minDate={minDatePickerDate} |
100 | | - value={value} |
| 84 | + <div style={{ display: 'flex', flexDirection: 'column' }}> |
| 85 | + <label htmlFor={props.settings.Name} style={{ fontSize: '15px' }}> |
| 86 | + {props.settings.DisplayName} |
| 87 | + </label> |
| 88 | + <div style={{ maxWidth: '420px' }}> |
| 89 | + <DatePickerLib |
| 90 | + selected={value} |
101 | 91 | onChange={handleDateChange} |
102 | | - name={settings.Name} |
103 | | - id={settings.Name} |
| 92 | + minDate={minDatePickerDate} |
| 93 | + showTimeSelect={settings.DateTimeMode === DateTimeMode.DateAndTime} |
| 94 | + dateFormat={settings.DateTimeMode === DateTimeMode.Date ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm'} |
| 95 | + timeFormat="HH:mm" |
| 96 | + timeIntervals={30} |
| 97 | + locale={locale} |
104 | 98 | disabled={isDisabled} |
105 | | - InputLabelProps={{ shrink: true }} |
106 | | - required={settings.Compulsory} |
107 | | - format={settings.DateTimeMode === DateTimeMode.Date ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm'} |
108 | | - TextFieldComponent={(params) => ( |
109 | | - <TextField |
110 | | - {...params} |
111 | | - variant="outlined" |
112 | | - fullWidth |
113 | | - InputLabelProps={{ shrink: true }} |
114 | | - InputProps={{ ...params.InputProps, style: { maxWidth: '420px' } }} |
115 | | - /> |
116 | | - )} |
| 99 | + placeholderText="Select date" |
| 100 | + todayButton="Today" |
117 | 101 | /> |
118 | | - {!hideDescription && <FormHelperText>{settings.Description}</FormHelperText>} |
119 | | - </> |
120 | | - </MuiPickersUtilsProvider> |
| 102 | + </div> |
| 103 | + {!hideDescription && <FormHelperText>{settings.Description}</FormHelperText>} |
| 104 | + </div> |
121 | 105 | ) |
122 | 106 | default: |
123 | 107 | return ( |
|
0 commit comments