@itwin/components-react 4.0.0-dev.9 → 4.0.0

package/lib/esm/components-react/datepicker/DateField.d.ts

@@ -1,33 +1,33 @@
-/** @packageDocumentation
- * @module Date
- */
-/// <reference types="react" />
-import "./DateField.scss";
-import { AlternateDateFormats, DateFormatter, TimeDisplay } from "@itwin/appui-abstract";
-import { CommonProps } from "@itwin/core-react";
-/** Props for [[DateField]] Component.
- * @internal
- */
-export interface DateFieldProps extends CommonProps {
-    /** Defines initial date and time for component. */
-    initialDate: Date;
-    /** Function to call when the date or time is changed. */
-    onDateChange?: (day: Date) => void;
-    /** Optional value to define if edit field allows editing. If a DateFormatter is provided
-     * it must provide a parseData function or the field will be read only no matter the setting of this value. */
-    readOnly?: boolean;
-    /** Optional date formatter that produces an explicit date display */
-    dateFormatter?: DateFormatter;
-    /** This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. */
-    timeDisplay?: TimeDisplay;
-}
-/** Function to format a Date object that is used in control, type editor, and type converter
- * to produce a consistent formatted Date string.
- * @internal
- */
-export declare function formatInputDate(inputDate: Date, timeDisplay?: TimeDisplay, customFormatter?: DateFormatter, alternateDateFormat?: AlternateDateFormats): string | undefined;
-/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.
- * @internal
- */
-export declare function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }: DateFieldProps): JSX.Element;
+/** @packageDocumentation
+ * @module Date
+ */
+/// <reference types="react" />
+import "./DateField.scss";
+import { AlternateDateFormats, DateFormatter, TimeDisplay } from "@itwin/appui-abstract";
+import { CommonProps } from "@itwin/core-react";
+/** Props for [[DateField]] Component.
+ * @internal
+ */
+export interface DateFieldProps extends CommonProps {
+    /** Defines initial date and time for component. */
+    initialDate: Date;
+    /** Function to call when the date or time is changed. */
+    onDateChange?: (day: Date) => void;
+    /** Optional value to define if edit field allows editing. If a DateFormatter is provided
+     * it must provide a parseData function or the field will be read only no matter the setting of this value. */
+    readOnly?: boolean;
+    /** Optional date formatter that produces an explicit date display */
+    dateFormatter?: DateFormatter;
+    /** This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. */
+    timeDisplay?: TimeDisplay;
+}
+/** Function to format a Date object that is used in control, type editor, and type converter
+ * to produce a consistent formatted Date string.
+ * @internal
+ */
+export declare function formatInputDate(inputDate: Date, timeDisplay?: TimeDisplay, customFormatter?: DateFormatter, alternateDateFormat?: AlternateDateFormats): string | undefined;
+/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.
+ * @internal
+ */
+export declare function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }: DateFieldProps): JSX.Element;
 //# sourceMappingURL=DateField.d.ts.map

package/lib/esm/components-react/datepicker/DateField.js

@@ -1,130 +1,130 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Date
- */
-import "./DateField.scss";
-import * as React from "react";
-import classnames from "classnames";
-import { AlternateDateFormats, TimeDisplay } from "@itwin/appui-abstract";
-import { Input } from "@itwin/itwinui-react";
-import { Logger } from "@itwin/core-bentley";
-/** Function to format a Date object that is used in control, type editor, and type converter
- * to produce a consistent formatted Date string.
- * @internal
- */
-export function formatInputDate(inputDate, timeDisplay, customFormatter, alternateDateFormat) {
-    if (customFormatter) {
-        return customFormatter.formateDate(inputDate);
-    }
-    if (alternateDateFormat) {
-        switch (alternateDateFormat) {
-            case AlternateDateFormats.IsoDateTime:
-                return inputDate.toISOString();
-            case AlternateDateFormats.IsoShort:
-                return inputDate.toISOString().slice(0, 10);
-            case AlternateDateFormats.UtcDateTime:
-                return inputDate.toUTCString().slice(5);
-            case AlternateDateFormats.UtcShort:
-                return inputDate.toUTCString().slice(5, 16);
-            case AlternateDateFormats.UtcDateTimeWithDay:
-                return inputDate.toUTCString();
-            case AlternateDateFormats.UtcShortWithDay:
-                return inputDate.toUTCString().slice(0, 16);
-        }
-    }
-    else {
-        const dateString = inputDate.toLocaleDateString(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
-        let timeString = "";
-        if (timeDisplay) {
-            switch (timeDisplay) {
-                case TimeDisplay.H12MC:
-                    timeString = inputDate.toLocaleTimeString(undefined, { hour12: true, hour: "2-digit", minute: "2-digit" });
-                    break;
-                case TimeDisplay.H12MSC:
-                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: true, hour: "2-digit", minute: "2-digit", second: "2-digit" }));
-                    break;
-                case TimeDisplay.H24M:
-                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit" }));
-                    // istanbul ignore next
-                    if (timeString === "24:00")
-                        timeString = "00:00";
-                    break;
-                case TimeDisplay.H24MS:
-                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }));
-                    // istanbul ignore next
-                    if (timeString === "24:00:00")
-                        timeString = "00:00:00";
-                    break;
-            }
-        }
-        return timeString.length ? `${dateString}, ${timeString}` : dateString;
-    }
-}
-/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.
- * @internal
- */
-export function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }) {
-    const initialDateRef = React.useRef(initialDate);
-    const [hasBadInput, setHasBadInput] = React.useState(false);
-    const [inputValue, setInputValue] = React.useState(formatInputDate(initialDate, timeDisplay, dateFormatter));
-    // See if new initialDate props have changed since component mounted
-    React.useEffect(() => {
-        // istanbul ignore else
-        if (initialDate.getTime() !== initialDateRef.current.getTime()) {
-            initialDateRef.current = initialDate;
-        }
-        setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));
-    }, [initialDate, dateFormatter, timeDisplay]);
-    const handleInputChange = React.useCallback((event) => {
-        setInputValue(event.currentTarget.value);
-    }, []);
-    const parseDate = React.useCallback((dateString) => {
-        try {
-            if (dateFormatter && dateFormatter.parseDate)
-                return dateFormatter.parseDate(dateString);
-            const newDateValue = Date.parse(dateString);
-            // istanbul ignore else
-            if (newDateValue)
-                return new Date(newDateValue);
-        }
-        catch (_error) /* istanbul ignore next */ {
-            Logger.logInfo("DateField", `Encountered error parsing input value '${dateString}' as a date.`);
-            return undefined;
-        }
-        // istanbul ignore next
-        return undefined;
-    }, [dateFormatter]);
-    const updateInputDate = React.useCallback((dateString) => {
-        try {
-            const newDateValue = parseDate(dateString);
-            if (newDateValue) {
-                const newDate = new Date(newDateValue);
-                onDateChange && onDateChange(newDate);
-                setHasBadInput(false);
-            }
-            else {
-                setHasBadInput(true);
-            }
-        }
-        catch (_error) {
-            // istanbul ignore next
-            setHasBadInput(true);
-        }
-    }, [onDateChange, parseDate]);
-    const handleOnBlur = React.useCallback((event) => {
-        updateInputDate(event.target.value);
-    }, [updateInputDate]);
-    function onInputKeyDown(event) {
-        // istanbul ignore else
-        if (event.key === "Enter") {
-            updateInputDate(event.currentTarget.value);
-            event.preventDefault();
-        }
-    }
-    const classNames = classnames(className, "components-date-input", hasBadInput && "components-date-has-error");
-    return React.createElement(Input, { "data-testid": "components-date-input", style: style, className: classNames, onKeyDown: onInputKeyDown, onBlur: handleOnBlur, onChange: handleInputChange, value: inputValue, disabled: readOnly || (dateFormatter && !(dateFormatter.parseDate)), size: "small" });
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Date
+ */
+import "./DateField.scss";
+import * as React from "react";
+import classnames from "classnames";
+import { AlternateDateFormats, TimeDisplay } from "@itwin/appui-abstract";
+import { Input } from "@itwin/itwinui-react";
+import { Logger } from "@itwin/core-bentley";
+/** Function to format a Date object that is used in control, type editor, and type converter
+ * to produce a consistent formatted Date string.
+ * @internal
+ */
+export function formatInputDate(inputDate, timeDisplay, customFormatter, alternateDateFormat) {
+    if (customFormatter) {
+        return customFormatter.formateDate(inputDate);
+    }
+    if (alternateDateFormat) {
+        switch (alternateDateFormat) {
+            case AlternateDateFormats.IsoDateTime:
+                return inputDate.toISOString();
+            case AlternateDateFormats.IsoShort:
+                return inputDate.toISOString().slice(0, 10);
+            case AlternateDateFormats.UtcDateTime:
+                return inputDate.toUTCString().slice(5);
+            case AlternateDateFormats.UtcShort:
+                return inputDate.toUTCString().slice(5, 16);
+            case AlternateDateFormats.UtcDateTimeWithDay:
+                return inputDate.toUTCString();
+            case AlternateDateFormats.UtcShortWithDay:
+                return inputDate.toUTCString().slice(0, 16);
+        }
+    }
+    else {
+        const dateString = inputDate.toLocaleDateString(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
+        let timeString = "";
+        if (timeDisplay) {
+            switch (timeDisplay) {
+                case TimeDisplay.H12MC:
+                    timeString = inputDate.toLocaleTimeString(undefined, { hour12: true, hour: "2-digit", minute: "2-digit" });
+                    break;
+                case TimeDisplay.H12MSC:
+                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: true, hour: "2-digit", minute: "2-digit", second: "2-digit" }));
+                    break;
+                case TimeDisplay.H24M:
+                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit" }));
+                    // istanbul ignore next
+                    if (timeString === "24:00")
+                        timeString = "00:00";
+                    break;
+                case TimeDisplay.H24MS:
+                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }));
+                    // istanbul ignore next
+                    if (timeString === "24:00:00")
+                        timeString = "00:00:00";
+                    break;
+            }
+        }
+        return timeString.length ? `${dateString}, ${timeString}` : dateString;
+    }
+}
+/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.
+ * @internal
+ */
+export function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }) {
+    const initialDateRef = React.useRef(initialDate);
+    const [hasBadInput, setHasBadInput] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState(formatInputDate(initialDate, timeDisplay, dateFormatter));
+    // See if new initialDate props have changed since component mounted
+    React.useEffect(() => {
+        // istanbul ignore else
+        if (initialDate.getTime() !== initialDateRef.current.getTime()) {
+            initialDateRef.current = initialDate;
+        }
+        setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));
+    }, [initialDate, dateFormatter, timeDisplay]);
+    const handleInputChange = React.useCallback((event) => {
+        setInputValue(event.currentTarget.value);
+    }, []);
+    const parseDate = React.useCallback((dateString) => {
+        try {
+            if (dateFormatter && dateFormatter.parseDate)
+                return dateFormatter.parseDate(dateString);
+            const newDateValue = Date.parse(dateString);
+            // istanbul ignore else
+            if (newDateValue)
+                return new Date(newDateValue);
+        }
+        catch (_error) /* istanbul ignore next */ {
+            Logger.logInfo("DateField", `Encountered error parsing input value '${dateString}' as a date.`);
+            return undefined;
+        }
+        // istanbul ignore next
+        return undefined;
+    }, [dateFormatter]);
+    const updateInputDate = React.useCallback((dateString) => {
+        try {
+            const newDateValue = parseDate(dateString);
+            if (newDateValue) {
+                const newDate = new Date(newDateValue);
+                onDateChange && onDateChange(newDate);
+                setHasBadInput(false);
+            }
+            else {
+                setHasBadInput(true);
+            }
+        }
+        catch (_error) {
+            // istanbul ignore next
+            setHasBadInput(true);
+        }
+    }, [onDateChange, parseDate]);
+    const handleOnBlur = React.useCallback((event) => {
+        updateInputDate(event.target.value);
+    }, [updateInputDate]);
+    function onInputKeyDown(event) {
+        // istanbul ignore else
+        if (event.key === "Enter") {
+            updateInputDate(event.currentTarget.value);
+            event.preventDefault();
+        }
+    }
+    const classNames = classnames(className, "components-date-input", hasBadInput && "components-date-has-error");
+    return React.createElement(Input, { "data-testid": "components-date-input", style: style, className: classNames, onKeyDown: onInputKeyDown, onBlur: handleOnBlur, onChange: handleInputChange, value: inputValue, disabled: readOnly || (dateFormatter && !(dateFormatter.parseDate)), size: "small" });
+}
 //# sourceMappingURL=DateField.js.map

package/lib/esm/components-react/datepicker/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DateField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Date\r\n */\r\n\r\nimport \"./DateField.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { AlternateDateFormats, DateFormatter, TimeDisplay } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\n\r\n/** Props for [[DateField]] Component.\r\n * @internal\r\n */\r\nexport interface DateFieldProps extends CommonProps {\r\n  /** Defines initial date and time for component. */\r\n  initialDate: Date;\r\n  /** Function to call when the date or time is changed. */\r\n  onDateChange?: (day: Date) => void;\r\n  /** Optional value to define if edit field allows editing. If a DateFormatter is provided\r\n   * it must provide a parseData function or the field will be read only no matter the setting of this value. */\r\n  readOnly?: boolean;\r\n  /** Optional date formatter that produces an explicit date display */\r\n  dateFormatter?: DateFormatter;\r\n  /** This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. */\r\n  timeDisplay?: TimeDisplay;\r\n}\r\n\r\n/** Function to format a Date object that is used in control, type editor, and type converter\r\n * to produce a consistent formatted Date string.\r\n * @internal\r\n */\r\nexport function formatInputDate(inputDate: Date, timeDisplay?: TimeDisplay, customFormatter?: DateFormatter, alternateDateFormat?: AlternateDateFormats): string | undefined {\r\n  if (customFormatter) {\r\n    return customFormatter.formateDate(inputDate);\r\n  }\r\n\r\n  if (alternateDateFormat) {\r\n    switch (alternateDateFormat) {\r\n      case AlternateDateFormats.IsoDateTime:\r\n        return inputDate.toISOString();\r\n      case AlternateDateFormats.IsoShort:\r\n        return inputDate.toISOString().slice(0, 10);\r\n      case AlternateDateFormats.UtcDateTime:\r\n        return inputDate.toUTCString().slice(5);\r\n      case AlternateDateFormats.UtcShort:\r\n        return inputDate.toUTCString().slice(5, 16);\r\n      case AlternateDateFormats.UtcDateTimeWithDay:\r\n        return inputDate.toUTCString();\r\n      case AlternateDateFormats.UtcShortWithDay:\r\n        return inputDate.toUTCString().slice(0, 16);\r\n    }\r\n  } else {\r\n    const dateString = inputDate.toLocaleDateString(undefined, { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" });\r\n    let timeString: string = \"\";\r\n\r\n    if (timeDisplay) {\r\n      switch (timeDisplay) {\r\n        case TimeDisplay.H12MC:\r\n          timeString = inputDate.toLocaleTimeString(undefined, { hour12: true, hour: \"2-digit\", minute: \"2-digit\" });\r\n          break;\r\n        case TimeDisplay.H12MSC:\r\n          timeString = (inputDate.toLocaleTimeString(undefined, { hour12: true, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }));\r\n          break;\r\n        case TimeDisplay.H24M:\r\n          timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: \"2-digit\", minute: \"2-digit\" }));\r\n          // istanbul ignore next\r\n          if (timeString === \"24:00\")\r\n            timeString = \"00:00\";\r\n          break;\r\n        case TimeDisplay.H24MS:\r\n          timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }));\r\n          // istanbul ignore next\r\n          if (timeString === \"24:00:00\")\r\n            timeString = \"00:00:00\";\r\n          break;\r\n      }\r\n    }\r\n    return timeString.length ? `${dateString}, ${timeString}` : dateString;\r\n  }\r\n}\r\n\r\n/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.\r\n * @internal\r\n */\r\nexport function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }: DateFieldProps) {\r\n  const initialDateRef = React.useRef(initialDate);\r\n  const [hasBadInput, setHasBadInput] = React.useState(false);\r\n  const [inputValue, setInputValue] = React.useState(formatInputDate(initialDate, timeDisplay, dateFormatter));\r\n\r\n  // See if new initialDate props have changed since component mounted\r\n  React.useEffect(() => {\r\n    // istanbul ignore else\r\n    if (initialDate.getTime() !== initialDateRef.current.getTime()) {\r\n      initialDateRef.current = initialDate;\r\n    }\r\n    setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));\r\n  }, [initialDate, dateFormatter, timeDisplay]);\r\n\r\n  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\r\n    setInputValue(event.currentTarget.value);\r\n  }, []);\r\n\r\n  const parseDate = React.useCallback((dateString: string) => {\r\n    try {\r\n      if (dateFormatter && dateFormatter.parseDate)\r\n        return dateFormatter.parseDate(dateString);\r\n\r\n      const newDateValue = Date.parse(dateString);\r\n      // istanbul ignore else\r\n      if (newDateValue)\r\n        return new Date(newDateValue);\r\n    } catch (_error) /* istanbul ignore next */ {\r\n      Logger.logInfo(\"DateField\", `Encountered error parsing input value '${dateString}' as a date.`);\r\n      return undefined;\r\n    }\r\n    // istanbul ignore next\r\n    return undefined;\r\n  }, [dateFormatter]);\r\n\r\n  const updateInputDate = React.useCallback((dateString: string) => {\r\n    try {\r\n      const newDateValue = parseDate(dateString);\r\n      if (newDateValue) {\r\n        const newDate = new Date(newDateValue);\r\n        onDateChange && onDateChange(newDate);\r\n        setHasBadInput(false);\r\n      } else {\r\n        setHasBadInput(true);\r\n      }\r\n    } catch (_error) {\r\n      // istanbul ignore next\r\n      setHasBadInput(true);\r\n    }\r\n  }, [onDateChange, parseDate]);\r\n\r\n  const handleOnBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n    updateInputDate(event.target.value);\r\n  }, [updateInputDate]);\r\n\r\n  function onInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\r\n    // istanbul ignore else\r\n    if (event.key === \"Enter\") {\r\n      updateInputDate(event.currentTarget.value);\r\n      event.preventDefault();\r\n    }\r\n  }\r\n  const classNames = classnames(className, \"components-date-input\", hasBadInput && \"components-date-has-error\");\r\n  return <Input data-testid=\"components-date-input\" style={style} className={classNames} onKeyDown={onInputKeyDown} onBlur={handleOnBlur}\r\n    onChange={handleInputChange} value={inputValue} disabled={readOnly || (dateFormatter && !(dateFormatter.parseDate))} size=\"small\" />;\r\n}\r\n"]}
+{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DateField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Date\n */\n\nimport \"./DateField.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { AlternateDateFormats, DateFormatter, TimeDisplay } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport { Logger } from \"@itwin/core-bentley\";\n\n/** Props for [[DateField]] Component.\n * @internal\n */\nexport interface DateFieldProps extends CommonProps {\n  /** Defines initial date and time for component. */\n  initialDate: Date;\n  /** Function to call when the date or time is changed. */\n  onDateChange?: (day: Date) => void;\n  /** Optional value to define if edit field allows editing. If a DateFormatter is provided\n   * it must provide a parseData function or the field will be read only no matter the setting of this value. */\n  readOnly?: boolean;\n  /** Optional date formatter that produces an explicit date display */\n  dateFormatter?: DateFormatter;\n  /** This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. */\n  timeDisplay?: TimeDisplay;\n}\n\n/** Function to format a Date object that is used in control, type editor, and type converter\n * to produce a consistent formatted Date string.\n * @internal\n */\nexport function formatInputDate(inputDate: Date, timeDisplay?: TimeDisplay, customFormatter?: DateFormatter, alternateDateFormat?: AlternateDateFormats): string | undefined {\n  if (customFormatter) {\n    return customFormatter.formateDate(inputDate);\n  }\n\n  if (alternateDateFormat) {\n    switch (alternateDateFormat) {\n      case AlternateDateFormats.IsoDateTime:\n        return inputDate.toISOString();\n      case AlternateDateFormats.IsoShort:\n        return inputDate.toISOString().slice(0, 10);\n      case AlternateDateFormats.UtcDateTime:\n        return inputDate.toUTCString().slice(5);\n      case AlternateDateFormats.UtcShort:\n        return inputDate.toUTCString().slice(5, 16);\n      case AlternateDateFormats.UtcDateTimeWithDay:\n        return inputDate.toUTCString();\n      case AlternateDateFormats.UtcShortWithDay:\n        return inputDate.toUTCString().slice(0, 16);\n    }\n  } else {\n    const dateString = inputDate.toLocaleDateString(undefined, { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" });\n    let timeString: string = \"\";\n\n    if (timeDisplay) {\n      switch (timeDisplay) {\n        case TimeDisplay.H12MC:\n          timeString = inputDate.toLocaleTimeString(undefined, { hour12: true, hour: \"2-digit\", minute: \"2-digit\" });\n          break;\n        case TimeDisplay.H12MSC:\n          timeString = (inputDate.toLocaleTimeString(undefined, { hour12: true, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }));\n          break;\n        case TimeDisplay.H24M:\n          timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: \"2-digit\", minute: \"2-digit\" }));\n          // istanbul ignore next\n          if (timeString === \"24:00\")\n            timeString = \"00:00\";\n          break;\n        case TimeDisplay.H24MS:\n          timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }));\n          // istanbul ignore next\n          if (timeString === \"24:00:00\")\n            timeString = \"00:00:00\";\n          break;\n      }\n    }\n    return timeString.length ? `${dateString}, ${timeString}` : dateString;\n  }\n}\n\n/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.\n * @internal\n */\nexport function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }: DateFieldProps) {\n  const initialDateRef = React.useRef(initialDate);\n  const [hasBadInput, setHasBadInput] = React.useState(false);\n  const [inputValue, setInputValue] = React.useState(formatInputDate(initialDate, timeDisplay, dateFormatter));\n\n  // See if new initialDate props have changed since component mounted\n  React.useEffect(() => {\n    // istanbul ignore else\n    if (initialDate.getTime() !== initialDateRef.current.getTime()) {\n      initialDateRef.current = initialDate;\n    }\n    setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));\n  }, [initialDate, dateFormatter, timeDisplay]);\n\n  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    setInputValue(event.currentTarget.value);\n  }, []);\n\n  const parseDate = React.useCallback((dateString: string) => {\n    try {\n      if (dateFormatter && dateFormatter.parseDate)\n        return dateFormatter.parseDate(dateString);\n\n      const newDateValue = Date.parse(dateString);\n      // istanbul ignore else\n      if (newDateValue)\n        return new Date(newDateValue);\n    } catch (_error) /* istanbul ignore next */ {\n      Logger.logInfo(\"DateField\", `Encountered error parsing input value '${dateString}' as a date.`);\n      return undefined;\n    }\n    // istanbul ignore next\n    return undefined;\n  }, [dateFormatter]);\n\n  const updateInputDate = React.useCallback((dateString: string) => {\n    try {\n      const newDateValue = parseDate(dateString);\n      if (newDateValue) {\n        const newDate = new Date(newDateValue);\n        onDateChange && onDateChange(newDate);\n        setHasBadInput(false);\n      } else {\n        setHasBadInput(true);\n      }\n    } catch (_error) {\n      // istanbul ignore next\n      setHasBadInput(true);\n    }\n  }, [onDateChange, parseDate]);\n\n  const handleOnBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n    updateInputDate(event.target.value);\n  }, [updateInputDate]);\n\n  function onInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\n    // istanbul ignore else\n    if (event.key === \"Enter\") {\n      updateInputDate(event.currentTarget.value);\n      event.preventDefault();\n    }\n  }\n  const classNames = classnames(className, \"components-date-input\", hasBadInput && \"components-date-has-error\");\n  return <Input data-testid=\"components-date-input\" style={style} className={classNames} onKeyDown={onInputKeyDown} onBlur={handleOnBlur}\n    onChange={handleInputChange} value={inputValue} disabled={readOnly || (dateFormatter && !(dateFormatter.parseDate))} size=\"small\" />;\n}\n"]}

package/lib/esm/components-react/datepicker/DateField.scss

@@ -1,23 +1,23 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-
-.components-date-input {
-  width: auto;
-
-  &.components-date-has-error {
-    color: $buic-foreground-alert;
-  }
-
-  &.iui-input {
-    padding: $uicore-iui-input-padding;
-  }
-
-  &.iui-input[disabled] {
-    color: var(--buic-foreground-body);
-    opacity: 0.65;
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+
+.components-date-input {
+  width: auto;
+
+  &.components-date-has-error {
+    color: var(--iui-color-text-negative);
+  }
+
+  &.iui-input {
+    padding: $uicore-iui-input-padding;
+  }
+
+  &.iui-input[disabled] {
+    color: var(--buic-foreground-body);
+    opacity: 0.65;
+  }
 }

package/lib/esm/components-react/datepicker/DatePicker.d.ts

@@ -1,22 +1,22 @@
-/** @packageDocumentation
- * @module Date
- */
-/// <reference types="react" />
-import "./DatePicker.scss";
-/**
- * Props for [[DatePicker]] component.
- * @alpha
- */
-export interface DatePickerProps {
-    /** defines both date and time */
-    selected: Date;
-    /** function to call when date or time has changed */
-    onDateChange?: (day: Date) => void;
-    /** show focus outlines, useful for keyboard navigation */
-    showFocusOutline?: boolean;
-}
-/** DatePicker component. Show a month selector and a day calendar to select a specific date.
- * @alpha
- */
-export declare function DatePicker(props: DatePickerProps): JSX.Element;
+/** @packageDocumentation
+ * @module Date
+ */
+/// <reference types="react" />
+import "./DatePicker.scss";
+/**
+ * Props for [[DatePicker]] component.
+ * @alpha
+ */
+export interface DatePickerProps {
+    /** defines both date and time */
+    selected: Date;
+    /** function to call when date or time has changed */
+    onDateChange?: (day: Date) => void;
+    /** show focus outlines, useful for keyboard navigation */
+    showFocusOutline?: boolean;
+}
+/** DatePicker component. Show a month selector and a day calendar to select a specific date.
+ * @alpha
+ */
+export declare function DatePicker(props: DatePickerProps): JSX.Element;
 //# sourceMappingURL=DatePicker.d.ts.map

package/lib/esm/components-react/datepicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePicker.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAQH,OAAO,mBAAmB,CAAC;AAY3B;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,iCAAiC;IACjC,QAAQ,EAAE,IAAI,CAAC;IACf,qDAAqD;IACrD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAuLhD"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePicker.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AASH,OAAO,mBAAmB,CAAC;AAY3B;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,iCAAiC;IACjC,QAAQ,EAAE,IAAI,CAAC;IACf,qDAAqD;IACrD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAuLhD"}