MwSpaceLLC
commented
1 month ago For use it as italy value, for the moment, use patch-package
- npm install --save-dev patch-package
- create ./patches folder on root project
- indert code patch
- insert postinstall script
Patch Code for package: @cloudscape-design+components+3.0.762.patch
!! important !! Before commenting negatively on the temporary solution: The patch-package needs to be compiled according to your requirements. Below, you can see where we modified the original files to transform the dates. DO NOT COPY AND PASTE We also use this patch in production, so if it doesnât work for you, youâve done something wrong.
diff --git a/node_modules/@cloudscape-design/components/date-input/internal.js b/node_modules/@cloudscape-design/components/date-input/internal.js
index 0547990..ed5aebd 100644
--- a/node_modules/@cloudscape-design/components/date-input/internal.js
+++ b/node_modules/@cloudscape-design/components/date-input/internal.js
@@ -1,29 +1,42 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
-import { __rest } from "tslib";
+import {__rest} from "tslib";
import React from 'react';
import clsx from 'clsx';
-import { getDaysInMonth } from 'date-fns';
+import {getDaysInMonth} from 'date-fns';
import MaskedInput from '../internal/components/masked-input';
-import { fireNonCancelableEvent } from '../internal/events';
-import { displayToIso, isoToDisplay, parseDate } from '../internal/utils/date-time';
+import {fireNonCancelableEvent} from '../internal/events';
+import {displayToIso, isoToDisplay, parseDate} from '../internal/utils/date-time';
import styles from './styles.css.js';
+
function daysMax(value) {
// force to first day in month, as new Date('2018-02-30') -> March 2nd 2018
const baseDate = displayToIso(value).substring(0, 7);
return getDaysInMonth(parseDate(baseDate));
}
-const yearMask = { min: 0, max: 9999, default: 2000, length: 4 };
-const monthMask = { min: 1, max: 12, length: 2 };
-const dayMask = { min: 1, max: daysMax, length: 2 };
+
+const yearMask = {min: 0, max: 2050, default: 2000, length: 4};
+const monthMask = {min: 1, max: 12, length: 2};
+const dayMask = {min: 1, max: 31, length: 2};
const InternalDateInput = React.forwardRef((_a, ref) => {
- var { value, onChange, granularity, __internalRootRef = null } = _a, props = __rest(_a, ["value", "onChange", "granularity", "__internalRootRef"]);
+ var {value, onChange, granularity, __internalRootRef = null} = _a,
+ props = __rest(_a, ["value", "onChange", "granularity", "__internalRootRef"]);
const maskArgs = {
separator: '/',
inputSeparators: ['-', '.', ' '],
- segments: granularity === 'month' ? [yearMask, monthMask] : [yearMask, monthMask, dayMask],
+ segments: granularity === 'month' ? [monthMask, yearMask] : [dayMask, monthMask, yearMask],
};
- return (React.createElement(MaskedInput, Object.assign({ ref: ref }, props, { value: isoToDisplay(value || ''), onChange: event => fireNonCancelableEvent(onChange, { value: displayToIso(event.detail.value) }), className: clsx(styles.root, props.className), mask: maskArgs, autofix: true, autoComplete: false, disableAutocompleteOnBlur: false, disableBrowserAutocorrect: true, __internalRootRef: __internalRootRef })));
+ return (React.createElement(MaskedInput, Object.assign({ref: ref}, props, {
+ value: isoToDisplay(value || ''),
+ onChange: event => fireNonCancelableEvent(onChange, {value: displayToIso(event.detail.value)}),
+ className: clsx(styles.root, props.className),
+ mask: maskArgs,
+ autofix: true,
+ autoComplete: false,
+ disableAutocompleteOnBlur: false,
+ disableBrowserAutocorrect: true,
+ __internalRootRef: __internalRootRef
+ })));
});
export default InternalDateInput;
//# sourceMappingURL=internal.js.map
\ No newline at end of file
diff --git a/node_modules/@cloudscape-design/components/date-picker/utils.js b/node_modules/@cloudscape-design/components/date-picker/utils.js
index a0afddc..dd6706b 100644
--- a/node_modules/@cloudscape-design/components/date-picker/utils.js
+++ b/node_modules/@cloudscape-design/components/date-picker/utils.js
@@ -2,7 +2,7 @@
// SPDX-License-Identifier: Apache-2.0
import { getDateLabel, renderMonthAndYear, renderYear } from '../calendar/utils/intl';
export function isValidFullDate({ date, granularity }) {
- const regex = granularity === 'month' ? /^\d{4}-\d{2}(-\d{2})?$/ : /^\d{4}-\d{2}-\d{2}$/;
+ const regex = granularity === 'month' ? /^\d{2}\/\d{4}$/ : /^\d{2}\/\d{2}\/\d{4}$/;
return !!date.match(regex);
}
export function getSelectedDateLabel({ date, granularity, locale, }) {
diff --git a/node_modules/@cloudscape-design/components/internal/utils/date-time/format-date.js b/node_modules/@cloudscape-design/components/internal/utils/date-time/format-date.js
index c8f5520..fb2c0ae 100644
--- a/node_modules/@cloudscape-design/components/internal/utils/date-time/format-date.js
+++ b/node_modules/@cloudscape-design/components/internal/utils/date-time/format-date.js
@@ -10,9 +10,9 @@ export function formatDate(value, granularity = 'day') {
const year = value.getFullYear();
const month = padLeftZeros(`${value.getMonth() + 1}`, 2);
if (granularity === 'month') {
- return `${year}-${month}`;
+ return `${month}-${year}`;
}
const date = padLeftZeros(`${value.getDate()}`, 2);
- return `${year}-${month}-${date}`;
+ return `${date}-${month}-${year}`;
}
//# sourceMappingURL=format-date.js.map
\ No newline at end of file
diff --git a/node_modules/@cloudscape-design/components/internal/utils/date-time/parse-date.js b/node_modules/@cloudscape-design/components/internal/utils/date-time/parse-date.js
index 4fe4640..a79368f 100644
--- a/node_modules/@cloudscape-design/components/internal/utils/date-time/parse-date.js
+++ b/node_modules/@cloudscape-design/components/internal/utils/date-time/parse-date.js
@@ -1,7 +1,7 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
export function parseDate(value, strict = false) {
- const [yearString, monthString, dayString] = value.split('-');
+ const [dayString, monthString, yearString] = value.split('-');
const year = Number(yearString);
const month = Number(monthString);
const day = Number(dayString);
johannes-weber
gethinwebster
awskaran
Description
Hello,đ
We have noticed that the current version of the Date Picker component does not allow for customizable date formats, which is a crucial feature for internationalization. Different regions around the world use various date formats, and for instance, in Italy, the standard format is DD/MM/YYYY. Unfortunately, this format is not currently supported by the component.
We are aware that there has been a response in this discussion indicating that there are no plans to implement this feature. However, we strongly encourage reconsideration of this decision.
The only current workaround involves creating a custom component from scratch using the base library, which we do not believe follows best practices. Additionally, from a business perspective, we feel it is not aligned with company policies to disregard such requests, especially since the solution could be as simple as allowing for the regular expression (regex) used for date validation to be customizable.
We believe this would enhance the flexibility of the component and improve its international applicability. Our company, MwSpace, relies heavily on Cloudscape components for our cloud systems and applications, and this feature would allow us to better serve our global clients.
Thank you for considering this request. We truly appreciate the continued development of this excellent library.
Best regards,
A. Ivanovitch - CEO of MwSpace LLC
Code of Conduct