## YearPickerInput Year, multiple years and years range picker input Category: Date Pickers ### Simple Example ```python import dash_mantine_components as dmc component = dmc.YearPickerInput( label="Pick date", placeholder="Pick date", ) ``` ### Multiple dates Set type="multiple" to allow user to pick multiple months. Note that `value` is a list. ```python import dash_mantine_components as dmc component = dmc.YearPickerInput( type="multiple", label="Pick multiple dates", placeholder="Pick dates", ) ``` ### Dates range Set type="range" to allow user to pick dates range. Note that `value` is a list. ```python import dash_mantine_components as dmc component = dmc.YearPickerInput( type="range", label="Pick dates range", placeholder="Pick dates range", ) ``` ### Open picker in modal By default, YearPickerInput is rendered inside Popover. You can change that to Modal by setting dropdownType="modal" ```python import dash_mantine_components as dmc component = dmc.YearPickerInput( dropdownType="modal", label="Pick date (picker in modal)", placeholder="Pick date", ) ``` ### Number of columns ```python import dash_mantine_components as dmc component = dmc.YearPickerInput( label="Pick date", placeholder="Pick date", numberOfColumns=2 ) ``` ### Value format Use `valueFormat` property to change the format of the date displayed in the date input field. ```python import dash_mantine_components as dmc component = dmc.YearPickerInput( valueFormat="YY", type="multiple", label="Pick month (Value Formatter)", placeholder="Pick month", ) ``` Use `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label. ### Clearable 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. ```python from datetime import datetime import dash_mantine_components as dmc component = dmc.YearPickerInput( clearable=True, value=datetime.now(), label="Pick date (clearable)", placeholder="Pick Date", ) ``` ### With Icon ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.YearPickerInput( leftSection=DashIconify(icon="fa:calendar"), leftSectionPointerEvents="none", label="Pick date", placeholder="Pick date", ) ``` ### Min and Max date ```python from datetime import datetime, timedelta import dash_mantine_components as dmc component = dmc.YearPickerInput( minDate=datetime(2021, 1, 1), maxDate=datetime(2028, 1, 1), value=datetime(2021, 1, 1), placeholder="Date input", label="Select valid date", w=250, ) ``` ### CSS Extensions As of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file. If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets. ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### YearPickerInput selectors | Selector | Static selector | Description | | ---------------------------| ---------------------------------------------------- | --------------------------------------------------------------------- | | `wrapper` | `.mantine-YearPickerInput-wrapper` | Root element of the Input | | `input` | `.mantine-YearPickerInput-input` | Input element | | `section` | `.mantine-YearPickerInput-section` | Left and right sections | | `root` | `.mantine-YearPickerInput-root` | Root element | | `label` | `.mantine-YearPickerInput-label` | Label element | | `required` | `.mantine-YearPickerInput-required` | Required asterisk element, rendered inside label | | `description` | `.mantine-YearPickerInput-description` | Description element | | `error` | `.mantine-YearPickerInput-error` | Error element | | `calendarHeader` | `.mantine-YearPickerInput-calendarHeader` | Calendar header root element | | `calendarHeaderControl` | `.mantine-YearPickerInput-calendarHeaderControl` | Previous/next calendar header controls | | `calendarHeaderControlIcon` | `.mantine-YearPickerInput-calendarHeaderControlIcon` | Icon of previous/next calendar header controls | | `calendarHeaderLevel` | `.mantine-YearPickerInput-calendarHeaderLevel` | Level control (changes levels when clicked, month -> year -> decade) | | `levelsGroup` | `.mantine-YearPickerInput-levelsGroup` | Group of decades levels | | `yearsList` | `.mantine-YearPickerInput-yearsList` | Years list table element | | `yearsListRow` | `.mantine-YearPickerInput-yearsListRow` | Years list row element | | `yearsListCell` | `.mantine-YearPickerInput-yearsListCell` | Years list cell element | | `yearsListControl` | `.mantine-YearPickerInput-yearsListControl` | Button used to pick months and years | | `placeholder` | `.mantine-YearPickerInput-placeholder` | Placeholder element | #### YearPickerInput data attributes | Selector | Attribute | Condition | Value | | --------------------- | -------------- | ----------------------------------- | ---------------------------------- | | `calendarHeaderControl`| `data-direction`| – | "previous" or "next" depending on the control type | | `calendarHeaderControl`| `data-disabled`| Control is disabled for any reason | – | ### Keyword Arguments #### YearPickerInput - id (string; optional): Unique ID to identify this component in Dash callbacks. - allowDeselect (boolean; optional): Determines whether user can deselect the date by clicking on selected item, applicable only when type="default". - allowSingleDateInRange (boolean; optional): Determines whether single year can be selected as range, applicable only when type="range". - aria-* (string; optional): Wild card aria attributes. - ariaLabels (dict; optional): aria-label attributes for controls on different levels. `ariaLabels` is a dict with keys: - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - clearButtonProps (dict; optional): Props passed down to clear button. `clearButtonProps` is a dict with keys: - clearable (boolean; optional): Determines whether input value can be cleared, adds clear button to right section, False by default. - closeOnChange (boolean; optional): Determines whether dropdown should be closed when date is selected, not applicable when type="multiple", True by default. - columnsToScroll (number; optional): Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - debounce (number; default 0): Debounce time in ms. - decadeLabelFormat (string; optional): dayjs label format to display decade label or a function that returns decade label based on date value, defaults to "YYYY". - defaultDate (string; optional): Initial displayed date. - description (a list of or a singular dash component, string or number; optional): Contents of `Input.Description` component. If not set, description is not rendered. - descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Description` component. - disabled (boolean; optional): Sets `disabled` attribute on the `input` element. - dropdownType (a value equal to: 'popover', 'modal'; optional): Type of dropdown, defaults to popover. - error (a list of or a singular dash component, string or number; optional): Contents of `Input.Error` component. If not set, error is not rendered. - errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Error` component. - getYearControlProps (boolean | number | string | dict | list; optional): A function that passes props down to year picker control based on date. (See https://www.dash-mantine-components.com/functions-as-props). - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input` component. - inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional): Controls order of the elements, `['label', 'description', 'input', 'error']` by default. - label (a list of or a singular dash component, string or number; optional): Contents of `Input.Label` component. If not set, label is not rendered. - labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Label` component. - labelSeparator (string; optional): Separator between range value. - leftSection (a list of or a singular dash component, string or number; optional): Content section rendered on the left side of the input. - leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional): Sets `pointer-events` styles on the `leftSection` element, `'none'` by default. - leftSectionProps (dict; optional): Props passed down to the `leftSection` element. - leftSectionWidth (string | number; optional): Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - maxDate (string; optional): Maximum possible date. - minDate (string; optional): Minimum possible date. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - modalProps (dict; optional): Props passed down to Modal component. `modalProps` is a dict with keys: - n_submit (number; default 0): An integer that represents the number of times that this element has been submitted. - name (string; optional): Name prop. - numberOfColumns (number; optional): Number of columns to render next to each other. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - placeholder (string; optional): Input placeholder. - pointer (boolean; optional): Determines whether the input should have `cursor: pointer` style, `False` by default. - popoverProps (dict; optional): Props passed down to Popover component. `popoverProps` is a dict with keys: - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default. - readOnly (boolean; optional): Determines whether the user can modify the value. - required (boolean; optional): Adds required attribute to the input and a red asterisk on the right side of label, `False` by default. - rightSection (a list of or a singular dash component, string or number; optional): Content section rendered on the right side of the input. - rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional): Sets `pointer-events` styles on the `rightSection` element, `'none'` by default. - rightSectionProps (dict; optional): Props passed down to the `rightSection` element. - rightSectionWidth (string | number; optional): Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height. - size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional): Component size. - sortDates (boolean; optional): Determines whether dates value should be sorted before onChange call, only applicable when type="multiple", True by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - type (a value equal to: 'default', 'multiple', 'range'; optional): Picker type: range, multiple or default. - value (string | list of strings; optional): Value for controlled component. - valueFormat (string; optional): Dayjs format to display input value, "MMMM D, YYYY" by default. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withAsterisk (boolean; optional): Determines whether the required asterisk should be displayed. Overrides `required` prop. Does not add required attribute to the input. `False` by default. - withCellSpacing (boolean; optional): Determines whether controls should be separated by spacing, True by default. - withErrorStyles (boolean; optional): Determines whether the input should have red border and red text color when the `error` prop is set, `True` by default. - wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the root element. - yearsListFormat (string; optional): dayjs format for years list, `'YYYY'` by default.