Fix DateInput

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 # 0.14.5 UNRELEASED
 
+### Fixed
+
+- for Date components:
+  - enable date parsing based on the valueFormat
+  - locale now works with persistence and on first render
+  - This PR #314 is based on #265 - Thanks for your contribution @albavilanova
+
 ### Added
 
 - New components

src/ts/components/dates/DateInput.tsx

@@ -13,6 +13,9 @@ import { PopoverProps } from "props/popover";
 import { StylesApiProps } from "props/styles";
 import React, { useState } from "react";
 import { dateToString, isDisabled, stringToDate } from "../../utils/dates";
+import dayjs from "dayjs";
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+dayjs.extend(customParseFormat);
 
 interface Props
     extends DashBaseProps,

src/ts/components/dates/DatesProvider.tsx

@@ -4,6 +4,7 @@ import {
 } from "@mantine/dates";
 import dayjs from "dayjs";
 import React, { useEffect } from "react";
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 
 interface Props extends DatesProviderProps {
     /** Unique ID to identify this component in Dash callbacks. */
@@ -17,12 +18,11 @@ const DatesProvider = (props: Props) => {
     const { settings, children, setProps, ...others } = props;
     const { locale } = settings;
 
-    useEffect(() => {
-        const localeObject = window[`dayjs_locale_${locale}`];
-        if (localeObject) {
-            dayjs.locale(locale, localeObject);
-        }
-    }, [locale]);
+    const localeObject = window[`dayjs_locale_${locale}`];
+    if (localeObject) {
+        dayjs.locale(locale, localeObject);
+        dayjs.extend(customParseFormat);
+    }
 
     return (
         <MantineDatesProvider settings={settings} {...others}>
@@ -33,4 +33,4 @@ const DatesProvider = (props: Props) => {
 
 DatesProvider.defaultProps = {};
 
-export default DatesProvider;
+export default DatesProvider;

usage-265/dateparser.py

@@ -0,0 +1,40 @@
+
+import dash_mantine_components as dmc
+from dash import Dash, _dash_renderer
+
+_dash_renderer._set_react_version("18.2.0")
+
+
+app = Dash(external_stylesheets=dmc.styles.ALL)
+
+
+date_picker = dmc.DateInput(
+    id="date-input-308-2",
+    clearable=True,
+    valueFormat="DD/MM/YYYY",
+    value="2022-10=15",
+    label = "Date input format DD/MM/YYYY",
+    placeholder = "Date input DD/MM/YYYY"
+)
+
+
+date_picker2 = dmc.DateInput(
+    id="date-input-308",
+    clearable=False,
+    valueFormat="DD/MM/YYYY HH:mm:ss",
+    value="2022-10=15",
+    label = "Date input format DD/MM/YYYY HH:mm:ss",
+    placeholder = "Date input DD/MM/YYYY HH:mm:ss"
+)
+
+app.layout = dmc.MantineProvider(dmc.Box([
+    dmc.Text("Issue #308 and #249 - ability to enter date and time according to valueFormat"),
+    dmc.Text("Note - The entire date needs to be entered before the parser works correctly"),
+    dmc.Text("Note - the DateProvider is not necessary", pb=20),
+    date_picker,
+    date_picker2
+],p=20))
+
+if __name__ == "__main__":
+    app.run(debug=True)
+

usage-265/locale-date-names.py

@@ -0,0 +1,31 @@
+
+import dash_mantine_components as dmc
+from dash import Dash, _dash_renderer, Input, Output
+_dash_renderer._set_react_version("18.2.0")
+
+scripts = [
+    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js",
+    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/locale/fr.min.js",
+]
+app = Dash(external_scripts=scripts, external_stylesheets=dmc.styles.ALL)
+
+
+date_picker = dmc.DateInput(
+    id="date-input-203=c",
+    clearable=True,
+    valueFormat="YYYY-MMMM-DD",
+    label = "Date input YYYY-MMMM-DD",
+    placeholder = "Date input",
+    value="2024-01-15",
+    pt=10
+)
+
+app.layout = dmc.MantineProvider(dmc.Box([
+    dmc.Text("Localization (French) should appear at start - issue#203"),
+    dmc.Text("Try changing month in input to 'avril'. Should be able to type month in French,  Note - it's necessary to include accents.  issue#264"),
+    dmc.DatesProvider(date_picker, settings={"locale": "fr"})
+], p=20))
+
+if __name__ == "__main__":
+    app.run(debug=True)
+

usage-265/locale-persistence.py

@@ -0,0 +1,31 @@
+
+import dash_mantine_components as dmc
+from dash import Dash, _dash_renderer, Input, Output
+_dash_renderer._set_react_version("18.2.0")
+
+
+scripts = [
+    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js",
+    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/locale/fr.min.js",
+]
+app = Dash(external_scripts=scripts, external_stylesheets=dmc.styles.ALL)
+
+
+date_picker = dmc.DateInput(
+    id="date-input-203",
+    clearable=True,
+    valueFormat="YYYY-MM-DD",
+    label = "Date input YYYY-MM-DD",
+    placeholder = "Date input YYYY-MM-DD",
+    persistence=True
+)
+
+app.layout = dmc.MantineProvider([
+    dmc.Text("Select a date, refresh page.  Localization should persist - issue#203"),
+    dmc.Text("Localization (French) should appear at start - issue#203"),
+    dmc.DatesProvider(date_picker, settings={"locale": "fr"})
+])
+
+if __name__ == "__main__":
+    app.run(debug=True)
+