@instructure/ui-date-input 10.16.4-snapshot-5 → 10.16.4-snapshot-7

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.4-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.16.3...v10.16.4-snapshot-5) (2025-05-08)
+## [10.16.4-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.16.3...v10.16.4-snapshot-7) (2025-05-09)
 
-**Note:** Version bump only for package @instructure/ui-date-input
+
+### Bug Fixes
+
+* **ui-date-input:** correctly format the DateInput2 placeholder in every timezone ([f8229df](https://github.com/instructure/instructure-ui/commit/f8229df71ae6ad67fc089f7e1ff143842d7a0979))
 
 
 

package/es/DateInput2/index.js

@@ -191,21 +191,21 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
     }
     return date ? [formatDate(date), date.toISOString()] : ['', ''];
   };
-  const formatDate = date => {
+  const formatDate = (date, timeZone = getTimezone()) => {
     // use formatter function if provided
     if (typeof dateFormat !== 'string' && dateFormat !== null && dateFormat !== void 0 && dateFormat.formatter) {
       return dateFormat.formatter(date);
     }
     // if dateFormat set to a locale, use that, otherwise default to the user's locale
     return date.toLocaleDateString(typeof dateFormat === 'string' ? dateFormat : getLocale(), {
-      timeZone: getTimezone(),
+      timeZone,
       calendar: 'gregory',
       numberingSystem: 'latn'
     });
   };
-  const getDateFromatHint = () => {
+  const getDateFormatHint = () => {
     const exampleDate = new Date('2024-09-01');
-    const formattedDate = formatDate(exampleDate);
+    const formattedDate = formatDate(exampleDate, 'UTC'); // exampleDate is in UTC so format it as such
 
     // Create a regular expression to find the exact match of the number
     const regex = n => {
@@ -258,7 +258,7 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
     onBlur: handleBlur,
     isRequired: isRequired,
     value: value,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : getDateFromatHint(),
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : getDateFormatHint(),
     width: width,
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,

package/lib/DateInput2/index.js

@@ -201,21 +201,21 @@ const DateInput2 = exports.DateInput2 = /*#__PURE__*/(0, _react.forwardRef)(({
     }
     return date ? [formatDate(date), date.toISOString()] : ['', ''];
   };
-  const formatDate = date => {
+  const formatDate = (date, timeZone = getTimezone()) => {
     // use formatter function if provided
     if (typeof dateFormat !== 'string' && dateFormat !== null && dateFormat !== void 0 && dateFormat.formatter) {
       return dateFormat.formatter(date);
     }
     // if dateFormat set to a locale, use that, otherwise default to the user's locale
     return date.toLocaleDateString(typeof dateFormat === 'string' ? dateFormat : getLocale(), {
-      timeZone: getTimezone(),
+      timeZone,
       calendar: 'gregory',
       numberingSystem: 'latn'
     });
   };
-  const getDateFromatHint = () => {
+  const getDateFormatHint = () => {
     const exampleDate = new Date('2024-09-01');
-    const formattedDate = formatDate(exampleDate);
+    const formattedDate = formatDate(exampleDate, 'UTC'); // exampleDate is in UTC so format it as such
 
     // Create a regular expression to find the exact match of the number
     const regex = n => {
@@ -268,7 +268,7 @@ const DateInput2 = exports.DateInput2 = /*#__PURE__*/(0, _react.forwardRef)(({
     onBlur: handleBlur,
     isRequired: isRequired,
     value: value,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : getDateFromatHint(),
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : getDateFormatHint(),
     width: width,
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "10.16.4-snapshot-5",
+  "version": "10.16.4-snapshot-7",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.16.4-snapshot-5",
-    "@instructure/ui-babel-preset": "10.16.4-snapshot-5",
-    "@instructure/ui-buttons": "10.16.4-snapshot-5",
-    "@instructure/ui-scripts": "10.16.4-snapshot-5",
-    "@instructure/ui-test-utils": "10.16.4-snapshot-5",
+    "@instructure/ui-axe-check": "10.16.4-snapshot-7",
+    "@instructure/ui-babel-preset": "10.16.4-snapshot-7",
+    "@instructure/ui-buttons": "10.16.4-snapshot-7",
+    "@instructure/ui-scripts": "10.16.4-snapshot-7",
+    "@instructure/ui-test-utils": "10.16.4-snapshot-7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -35,20 +35,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.16.4-snapshot-5",
-    "@instructure/shared-types": "10.16.4-snapshot-5",
-    "@instructure/ui-calendar": "10.16.4-snapshot-5",
-    "@instructure/ui-form-field": "10.16.4-snapshot-5",
-    "@instructure/ui-i18n": "10.16.4-snapshot-5",
-    "@instructure/ui-icons": "10.16.4-snapshot-5",
-    "@instructure/ui-popover": "10.16.4-snapshot-5",
-    "@instructure/ui-position": "10.16.4-snapshot-5",
-    "@instructure/ui-prop-types": "10.16.4-snapshot-5",
-    "@instructure/ui-react-utils": "10.16.4-snapshot-5",
-    "@instructure/ui-selectable": "10.16.4-snapshot-5",
-    "@instructure/ui-testable": "10.16.4-snapshot-5",
-    "@instructure/ui-text-input": "10.16.4-snapshot-5",
-    "@instructure/ui-utils": "10.16.4-snapshot-5",
+    "@instructure/emotion": "10.16.4-snapshot-7",
+    "@instructure/shared-types": "10.16.4-snapshot-7",
+    "@instructure/ui-calendar": "10.16.4-snapshot-7",
+    "@instructure/ui-form-field": "10.16.4-snapshot-7",
+    "@instructure/ui-i18n": "10.16.4-snapshot-7",
+    "@instructure/ui-icons": "10.16.4-snapshot-7",
+    "@instructure/ui-popover": "10.16.4-snapshot-7",
+    "@instructure/ui-position": "10.16.4-snapshot-7",
+    "@instructure/ui-prop-types": "10.16.4-snapshot-7",
+    "@instructure/ui-react-utils": "10.16.4-snapshot-7",
+    "@instructure/ui-selectable": "10.16.4-snapshot-7",
+    "@instructure/ui-testable": "10.16.4-snapshot-7",
+    "@instructure/ui-text-input": "10.16.4-snapshot-7",
+    "@instructure/ui-utils": "10.16.4-snapshot-7",
     "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1"
   },

package/src/DateInput2/index.tsx

@@ -224,7 +224,10 @@ const DateInput2 = forwardRef(
       return date ? [formatDate(date), date.toISOString()] : ['', '']
     }
 
-    const formatDate = (date: Date): string => {
+    const formatDate = (
+      date: Date,
+      timeZone: string = getTimezone()
+    ): string => {
       // use formatter function if provided
       if (typeof dateFormat !== 'string' && dateFormat?.formatter) {
         return dateFormat.formatter(date)
@@ -233,16 +236,16 @@ const DateInput2 = forwardRef(
       return date.toLocaleDateString(
         typeof dateFormat === 'string' ? dateFormat : getLocale(),
         {
-          timeZone: getTimezone(),
+          timeZone,
           calendar: 'gregory',
           numberingSystem: 'latn'
         }
       )
     }
 
-    const getDateFromatHint = () => {
+    const getDateFormatHint = () => {
       const exampleDate = new Date('2024-09-01')
-      const formattedDate = formatDate(exampleDate)
+      const formattedDate = formatDate(exampleDate, 'UTC') // exampleDate is in UTC so format it as such
 
       // Create a regular expression to find the exact match of the number
       const regex = (n: string) => {
@@ -300,7 +303,7 @@ const DateInput2 = forwardRef(
         onBlur={handleBlur}
         isRequired={isRequired}
         value={value}
-        placeholder={placeholder ?? getDateFromatHint()}
+        placeholder={placeholder ?? getDateFormatHint()}
         width={width}
         display={isInline ? 'inline-block' : 'block'}
         messages={inputMessages}