From 1d717e8e7a3bd0e7fc460f22b8a9bd28750be9f3 Mon Sep 17 00:00:00 2001 From: ahmetemrekilinc Date: Fri, 3 Nov 2023 20:08:45 +0300 Subject: [PATCH] 4.0.0-beta.2 --- package.json | 4 +- .../components/ComponentDatePicker.jsx | 54 +++++++++++++++---- yarn.lock | 10 ++-- 3 files changed, 52 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 31e27e0..370de3d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "comfort-react-demo", - "version": "4.0.0-beta.1", + "version": "4.0.0-beta.2", "type": "module", "license": "MIT", "scripts": { @@ -16,7 +16,7 @@ "@mui/material": "5.14.16", "@mui/utils": "5.14.16", "@mui/x-date-pickers": "6.17.0", - "comfort-react": "4.0.0-beta.1", + "comfort-react": "4.0.0-beta.2", "date-fns": "2.30.0", "jsx-to-string": "1.4.0", "miragejs": "0.1.48", diff --git a/src/components/components/ComponentDatePicker.jsx b/src/components/components/ComponentDatePicker.jsx index ad372f4..8b85a62 100644 --- a/src/components/components/ComponentDatePicker.jsx +++ b/src/components/components/ComponentDatePicker.jsx @@ -19,6 +19,7 @@ const INPUT_FORMAT_OPTIONS = [ 'MM/dd/yyyy', 'MM-dd-yyyy', 'do MMM yyyy', + 'dd/MM/yyyy HH:mm', ]; const INPUT_STYLE = { color: 'red' }; const PLACEHOLDER_TEXT = 'custom placeholder'; @@ -41,6 +42,9 @@ const ComponentDatePicker = () => { const [enableUseValidatableForm, setEnableUseValidatableForm] = useState(false); const [selectedFocusedLabel, setSelectedFocusedLabel] = useState(false); const [format, setFormat] = useState(); + const [enableTime, setEnableTime] = useState(false); + const [okText, setOkText] = useState(); + const [cancelText, setCancelText] = useState(); const { setPathValue, setPathIsBlurred, getValue, getError } = useValidatableForm({ rules, }); @@ -68,11 +72,14 @@ const ComponentDatePicker = () => { variant={selectedVariant} disabled={selectedDisabled} fullWidth={selectedFullWidth} - InputProps={{ - style: selectedInputStyle ? INPUT_STYLE : null, + textFieldProps={{ + sx: selectedInputStyle ? { input: INPUT_STYLE } : null, }} renderErrorMessage={selectedRenderErrorMessage ? customErrorMessageRenderer : undefined} focusedLabel={selectedFocusedLabel ? 'Focused DatePicker' : null} + enableTime={enableTime} + okText={okText} + cancelText={cancelText} /> ); @@ -206,6 +213,35 @@ const ComponentDatePicker = () => { label={'format'} /> + + + { + setEnableTime(newValue); + }} + /> + + + + { + setOkText(val); + }} + label="okText" + /> + + + { + setCancelText(val); + }} + label="cancelText" + /> +