Patch/invariant parse date

litmus/features/date/invariantParseDate.js

@@ -0,0 +1,31 @@
+import { Calendar, DateField, DateTimeField, MonthField, PureContainer, TimeField } from "cx/widgets";
+
+export default (
+   <cx>
+      <PureContainer
+         controller={{
+            onInit() {
+               this.store.set("date", "2024-12-13");
+               this.store.set("datetime", "2020-02-20");
+               this.store.set("time", "2024-11-10");
+               this.store.set("month", "2024-01-01");
+               this.store.set("calendar", "2022-12-31");
+               this.store.set("list", "2022-12-31");
+            },
+         }}
+      >
+         <div style="display: flex; flex-direction: column; gap: 20px">
+            <DateField value-bind="date" partial />
+            <DateTimeField value-bind="datetime" partial />
+            <TimeField value-bind="time" partial />
+            <MonthField value-bind="month" />
+
+            <Calendar value-bind="calendar" startWithMonday={false} />
+
+            <TimeField picker="list" value-bind="list" />
+            <div text-tpl="{date:date}" />
+            <div text-tpl="{time:time}" />
+         </div>
+      </PureContainer>
+   </cx>
+);

litmus/index.js

@@ -108,7 +108,8 @@ import "./index.scss";
 // import Demo from "./features/calendar";
 //import Demo from "./features/slider/SliderPreventDefault";
 //import Demo from "./features/validator/index";
-import Demo from "./bugs/1075-complex-column-resizing";
+// import Demo from "./bugs/1075-complex-column-resizing";
+import Demo from "./features/date/invariantParseDate";
 
 let store = (window.store = new Store());
 

packages/cx/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.5.0",
+   "version": "23.5.3",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

packages/cx/src/charts/axis/TimeAxis.js

@@ -4,12 +4,13 @@ import { Stack } from "./Stack";
 import { Format } from "../../ui/Format";
 import { isNumber } from "../../util/isNumber";
 import { zeroTime } from "../../util/date/zeroTime";
+import { parseDateInvariant } from "../../util";
 
 Format.registerFactory("yearOrMonth", (format) => {
    let year = Format.parse("datetime;yyyy");
    let month = Format.parse("datetime;MMM");
    return function (date) {
-      let d = new Date(date);
+      let d = parseDateInvariant(date);
       if (d.getMonth() == 0) return year(d);
       else return month(d);
    };
@@ -19,7 +20,7 @@ Format.registerFactory("monthOrDay", (format) => {
    let month = Format.parse("datetime;MMM");
    let day = Format.parse("datetime;dd");
    return function (date) {
-      let d = new Date(date);
+      let d = parseDateInvariant(date);
       if (d.getDate() == 1) return month(d);
       else return day(d);
    };
@@ -69,7 +70,7 @@ export class TimeAxis extends Axis {
          this.minTickUnit,
          lowerDeadZone,
          upperDeadZone,
-         this.decode
+         this.decode,
       );
    }
 
@@ -149,7 +150,7 @@ class TimeScale {
       minTickUnit,
       lowerDeadZone,
       upperDeadZone,
-      decode
+      decode,
    ) {
       this.dateCache = {};
       this.min = min != null ? this.decodeValue(min) : null;
@@ -180,12 +181,12 @@ class TimeScale {
             let v = this.dateCache[date];
             if (!v) {
                if (this.decode) date = this.decode(date);
-               v = this.dateCache[date] = Date.parse(date);
+               v = this.dateCache[date] = parseDateInvariant(date).getTime();
             }
             return v;
 
          case "number":
-            return date;
+            return parseDateInvariant(date).getTime();
       }
    }
 

packages/cx/src/ui/Format.js

@@ -1,89 +1,73 @@
-import {Culture} from "./Culture";
-import {Format as Fmt, resolveMinMaxFractionDigits} from "../util/Format";
-import {GlobalCacheIdentifier} from '../util/GlobalCacheIdentifier';
+import { parseDateInvariant } from "../util";
+import { Format as Fmt, resolveMinMaxFractionDigits } from "../util/Format";
+import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
+import { Culture } from "./Culture";
 
 export const Format = Fmt;
 
 let cultureSensitiveFormatsRegistered = false;
 
 export function enableCultureSensitiveFormatting() {
-
-   if (cultureSensitiveFormatsRegistered)
-      return;
+   if (cultureSensitiveFormatsRegistered) return;
 
    cultureSensitiveFormatsRegistered = true;
 
-   Fmt.registerFactory(
-      ['number', 'n'],
-      (format, minimumFractionDigits, maximumFractionDigits) => {
-         let culture = Culture.getNumberCulture();
-
-         let formatter = culture.getFormatter(resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits));
-
-         return value => formatter.format(value);
-      }
-   );
-
-   Fmt.registerFactory('currency',
-      (format, currency, minimumFractionDigits, maximumFractionDigits) => {
-         let culture = Culture.getNumberCulture();
-         currency = currency || Culture.defaultCurrency;
-
-         let formatter = culture.getFormatter({
-            style: 'currency',
-            currency: currency,
-            ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits)
-         });
-
-         return value => formatter.format(value);
-      }
-   );
-
-   Fmt.registerFactory(
-      ['percentage', 'p', '%'],
-      (format, minimumFractionDigits, maximumFractionDigits) => {
-         let culture = Culture.getNumberCulture();
-         let formatter = culture.getFormatter({
-            style: 'percent',
-            ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits)
-         });
-         return value => formatter.format(value);
-      }
-   );
-
-   Fmt.registerFactory(
-      ['percentSign', 'ps'],
-      (format, minimumFractionDigits, maximumFractionDigits) => {
-         let culture = Culture.getNumberCulture();
-         let formatter = culture.getFormatter({
-            style: 'percent',
-            ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits)
-         });
-         return value => formatter.format(value / 100);
-      }
-   );
-
-   Fmt.registerFactory(['date', 'd'], (fmt, format = 'yyyyMMdd') => {
+   Fmt.registerFactory(["number", "n"], (format, minimumFractionDigits, maximumFractionDigits) => {
+      let culture = Culture.getNumberCulture();
+
+      let formatter = culture.getFormatter(resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits));
+
+      return (value) => formatter.format(value);
+   });
+
+   Fmt.registerFactory("currency", (format, currency, minimumFractionDigits, maximumFractionDigits) => {
+      let culture = Culture.getNumberCulture();
+      currency = currency || Culture.defaultCurrency;
+
+      let formatter = culture.getFormatter({
+         style: "currency",
+         currency: currency,
+         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+      });
+
+      return (value) => formatter.format(value);
+   });
+
+   Fmt.registerFactory(["percentage", "p", "%"], (format, minimumFractionDigits, maximumFractionDigits) => {
+      let culture = Culture.getNumberCulture();
+      let formatter = culture.getFormatter({
+         style: "percent",
+         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+      });
+      return (value) => formatter.format(value);
+   });
+
+   Fmt.registerFactory(["percentSign", "ps"], (format, minimumFractionDigits, maximumFractionDigits) => {
+      let culture = Culture.getNumberCulture();
+      let formatter = culture.getFormatter({
+         style: "percent",
+         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+      });
+      return (value) => formatter.format(value / 100);
+   });
+
+   Fmt.registerFactory(["date", "d"], (fmt, format = "yyyyMMdd") => {
       let culture = Culture.getDateTimeCulture();
       let formatter = culture.getFormatter(format);
-      return value => formatter.format(new Date(value));
+      return (value) => formatter.format(parseDateInvariant(value));
    });
 
-
-   Fmt.registerFactory(['time', 't'], (fmt, format = 'hhmmss') => {
+   Fmt.registerFactory(["time", "t"], (fmt, format = "hhmmss") => {
       let culture = Culture.getDateTimeCulture();
       let formatter = culture.getFormatter(format);
-      return value => formatter.format(new Date(value));
+      return (value) => formatter.format(parseDateInvariant(value));
    });
 
-   Fmt.registerFactory(
-      ['datetime', 'dt'],
-      (fmt, format = 'yyyyMd hhmm') => {
-         let culture = Culture.getDateTimeCulture();
-         let formatter = culture.getFormatter(format);
-         return value => formatter.format(new Date(value));
-      }
-   );
+   Fmt.registerFactory(["datetime", "dt"], (fmt, format = "yyyyMd hhmm") => {
+      let culture = Culture.getDateTimeCulture();
+      let formatter = culture.getFormatter(format);
+      return (value) => formatter.format(new Date(value));
+   });
 
    GlobalCacheIdentifier.change();
 }