[docs-app] feat(DateInput2Example): use date-fns formatter

packages/datetime2/package.json

@@ -40,8 +40,8 @@
         "@blueprintjs/popover2": "^1.4.0",
         "@blueprintjs/select": "^4.4.0",
         "classnames": "^2.2",
-        "date-fns": "2.22.1",
-        "date-fns-tz": "1.3.4",
+        "date-fns": "^2.28.0",
+        "date-fns-tz": "^1.3.4",
         "lodash-es": "^4.17.15",
         "tslib": "~2.3.1"
     },

packages/docs-app/package.json

@@ -31,6 +31,7 @@
         "chroma-js": "^2.1.0",
         "classnames": "^2.2",
         "core-js": "^3.21.1",
+        "date-fns": "^2.28.0",
         "dom4": "^2.1.5",
         "downloadjs": "^1.4.7",
         "lodash-es": "^4.17.15",

packages/docs-app/src/common/dateFormatSelector.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2022 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+
+import { Radio, RadioGroup } from "@blueprintjs/core";
+import { DateFormatProps } from "@blueprintjs/datetime";
+import { handleNumberChange } from "@blueprintjs/docs-theme";
+
+export interface DateFormatSelectorProps {
+    /** Format options */
+    formatOptions: DateFormatProps[];
+
+    /** Selected formatter. */
+    format: DateFormatProps;
+
+    /** The callback to fire when a new formatter is chosen. */
+    onChange: (format: DateFormatProps) => void;
+}
+
+export const DateFormatSelector: React.FC<DateFormatSelectorProps> = props => {
+    const handleChange = handleNumberChange(index => props.onChange(props.formatOptions[index]));
+    const value = props.formatOptions.indexOf(props.format);
+
+    return (
+        <RadioGroup label="Date format" onChange={handleChange} selectedValue={value}>
+            {props.formatOptions.map((format, index) => (
+                <Radio key={index} label={format.placeholder} value={index} />
+            ))}
+        </RadioGroup>
+    );
+};

packages/docs-app/src/examples/datetime-examples/common/momentFormats.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import moment from "moment";
+import * as React from "react";
+
+import { DateFormatProps } from "@blueprintjs/datetime";
+
+import { DateFormatSelector, DateFormatSelectorProps } from "../../../common/dateFormatSelector";
+
+export const MomentFormatSelector: React.FC<Omit<DateFormatSelectorProps, "formatOptions">> = props => {
+    return <DateFormatSelector formatOptions={MOMENT_FORMATS} {...props} />;
+};
+
+export const MOMENT_FORMATS: DateFormatProps[] = [
+    {
+        formatDate: date => date?.toLocaleDateString() ?? "",
+        parseDate: str => new Date(Date.parse(str)),
+        placeholder: "JS Date",
+    },
+    getMomentFormatter("MM/DD/YYYY"),
+    getMomentFormatter("YYYY-MM-DD"),
+    getMomentFormatter("YYYY-MM-DD HH:mm:ss"),
+];
+
+function getMomentFormatter(format: string): DateFormatProps {
+    return {
+        formatDate: date => moment(date).format(format),
+        parseDate: str => moment(str, format).toDate(),
+        placeholder: `${format} (moment)`,
+    };
+}

packages/docs-app/src/examples/datetime-examples/common/precisionSelect.tsx

@@ -19,7 +19,7 @@ import * as React from "react";
 import { Classes, HTMLSelect } from "@blueprintjs/core";
 import { TimePrecision } from "@blueprintjs/datetime";
 
-export interface IPrecisionSelectProps {
+export interface PrecisionSelectProps {
     /**
      * The precision-string option to display as selected.
      */
@@ -43,9 +43,9 @@ export interface IPrecisionSelectProps {
     label?: string;
 }
 
-export const PrecisionSelect: React.FC<IPrecisionSelectProps> = props => (
+export const PrecisionSelect: React.FC<PrecisionSelectProps> = props => (
     <label className={Classes.LABEL}>
-        {props.label || "Precision"}
+        {props.label ?? "Precision"}
         <HTMLSelect value={props.value} onChange={props.onChange}>
             {props.allowNone && <option value="none">None</option>}
             <option value={TimePrecision.MINUTE}>Minute</option>

packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx

@@ -20,8 +20,8 @@ import { H5, Position, Switch } from "@blueprintjs/core";
 import { DateFormatProps, DateInput, TimePrecision } from "@blueprintjs/datetime";
 import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 
-import { FORMATS, FormatSelect } from "./common/formatSelect";
 import { MomentDate } from "./common/momentDate";
+import { MOMENT_FORMATS, MomentFormatSelector } from "./common/momentFormats";
 import { PrecisionSelect } from "./common/precisionSelect";
 
 export interface IDateInputExampleState {
@@ -42,7 +42,7 @@ export class DateInputExample extends React.PureComponent<IExampleProps, IDateIn
         date: null,
         disabled: false,
         fill: false,
-        format: FORMATS[0],
+        format: MOMENT_FORMATS[0],
         reverseMonthAndYearMenus: false,
         shortcuts: false,
         showTimeArrowButtons: false,
@@ -57,7 +57,9 @@ export class DateInputExample extends React.PureComponent<IExampleProps, IDateIn
 
     private toggleFill = handleBooleanChange(fill => this.setState({ fill }));
 
-    private toggleReverseMenus = handleBooleanChange(reverse => this.setState({ reverseMonthAndYearMenus: reverse }));
+    private toggleReverseMenus = handleBooleanChange(reverseMonthAndYearMenus =>
+        this.setState({ reverseMonthAndYearMenus }),
+    );
 
     private toggleTimePrecision = handleValueChange((timePrecision: TimePrecision | "none") =>
         this.setState({ timePrecision: timePrecision === "none" ? undefined : timePrecision }),
@@ -93,7 +95,7 @@ export class DateInputExample extends React.PureComponent<IExampleProps, IDateIn
             closeOnSelection,
             disabled,
             fill,
-            reverseMonthAndYearMenus: reverse,
+            reverseMonthAndYearMenus,
             format,
             timePrecision,
             shortcuts,
@@ -106,8 +108,12 @@ export class DateInputExample extends React.PureComponent<IExampleProps, IDateIn
                 <Switch checked={shortcuts} label="Show shortcuts" onChange={this.toggleShortcuts} />
                 <Switch label="Disabled" checked={disabled} onChange={this.toggleDisabled} />
                 <Switch label="Fill" checked={fill} onChange={this.toggleFill} />
-                <Switch label="Reverse month and year menus" checked={reverse} onChange={this.toggleReverseMenus} />
-                <FormatSelect format={format} onChange={this.handleFormatChange} />
+                <Switch
+                    label="Reverse month and year menus"
+                    checked={reverseMonthAndYearMenus}
+                    onChange={this.toggleReverseMenus}
+                />
+                <MomentFormatSelector format={format} onChange={this.handleFormatChange} />
                 <PrecisionSelect
                     allowNone={true}
                     label="Time precision"

packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx

@@ -20,8 +20,8 @@ import { H5, Switch } from "@blueprintjs/core";
 import { DateFormatProps, DateRange, DateRangeInput, TimePrecision } from "@blueprintjs/datetime";
 import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-theme";
 
-import { FORMATS, FormatSelect } from "./common/formatSelect";
 import { MomentDateRange } from "./common/momentDate";
+import { MOMENT_FORMATS, MomentFormatSelector } from "./common/momentFormats";
 
 export interface IDateRangeInputExampleState {
     allowSingleDayRange: boolean;
@@ -45,7 +45,7 @@ export class DateRangeInputExample extends React.PureComponent<IExampleProps, ID
         contiguousCalendarMonths: true,
         disabled: false,
         enableTimePicker: false,
-        format: FORMATS[0],
+        format: MOMENT_FORMATS[0],
         range: [null, null],
         reverseMonthAndYearMenus: false,
         selectAllOnFocus: false,
@@ -146,7 +146,7 @@ export class DateRangeInputExample extends React.PureComponent<IExampleProps, ID
                     label="Show timepicker arrow buttons"
                     onChange={this.toggleTimepickerArrowButtons}
                 />
-                <FormatSelect key="Format" format={this.state.format} onChange={this.handleFormatChange} />
+                <MomentFormatSelector key="Format" format={this.state.format} onChange={this.handleFormatChange} />
             </>
         );
     }

packages/docs-app/src/examples/datetime2-examples/dateFnsFormatSelector.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2022 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { format, Locale, parse } from "date-fns";
+import * as React from "react";
+
+import { DateFormatProps } from "@blueprintjs/datetime";
+
+import { DateFormatSelector, DateFormatSelectorProps } from "../../common/dateFormatSelector";
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const locales: { [localeCode: string]: Locale } = require("date-fns/locale");
+
+export const DateFnsFormatSelector: React.FC<Omit<DateFormatSelectorProps, "formatOptions">> = props => {
+    return <DateFormatSelector formatOptions={DATE_FNS_FORMATS} {...props} />;
+};
+
+export const DATE_FNS_FORMATS: DateFormatProps[] = [
+    getDateFnsFormatter("MM/dd/yyyy"),
+    getDateFnsFormatter("yyyy-MM-dd"),
+    getDateFnsFormatter("yyyy-MM-dd HH:mm:ss"),
+    getDateFnsFormatter("LLL do, yyyy 'at' K:mm a"),
+];
+
+function getDateFnsFormatter(formatStr: string): DateFormatProps {
+    return {
+        formatDate: (date, localeCode) => format(date, formatStr, maybeGetLocaleOptions(localeCode)),
+        parseDate: (str, localeCode) => parse(str, formatStr, new Date(), maybeGetLocaleOptions(localeCode)),
+        placeholder: `${formatStr} (date-fns)`,
+    };
+}
+
+function maybeGetLocaleOptions(localeCode: string): { locale: Locale } | undefined {
+    if (locales[localeCode] !== undefined) {
+        return { locale: locales[localeCode] };
+    }
+    return undefined;
+}

packages/docs-app/src/examples/datetime2-examples/dateInput2Example.tsx

@@ -21,8 +21,8 @@ import { DateFormatProps, TimePrecision } from "@blueprintjs/datetime";
 import { DateInput2 } from "@blueprintjs/datetime2";
 import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 
-import { FORMATS, FormatSelect } from "../datetime-examples/common/formatSelect";
 import { PrecisionSelect } from "../datetime-examples/common/precisionSelect";
+import { DATE_FNS_FORMATS, DateFnsFormatSelector } from "./dateFnsFormatSelector";
 
 export interface DateInput2ExampleState {
     closeOnSelection: boolean;
@@ -44,7 +44,7 @@ export class DateInput2Example extends React.PureComponent<IExampleProps, DateIn
         disableTimezoneSelect: false,
         disabled: false,
         fill: false,
-        format: FORMATS[0],
+        format: DATE_FNS_FORMATS[0],
         reverseMonthAndYearMenus: false,
         shortcuts: false,
         showTimezoneSelect: true,
@@ -116,7 +116,7 @@ export class DateInput2Example extends React.PureComponent<IExampleProps, DateIn
                 <Switch label="Disabled" checked={disabled} onChange={this.toggleDisabled} />
                 <Switch label="Fill" checked={fill} onChange={this.toggleFill} />
                 <Switch label="Reverse month and year menus" checked={reverse} onChange={this.toggleReverseMenus} />
-                <FormatSelect format={format} onChange={this.handleFormatChange} />
+                <DateFnsFormatSelector format={format} onChange={this.handleFormatChange} />
 
                 <H5>Timezone props</H5>
                 <Switch

packages/docs-app/src/styles/_examples.scss

@@ -538,6 +538,16 @@
   }
 }
 
+//
+// DATETIME2
+//
+
+#{example("DateInput2Example")} {
+  .#{$ns}-input-group {
+    min-width: 300px;
+  }
+}
+
 //
 // TABLE
 //

packages/eslint-config/tslint.json

@@ -4,6 +4,7 @@
         "no-submodule-imports": {
             "options": [
                 "core-js",
+                "date-fns",
                 "react-dom",
                 "@blueprintjs/table/src",
                 "@blueprintjs/test-commons/bootstrap",

packages/tslint-config/index.js

@@ -51,6 +51,7 @@ module.exports = {
         "no-submodule-imports": {
             options: [
                 "core-js",
+                "date-fns",
                 "lodash",
                 "react-dom",
                 "@blueprintjs/table/src",