@instructure/ui-date-input 8.56.2 → 8.56.4

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.56.4](https://github.com/instructure/instructure-ui/compare/v8.56.3...v8.56.4) (2024-10-02)
+
+
+### Bug Fixes
+
+* **ui-calendar,ui-date-input:** fix locale and timezone for simple api ([94209df](https://github.com/instructure/instructure-ui/commit/94209dfdfaeca8c8ae452771c4bf2688e6345272))
+* **ui-date-input:** fix date format and validation when locale isn't us english ([67e6d1f](https://github.com/instructure/instructure-ui/commit/67e6d1fb4aedda60ab430b69e14a0c93ac57f2bc))
+
+
+
+
+
+## [8.56.3](https://github.com/instructure/instructure-ui/compare/v8.56.2...v8.56.3) (2024-09-18)
+
+**Note:** Version bump only for package @instructure/ui-date-input
+
+
+
+
+
 ## [8.56.2](https://github.com/instructure/instructure-ui/compare/v8.56.1...v8.56.2) (2024-08-06)
 
 **Note:** Version bump only for package @instructure/ui-date-input

package/es/DateInput/__new-tests__/DateInput.test.js

@@ -588,5 +588,27 @@ describe('<DateInput />', () => {
         expect(calendarDays).toHaveLength(42);
       });
     });
+    it('should change weekdays according to locale', async () => {
+      const onChange = jest.fn();
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        assistiveText: "Type a date or use arrow keys to navigate date picker.",
+        width: "20rem",
+        isInline: true,
+        value: '2023-11-23',
+        onChange: onChange,
+        currentDate: "2023-12-23",
+        disabledDates: ['2023-12-22', '2023-12-12', '2023-12-11'],
+        disabledDateErrorMessage: "disabled date",
+        invalidDateErrorMessage: "invalid date",
+        locale: "fr"
+      }));
+      const dateInput = screen.getByLabelText('Choose date');
+      fireEvent.click(dateInput);
+      const frenchMonday = screen.getByText('lu');
+      await waitFor(() => {
+        expect(typeof frenchMonday).toBe('object');
+      });
+    });
   });
 });

package/es/DateInput/index.js

@@ -153,7 +153,7 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
         } else {
           // @ts-expect-error TODO
           onChange(event, {
-            value: DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).subtract(1, 'day').format('MMMM D, YYYY')
+            value: DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).subtract(1, 'day').format('LL')
           });
           this.setState({
             messages: []
@@ -166,7 +166,7 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
         } else {
           // @ts-expect-error TODO
           onChange(event, {
-            value: DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).add(1, 'day').format('MMMM D, YYYY')
+            value: DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).add(1, 'day').format('LL')
           });
           this.setState({
             messages: []
@@ -261,6 +261,8 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
       currentDate = _this$props11.currentDate;
     const isValidDate = value ? DateTime.parse(value, this.locale(), this.timezone()).isValid() : false;
     const noChildrenProps = this.props.children ? {} : {
+      timezone: this.timezone(),
+      locale: this.locale(),
       disabledDates,
       currentDate,
       selectedDate: isValidDate ? value : void 0,
@@ -268,7 +270,7 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
       onDateSelected: (dateString, momentDate, e) => {
         // @ts-expect-error TODO
         onChange === null || onChange === void 0 ? void 0 : onChange(e, {
-          value: `${momentDate.format('MMMM')} ${momentDate.format('D')}, ${momentDate.format('YYYY')}`
+          value: momentDate.format('LL')
         });
         this.handleHideCalendar(e, dateString);
       }

package/lib/DateInput/__new-tests__/DateInput.test.js

@@ -590,5 +590,27 @@ describe('<DateInput />', () => {
         expect(calendarDays).toHaveLength(42);
       });
     });
+    it('should change weekdays according to locale', async () => {
+      const onChange = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateInput, {
+        renderLabel: "Choose date",
+        assistiveText: "Type a date or use arrow keys to navigate date picker.",
+        width: "20rem",
+        isInline: true,
+        value: '2023-11-23',
+        onChange: onChange,
+        currentDate: "2023-12-23",
+        disabledDates: ['2023-12-22', '2023-12-12', '2023-12-11'],
+        disabledDateErrorMessage: "disabled date",
+        invalidDateErrorMessage: "invalid date",
+        locale: "fr"
+      }));
+      const dateInput = _react2.screen.getByLabelText('Choose date');
+      _react2.fireEvent.click(dateInput);
+      const frenchMonday = _react2.screen.getByText('lu');
+      await (0, _react2.waitFor)(() => {
+        expect(typeof frenchMonday).toBe('object');
+      });
+    });
   });
 });

package/lib/DateInput/index.js

@@ -164,7 +164,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
         } else {
           // @ts-expect-error TODO
           onChange(event, {
-            value: _DateTime.DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).subtract(1, 'day').format('MMMM D, YYYY')
+            value: _DateTime.DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).subtract(1, 'day').format('LL')
           });
           this.setState({
             messages: []
@@ -177,7 +177,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
         } else {
           // @ts-expect-error TODO
           onChange(event, {
-            value: _DateTime.DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).add(1, 'day').format('MMMM D, YYYY')
+            value: _DateTime.DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).add(1, 'day').format('LL')
           });
           this.setState({
             messages: []
@@ -272,6 +272,8 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       currentDate = _this$props11.currentDate;
     const isValidDate = value ? _DateTime.DateTime.parse(value, this.locale(), this.timezone()).isValid() : false;
     const noChildrenProps = this.props.children ? {} : {
+      timezone: this.timezone(),
+      locale: this.locale(),
       disabledDates,
       currentDate,
       selectedDate: isValidDate ? value : void 0,
@@ -279,7 +281,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       onDateSelected: (dateString, momentDate, e) => {
         // @ts-expect-error TODO
         onChange === null || onChange === void 0 ? void 0 : onChange(e, {
-          value: `${momentDate.format('MMMM')} ${momentDate.format('D')}, ${momentDate.format('YYYY')}`
+          value: momentDate.format('LL')
         });
         this.handleHideCalendar(e, dateString);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "8.56.2",
+  "version": "8.56.4",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,29 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "8.56.2",
-    "@instructure/ui-babel-preset": "8.56.2",
-    "@instructure/ui-scripts": "8.56.2",
-    "@instructure/ui-test-utils": "8.56.2",
+    "@instructure/ui-axe-check": "8.56.4",
+    "@instructure/ui-babel-preset": "8.56.4",
+    "@instructure/ui-scripts": "8.56.4",
+    "@instructure/ui-test-utils": "8.56.4",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/emotion": "8.56.2",
-    "@instructure/ui-calendar": "8.56.2",
-    "@instructure/ui-form-field": "8.56.2",
-    "@instructure/ui-i18n": "8.56.2",
-    "@instructure/ui-icons": "8.56.2",
-    "@instructure/ui-popover": "8.56.2",
-    "@instructure/ui-position": "8.56.2",
-    "@instructure/ui-prop-types": "8.56.2",
-    "@instructure/ui-react-utils": "8.56.2",
-    "@instructure/ui-selectable": "8.56.2",
-    "@instructure/ui-testable": "8.56.2",
-    "@instructure/ui-text-input": "8.56.2",
-    "@instructure/ui-utils": "8.56.2",
+    "@instructure/emotion": "8.56.4",
+    "@instructure/ui-calendar": "8.56.4",
+    "@instructure/ui-form-field": "8.56.4",
+    "@instructure/ui-i18n": "8.56.4",
+    "@instructure/ui-icons": "8.56.4",
+    "@instructure/ui-popover": "8.56.4",
+    "@instructure/ui-position": "8.56.4",
+    "@instructure/ui-prop-types": "8.56.4",
+    "@instructure/ui-react-utils": "8.56.4",
+    "@instructure/ui-selectable": "8.56.4",
+    "@instructure/ui-testable": "8.56.4",
+    "@instructure/ui-text-input": "8.56.4",
+    "@instructure/ui-utils": "8.56.4",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/DateInput/__new-tests__/DateInput.test.tsx

@@ -842,5 +842,31 @@ describe('<DateInput />', () => {
         expect(calendarDays).toHaveLength(42)
       })
     })
+    it('should change weekdays according to locale', async () => {
+      const onChange = jest.fn()
+      render(
+        <DateInput
+          renderLabel="Choose date"
+          assistiveText="Type a date or use arrow keys to navigate date picker."
+          width="20rem"
+          isInline
+          value={'2023-11-23'}
+          onChange={onChange}
+          currentDate="2023-12-23"
+          disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
+          disabledDateErrorMessage="disabled date"
+          invalidDateErrorMessage="invalid date"
+          locale="fr"
+        ></DateInput>
+      )
+      const dateInput = screen.getByLabelText('Choose date')
+
+      fireEvent.click(dateInput)
+
+      const frenchMonday = screen.getByText('lu')
+      await waitFor(() => {
+        expect(typeof frenchMonday).toBe('object')
+      })
+    })
   })
 })

package/src/DateInput/index.tsx

@@ -265,7 +265,7 @@ class DateInput extends Component<DateInputProps, DateInputState> {
             this.timezone()
           )
             .subtract(1, 'day')
-            .format('MMMM D, YYYY')
+            .format('LL')
         })
         this.setState({ messages: [] })
       }
@@ -282,7 +282,7 @@ class DateInput extends Component<DateInputProps, DateInputState> {
             this.timezone()
           )
             .add(1, 'day')
-            .format('MMMM D, YYYY')
+            .format('LL')
         })
         this.setState({ messages: [] })
       }
@@ -341,6 +341,8 @@ class DateInput extends Component<DateInputProps, DateInputState> {
     const noChildrenProps = this.props.children
       ? {}
       : {
+          timezone: this.timezone(),
+          locale: this.locale(),
           disabledDates,
           currentDate,
           selectedDate: isValidDate ? value : undefined,
@@ -352,9 +354,7 @@ class DateInput extends Component<DateInputProps, DateInputState> {
           ) => {
             // @ts-expect-error TODO
             onChange?.(e, {
-              value: `${momentDate.format('MMMM')} ${momentDate.format(
-                'D'
-              )}, ${momentDate.format('YYYY')}`
+              value: momentDate.format('LL')
             })
             this.handleHideCalendar(e, dateString)
           }