diff --git a/docs/datepicker/columns.py b/docs/datepicker/columns.py deleted file mode 100644 index 0e55f53d..00000000 --- a/docs/datepicker/columns.py +++ /dev/null @@ -1,3 +0,0 @@ -import dash_mantine_components as dmc - -component = dmc.DatePicker(w=250, type="range", numberOfColumns=2) diff --git a/docs/datepicker/clearable.py b/docs/datepickerinput/clearable.py similarity index 85% rename from docs/datepicker/clearable.py rename to docs/datepickerinput/clearable.py index 71b7ee4e..fe3d4086 100644 --- a/docs/datepicker/clearable.py +++ b/docs/datepickerinput/clearable.py @@ -4,12 +4,12 @@ component = dmc.Stack( [ - dmc.DatePicker( + dmc.DatePickerInput( value=datetime.now().date(), label="Date not clearable", w=200, ), - dmc.DatePicker( + dmc.DatePickerInput( value=datetime.now().date(), label="Date clearable", w=200, diff --git a/docs/datepickerinput/columns.py b/docs/datepickerinput/columns.py new file mode 100644 index 00000000..ec6ee403 --- /dev/null +++ b/docs/datepickerinput/columns.py @@ -0,0 +1,3 @@ +import dash_mantine_components as dmc + +component = dmc.DatePickerInput(w=250, type="range", numberOfColumns=2) diff --git a/docs/datepicker/datepicker.md b/docs/datepickerinput/datepickerinput.md similarity index 91% rename from docs/datepicker/datepicker.md rename to docs/datepickerinput/datepickerinput.md index 7c81648f..f67782f2 100644 --- a/docs/datepicker/datepicker.md +++ b/docs/datepickerinput/datepickerinput.md @@ -1,7 +1,7 @@ --- -name: DatePicker +name: DatePickerInput description: Date, multiple dates and dates range picker input. Helps you easily switch between different months, years along with locale support. -endpoint: /components/datepicker +endpoint: /components/datepickerinput package: dash_mantine_components category: Date Pickers --- @@ -32,40 +32,40 @@ app = Dash(external_stylesheets=dmc.styles.ALL) ### Simple Example -This is a simple example of DatePicker tied to a callback. You can either use strings in a valid datetime format such +This is a simple example of `DatePickerInput` tied to a callback. You can either use strings in a valid datetime format such as `YYYY-MM-DD` or use the date object from datetime library. > If you would like to enable the user to type a date manually into the input field, please use the `DateInput` component -.. exec::docs.datepicker.simple +.. exec::docs.datepickerinput.simple ### Multiple dates Set type="multiple" to allow user to pick multiple dates. Note that `value` is a list. -.. exec::docs.datepicker.multiple +.. exec::docs.datepickerinput.multiple ### Dates range Set type="range" to allow user to pick dates range. Note that `value` is a list. -.. exec::docs.datepicker.range +.. exec::docs.datepickerinput.range ### Open picker in modal -By default, DatePicker is rendered inside Popover. You can change that to Modal by setting dropdownType="modal" +By default, `DatePickerInput` is rendered inside `Popover`. You can change that to `Modal` by setting `dropdownType="modal"` -.. exec::docs.datepicker.modal +.. exec::docs.datepickerinput.modal ### Number of columns -.. exec::docs.datepicker.columns +.. exec::docs.datepickerinput.columns ### Value format Use `format` property to change the format of the date displayed in the date input field. -.. exec::docs.datepicker.formats +.. exec::docs.datepickerinput.formats Use `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label. @@ -73,7 +73,7 @@ Use `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/displ Set `clearable=True` prop to display clear button in the right section. Note that if you set `rightSection` prop, clear button will not be displayed. -.. exec::docs.datepicker.clearable +.. exec::docs.datepickerinput.clearable ### Error Display @@ -81,7 +81,7 @@ You can convey errors in your date picker by setting the `error` prop. For insta convey the user that it's a required field and the date can't be an odd date. Since it's a required field, we also set `clearable=False`. -.. exec::docs.datepicker.errors +.. exec::docs.datepickerinput.errors ### Localization @@ -124,6 +124,6 @@ For information on setting locale, have a look at the [DatesProvider](/component ### Keyword Arguments -#### DatePicker +#### DatePickerInput -.. kwargs::DatePicker +.. kwargs::DatePickerInput diff --git a/docs/datepicker/errors.py b/docs/datepickerinput/errors.py similarity index 69% rename from docs/datepicker/errors.py rename to docs/datepickerinput/errors.py index 0866726c..5b56d4b4 100644 --- a/docs/datepicker/errors.py +++ b/docs/datepickerinput/errors.py @@ -3,8 +3,8 @@ import dash_mantine_components as dmc from dash import Output, Input, callback -component = dmc.DatePicker( - id="datepicker-error", +component = dmc.DatePickerInput( + id="datepickernput-error", value=datetime.now().date(), label="Date", required=True, @@ -13,7 +13,7 @@ ) -@callback(Output("datepicker-error", "error"), Input("datepicker-error", "value")) +@callback(Output("datepickerinput-error", "error"), Input("datepickerinput-error", "value")) def datepicker_error(date): day = datetime.strptime(date, "%Y-%M-%d").day return "Please select an even date." if day % 2 else "" diff --git a/docs/datepicker/formats.py b/docs/datepickerinput/formats.py similarity index 86% rename from docs/datepicker/formats.py rename to docs/datepickerinput/formats.py index a0774184..89c7d865 100644 --- a/docs/datepicker/formats.py +++ b/docs/datepickerinput/formats.py @@ -5,19 +5,19 @@ component = dmc.Group( gap="xl", children=[ - dmc.DatePicker( + dmc.DatePickerInput( value=datetime.now().date(), valueFormat="ddd, MMM D YY", label="ddd, MMM D YY", w=200, ), - dmc.DatePicker( + dmc.DatePickerInput( value=datetime.now().date(), valueFormat="MMMM DD, YY", label="MMMM DD, YY", w=200, ), - dmc.DatePicker( + dmc.DatePickerInput( value=datetime.now().date(), valueFormat="DD-MM-YYYY", label="DD-MM-YYYY", diff --git a/docs/datepicker/locale.py b/docs/datepickerinput/locale.py similarity index 53% rename from docs/datepicker/locale.py rename to docs/datepickerinput/locale.py index 0845afcc..2ca4212a 100644 --- a/docs/datepicker/locale.py +++ b/docs/datepickerinput/locale.py @@ -1,6 +1,6 @@ import dash_mantine_components as dmc component = dmc.DatesProvider( - dmc.DatePicker(id="fr-date-picker-input", w=200, label="Sélectionner une date"), + dmc.DatePickerInput(id="fr-date-picker-input", w=200, label="Sélectionner une date"), settings={"locale": "fr"}, ) diff --git a/docs/datepicker/modal.py b/docs/datepickerinput/modal.py similarity index 81% rename from docs/datepicker/modal.py rename to docs/datepickerinput/modal.py index ce7e41cd..8b8ef1aa 100644 --- a/docs/datepicker/modal.py +++ b/docs/datepickerinput/modal.py @@ -2,7 +2,7 @@ import dash_mantine_components as dmc -component = dmc.DatePicker( +component = dmc.DatePickerInput( value=datetime.now().date(), dropdownType="modal", w=200, diff --git a/docs/datepicker/multiple.py b/docs/datepickerinput/multiple.py similarity index 96% rename from docs/datepicker/multiple.py rename to docs/datepickerinput/multiple.py index a7d418ae..5fbe9687 100644 --- a/docs/datepicker/multiple.py +++ b/docs/datepickerinput/multiple.py @@ -6,7 +6,7 @@ component = html.Div( [ - dmc.DatePicker( + dmc.DatePickerInput( id="date-picker-input-multiple", label="Pick dates", description="Pick one or more dates", diff --git a/docs/datepicker/range.py b/docs/datepickerinput/range.py similarity index 96% rename from docs/datepicker/range.py rename to docs/datepickerinput/range.py index 7e274bbc..bb9626ac 100644 --- a/docs/datepicker/range.py +++ b/docs/datepickerinput/range.py @@ -6,7 +6,7 @@ component = html.Div( [ - dmc.DatePicker( + dmc.DatePickerInput( id="date-input-range-picker", label="Date Range", description="Select a date range", diff --git a/docs/datepicker/simple.py b/docs/datepickerinput/simple.py similarity index 96% rename from docs/datepicker/simple.py rename to docs/datepickerinput/simple.py index 1eb3f503..47c28a90 100644 --- a/docs/datepicker/simple.py +++ b/docs/datepickerinput/simple.py @@ -6,7 +6,7 @@ component = html.Div( [ - dmc.DatePicker( + dmc.DatePickerInput( id="date-picker-input", label="Start Date", description="You can also provide a description", diff --git a/docs/migration/migration.md b/docs/migration/migration.md index 01b422ce..f389e2b5 100644 --- a/docs/migration/migration.md +++ b/docs/migration/migration.md @@ -1,5 +1,5 @@ --- -name: Migration Guide 0.12 to 0.14 +name: Migration Guide endpoint: /migration description: This page helps you migrate from an old version to a newer version of Dash Mantine Components dmc: false @@ -7,6 +7,16 @@ dmc: false .. toc:: +## Migrating from 0.14 to 0.15 + +The `DatePicker` component has been renamed to `DatePickerInput` to align with the component names of the upstream +Mantine Library. We plan to add the Mantine [`DatePicker`](https://mantine.dev/dates/date-picker/) component in a future release. + +We still expect far fewer breaking changes going forward compared to what you may have experienced in the past. For more details, please see our [Roadmap](https://github.com/snehilvj/dash-mantine-components/discussions/377). + + +## Migrating from 0.12 to 0.14 + ### Backstory There are many breaking changes going from DMC `v0.12` to DMC `v0.14`. The major reason behind this was we jumped from @@ -88,6 +98,7 @@ app = Dash(__name__, external_stylesheets=dmc.styles.ALL) - `Chip` and `ChipGroup` components are not working as expected when ported over in dash. It will be worked on as part of subsequent releases. - `TransferList` is no longer available. You might benefit from [AIO based TransferList component](https://community.plotly.com/t/dash-mantine-components-0-14-1/83865/18?u=snehilvj) created by a community member. +**update** `Chip` and `ChipGroup` are available as of 0.14.6 ### Creatable option in Select and MultiSelect