@instructure/ui-date-input 8.56.3 → 8.56.5-pr-snapshot-1728655013879

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.5-pr-snapshot-1728655013879](https://github.com/instructure/instructure-ui/compare/v8.56.4...v8.56.5-pr-snapshot-1728655013879) (2024-10-11)
+
+**Note:** Version bump only for package @instructure/ui-date-input
+
+
+
+
+
+## [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

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

@@ -6,8 +6,8 @@ var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yTests");
-var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
-var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
+var _uiAxeCheck = require("@instructure/ui-axe-check");
+var _uiCalendar = require("@instructure/ui-calendar");
 var _DateInput = _interopRequireDefault(require("../__examples__/DateInput.examples"));
 var _index = require("../index");
 var _Calendar$Day, _button, _button2, _Calendar$Day2, _Calendar$Day3;
@@ -37,11 +37,11 @@ var _Calendar$Day, _button, _button2, _Calendar$Day2, _Calendar$Day3;
 // eslint-disable-next-line no-restricted-imports
 describe('<DateInput />', () => {
   const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-  const generateDays = (count = _Calendar.Calendar.DAY_COUNT) => {
+  const generateDays = (count = _uiCalendar.Calendar.DAY_COUNT) => {
     const days = [];
     const date = new Date('2019-07-28');
     while (days.length < count) {
-      days.push( /*#__PURE__*/_react.default.createElement(_Calendar.Calendar.Day, {
+      days.push( /*#__PURE__*/_react.default.createElement(_uiCalendar.Calendar.Day, {
         key: date.toISOString(),
         date: date.toISOString(),
         label: date.toISOString()
@@ -429,7 +429,7 @@ describe('<DateInput />', () => {
         const onRequestHideCalendar = jest.fn();
         const onRequestValidateDate = jest.fn();
         const days = generateDays();
-        days[4] = _Calendar$Day || (_Calendar$Day = /*#__PURE__*/_react.default.createElement(_Calendar.Calendar.Day, {
+        days[4] = _Calendar$Day || (_Calendar$Day = /*#__PURE__*/_react.default.createElement(_uiCalendar.Calendar.Day, {
           key: "4",
           label: "4",
           date: "2019-09-28",
@@ -502,7 +502,7 @@ describe('<DateInput />', () => {
     });
     it('should render days with the correct role', async () => {
       const days = generateDays();
-      days[5] = _Calendar$Day2 || (_Calendar$Day2 = /*#__PURE__*/_react.default.createElement(_Calendar.Calendar.Day, {
+      days[5] = _Calendar$Day2 || (_Calendar$Day2 = /*#__PURE__*/_react.default.createElement(_uiCalendar.Calendar.Day, {
         key: "5",
         label: "5",
         date: "2019-09-28",
@@ -526,7 +526,7 @@ describe('<DateInput />', () => {
     });
     it('should assign aria-selected to the selected date and link it to the input', async () => {
       const days = generateDays();
-      days[7] = _Calendar$Day3 || (_Calendar$Day3 = /*#__PURE__*/_react.default.createElement(_Calendar.Calendar.Day, {
+      days[7] = _Calendar$Day3 || (_Calendar$Day3 = /*#__PURE__*/_react.default.createElement(_uiCalendar.Calendar.Day, {
         key: "7",
         label: "7",
         date: "2019-09-28",
@@ -560,7 +560,7 @@ describe('<DateInput />', () => {
     }) => {
       const _render7 = (0, _react2.render)(content),
         container = _render7.container;
-      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      const axeCheck = await (0, _uiAxeCheck.runAxeCheck)(container);
       expect(axeCheck).toBe(true);
     });
   });
@@ -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

@@ -8,19 +8,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DateInput = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
-var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/IconCalendarMonthLine.js");
-var _Popover = require("@instructure/ui-popover/lib/Popover");
-var _Selectable = require("@instructure/ui-selectable/lib/Selectable");
-var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
-var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
-var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
-var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
-var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
-var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
+var _uiCalendar = require("@instructure/ui-calendar");
+var _uiIcons = require("@instructure/ui-icons");
+var _uiPopover = require("@instructure/ui-popover");
+var _uiSelectable = require("@instructure/ui-selectable");
+var _uiTextInput = require("@instructure/ui-text-input");
+var _uiUtils = require("@instructure/ui-utils");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiTestable = require("@instructure/ui-testable");
+var _uiI18n = require("@instructure/ui-i18n");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _props2 = require("./props");
@@ -58,7 +54,7 @@ category: components
 The `DateInput` component provides a visual interface for inputting date data.
 See <https://instructure.design/#DateInput/>
 **/
-let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class DateInput extends _react.Component {
+let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_class2 = class DateInput extends _react.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -109,7 +105,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       const messages = [];
       // check if date is enabled
       const disabledDates = this.props.disabledDates;
-      if (typeof disabledDates === 'function' && disabledDates(date) || Array.isArray(disabledDates) && disabledDates.find(dateString => _DateTime.DateTime.parse(dateString, this.locale(), this.timezone()).isSame(_DateTime.DateTime.parse(date, this.locale(), this.timezone()), 'day'))) {
+      if (typeof disabledDates === 'function' && disabledDates(date) || Array.isArray(disabledDates) && disabledDates.find(dateString => _uiI18n.DateTime.parse(dateString, this.locale(), this.timezone()).isSame(_uiI18n.DateTime.parse(date, this.locale(), this.timezone()), 'day'))) {
         messages.push(typeof disabledDateErrorMessage === 'function' ? disabledDateErrorMessage(date) : {
           type: 'error',
           text: disabledDateErrorMessage
@@ -117,7 +113,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       }
 
       // check if date is valid
-      if (!_DateTime.DateTime.parse(date, this.locale(), this.timezone(), [_DateTime.DateTime.momentISOFormat, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], true).isValid()) {
+      if (!_uiI18n.DateTime.parse(date, this.locale(), this.timezone(), [_uiI18n.DateTime.momentISOFormat, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], true).isValid()) {
         messages.push(typeof invalidDateErrorMessage === 'function' ? invalidDateErrorMessage(date) : {
           type: 'error',
           text: invalidDateErrorMessage
@@ -157,14 +153,14 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
         onChange = _this$props7.onChange,
         value = _this$props7.value,
         currentDate = _this$props7.currentDate;
-      const isValueValid = value && _DateTime.DateTime.parse(value, this.locale(), this.timezone()).isValid();
+      const isValueValid = value && _uiI18n.DateTime.parse(value, this.locale(), this.timezone()).isValid();
       if (direction === -1) {
         if (onRequestSelectPrevDay) {
           onRequestSelectPrevDay === null || onRequestSelectPrevDay === void 0 ? void 0 : onRequestSelectPrevDay(event);
         } 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: _uiI18n.DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).subtract(1, 'day').format('LL')
           });
           this.setState({
             messages: []
@@ -177,7 +173,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: _uiI18n.DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).add(1, 'day').format('LL')
           });
           this.setState({
             messages: []
@@ -193,7 +189,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
     } else if (this.context && this.context.locale) {
       return this.context.locale;
     }
-    return _Locale.Locale.browserLocale();
+    return _uiI18n.Locale.browserLocale();
   }
   timezone() {
     if (this.props.timezone) {
@@ -201,7 +197,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
     } else if (this.context && this.context.timezone) {
       return this.context.timezone;
     }
-    return _DateTime.DateTime.browserTimeZone();
+    return _uiI18n.DateTime.browserTimeZone();
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props8;
@@ -224,7 +220,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
     return selectedDateId;
   }
   get interaction() {
-    return (0, _getInteraction.getInteraction)({
+    return (0, _uiReactUtils.getInteraction)({
       props: this.props
     });
   }
@@ -233,7 +229,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       renderPrevMonthButton = _this$props10.renderPrevMonthButton,
       renderNextMonthButton = _this$props10.renderNextMonthButton;
     const button = type === 'prev' ? renderPrevMonthButton : renderNextMonthButton;
-    return button && (0, _safeCloneElement.safeCloneElement)((0, _callRenderProp.callRenderProp)(button), {
+    return button && (0, _uiReactUtils.safeCloneElement)((0, _uiReactUtils.callRenderProp)(button), {
       tabIndex: -1
     });
   }
@@ -254,7 +250,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
         onClick: optionProps.onClick,
         role: 'presentation'
       } : optionProps;
-      return (0, _safeCloneElement.safeCloneElement)(day, propsAdded);
+      return (0, _uiReactUtils.safeCloneElement)(day, propsAdded);
     });
   }
   renderCalendar({
@@ -270,8 +266,10 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       onChange = _this$props11.onChange,
       disabledDates = _this$props11.disabledDates,
       currentDate = _this$props11.currentDate;
-    const isValidDate = value ? _DateTime.DateTime.parse(value, this.locale(), this.timezone()).isValid() : false;
+    const isValidDate = value ? _uiI18n.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,12 +277,12 @@ 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);
       }
     };
-    return (0, _emotion.jsx)(_Calendar.Calendar, Object.assign({}, getListProps({
+    return (0, _emotion.jsx)(_uiCalendar.Calendar, Object.assign({}, getListProps({
       onRequestRenderNextMonth,
       onRequestRenderPrevMonth,
       renderNavigationLabel,
@@ -320,8 +318,8 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       ref = _getTriggerProps.ref,
       triggerProps = (0, _objectWithoutProperties2.default)(_getTriggerProps, _excluded2);
     const messages = this.props.messages || this.state.messages;
-    return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, triggerProps, (0, _passthroughProps.passthroughProps)(rest), getInputProps({
-      renderLabel: (0, _callRenderProp.callRenderProp)(renderLabel),
+    return (0, _emotion.jsx)(_uiTextInput.TextInput, Object.assign({}, triggerProps, (0, _uiReactUtils.passthroughProps)(rest), getInputProps({
+      renderLabel: (0, _uiReactUtils.callRenderProp)(renderLabel),
       value,
       placeholder,
       size,
@@ -329,12 +327,12 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       width,
       messages,
       onChange: this.handleInputChange,
-      onBlur: (0, _createChainedFunction.createChainedFunction)(onBlur, this.handleHideCalendar),
-      inputRef: (0, _createChainedFunction.createChainedFunction)(ref, this.handleInputRef),
+      onBlur: (0, _uiUtils.createChainedFunction)(onBlur, this.handleHideCalendar),
+      inputRef: (0, _uiUtils.createChainedFunction)(ref, this.handleInputRef),
       interaction,
       isRequired,
       display: isInline ? 'inline-block' : 'block',
-      renderAfterInput: _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, {
+      renderAfterInput: _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_uiIcons.IconCalendarMonthLine, {
         inline: false
       }))
     }), {
@@ -356,7 +354,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       assistiveText = _this$props13.assistiveText,
       styles = _this$props13.styles;
     const isShowingCalendar = this.shouldShowCalendar();
-    return (0, _emotion.jsx)(_Selectable.Selectable, {
+    return (0, _emotion.jsx)(_uiSelectable.Selectable, {
       isShowingOptions: isShowingCalendar,
       onRequestShowOptions: this.handleShowCalendar,
       onRequestHideOptions: this.handleHideCalendar,
@@ -380,7 +378,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       getTriggerProps
     }), (0, _emotion.jsx)("span", Object.assign({}, getDescriptionProps(), {
       css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
-    }), assistiveText), (0, _emotion.jsx)(_Popover.Popover, {
+    }), assistiveText), (0, _emotion.jsx)(_uiPopover.Popover, {
       placement: placement,
       isShowingContent: isShowingCalendar,
       positionTarget: this._input,
@@ -391,7 +389,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       getOptionProps
     }))));
   }
-}, _class2.displayName = "DateInput", _class2.componentId = 'DateInput', _class2.Day = _Calendar.Calendar.Day, _class2.propTypes = _props2.propTypes, _class2.allowedProps = _props2.allowedProps, _class2.defaultProps = {
+}, _class2.displayName = "DateInput", _class2.componentId = 'DateInput', _class2.Day = _uiCalendar.Calendar.Day, _class2.propTypes = _props2.propTypes, _class2.allowedProps = _props2.allowedProps, _class2.defaultProps = {
   value: '',
   size: 'medium',
   onBlur: () => {},

package/lib/DateInput/props.js

@@ -6,11 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.propTypes = exports.allowedProps = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
-var _Children = require("@instructure/ui-prop-types/lib/Children.js");
-var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
-var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
-var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
+var _uiPropTypes = require("@instructure/ui-prop-types");
+var _uiFormField = require("@instructure/ui-form-field");
+var _uiPosition = require("@instructure/ui-position");
+var _uiCalendar = require("@instructure/ui-calendar");
 /*
  * The MIT License (MIT)
  *
@@ -37,7 +36,7 @@ var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
 
 const propTypes = exports.propTypes = {
   renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-  value: (0, _controllable.controllable)(_propTypes.default.string),
+  value: (0, _uiPropTypes.controllable)(_propTypes.default.string),
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   placeholder: _propTypes.default.string,
   onChange: _propTypes.default.func,
@@ -50,8 +49,8 @@ const propTypes = exports.propTypes = {
   width: _propTypes.default.string,
   display: _propTypes.default.oneOf(['inline-block', 'block']),
   inputRef: _propTypes.default.func,
-  messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-  placement: _PositionPropTypes.PositionPropTypes.placement,
+  messages: _propTypes.default.arrayOf(_uiFormField.FormPropTypes.message),
+  placement: _uiPosition.PositionPropTypes.placement,
   isShowingCalendar: _propTypes.default.bool,
   onRequestValidateDate: _propTypes.default.func,
   onRequestShowCalendar: _propTypes.default.func,
@@ -64,7 +63,7 @@ const propTypes = exports.propTypes = {
   renderWeekdayLabels: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])),
   renderNextMonthButton: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   renderPrevMonthButton: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-  children: _Children.Children.oneOf([_Calendar.Calendar.Day]),
+  children: _uiPropTypes.Children.oneOf([_uiCalendar.Calendar.Day]),
   disabledDates: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func]),
   currentDate: _propTypes.default.string,
   disabledDateErrorMessage: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "8.56.3",
+  "version": "8.56.5-pr-snapshot-1728655013879",
   "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.3",
-    "@instructure/ui-babel-preset": "8.56.3",
-    "@instructure/ui-scripts": "8.56.3",
-    "@instructure/ui-test-utils": "8.56.3",
+    "@instructure/ui-axe-check": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-babel-preset": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-scripts": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-test-utils": "8.56.5-pr-snapshot-1728655013879",
     "@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.3",
-    "@instructure/ui-calendar": "8.56.3",
-    "@instructure/ui-form-field": "8.56.3",
-    "@instructure/ui-i18n": "8.56.3",
-    "@instructure/ui-icons": "8.56.3",
-    "@instructure/ui-popover": "8.56.3",
-    "@instructure/ui-position": "8.56.3",
-    "@instructure/ui-prop-types": "8.56.3",
-    "@instructure/ui-react-utils": "8.56.3",
-    "@instructure/ui-selectable": "8.56.3",
-    "@instructure/ui-testable": "8.56.3",
-    "@instructure/ui-text-input": "8.56.3",
-    "@instructure/ui-utils": "8.56.3",
+    "@instructure/emotion": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-calendar": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-form-field": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-i18n": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-icons": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-popover": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-position": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-prop-types": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-react-utils": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-selectable": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-testable": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-text-input": "8.56.5-pr-snapshot-1728655013879",
+    "@instructure/ui-utils": "8.56.5-pr-snapshot-1728655013879",
     "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)
           }