## TimeGrid  
Captures time value from the user with a predefined set of options.  
Category: Date Pickers  

### Simple Example


```python
import dash_mantine_components as dmc
from dash import callback, Input, Output

component = dmc.Stack([
    dmc.TimeGrid(
        timeRangeData={"startTime": "10:00", "endTime": "21:00", "interval": "01:00"},
        withSeconds=False,
        simpleGridProps={
            "type": "container",
            "cols": {"base": 1, "180px": 2, "320px": 3},
            "spacing": "xs",
        },
        value="10:00:00",
        id="time-grid"
    ),
    dmc.Text(id="time-grid-out")
])

@callback(
    Output("time-grid-out", "children"),
    Input("time-grid", "value")
)
def update(value):
    return f"You selected: {value}"
```
### format, withSeconds, size, radius

### data prop
`data` prop accepts an array of time values in 24-hour format. Values must be unique.

```python
dmc.TimeGrid(
    data=['10:00', '12:00']
)
```

### timeRangeData prop

Use the `timeRangeData` prop to generate a range of times. It accepts a dictionary with `startTime`,
`endTime`, and `interval` keys, where all values are strings in `hh:mm:ss` format. This overrides any values provided 
directly in the `data` prop.

```python
dmc.TimeGrid(
    timeRangeData={"startTime": "10:00", "endTime": "21:00", "interval": "01:00"},
)
```

### Min and max time
Set `minTime` and `maxTime` props to limit available time range. Both props accept time values in 24-hour format:

```python
import dash_mantine_components as dmc

component = dmc.TimeGrid(
    timeRangeData={"startTime": "09:00", "endTime": "22:00", "interval": "01:00"},
    minTime="11:00",
    maxTime="18:00",
    withSeconds=False,
)
```
### Disable time values
You can disable specific time values by providing an array of disabled values to the `disableTime` prop:

```python
import dash_mantine_components as dmc

component = dmc.TimeGrid(
    timeRangeData={"startTime": "09:00", "endTime": "11:45", "interval": "00:15"},
    disableTime = ['10:45', '11:00', '11:30']
)
```
### Allow deselect
Set `allowDeselect` prop to allow deselecting time value by clicking on the control with selected value:


```python
import dash_mantine_components as dmc

component = dmc.TimeGrid(
    timeRangeData={"startTime": "09:00", "endTime": "12:00", "interval": "01:00"},
    value="11:00",
    allowDeselect=True
)
```
### Change AM/PM Labels
```python
import dash_mantine_components as dmc

component = dmc.TimeGrid(
    timeRangeData={"startTime": "09:00", "endTime": "22:00", "interval": "01:00"},
    format="12h",
    amPmLabels={"am": 'पूर्वाह्न', "pm": 'अपराह्न'}
)
```
### Disabled
Set `disabled` prop to disable all controls:

```python
import dash_mantine_components as dmc

component = dmc.TimeGrid(
    timeRangeData={"startTime": "09:00", "endTime": "22:00", "interval": "01:00"},
    disabled=True
)
```
### 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.


#### TimeGrid selectors

| Selector   | Static selector                | Description               |
| ---------- | ------------------------------ | ------------------------- |
| root       | `.mantine-TimeGrid-root`       | Root element              |
| control    | `.mantine-TimeGrid-control`    | Time grid control         |
| simpleGrid | `.mantine-TimeGrid-simpleGrid` | SimpleGrid component root |



#### TimeGrid CSS variables

| Selector | Variable             | Description                                       |
| -------- | -------------------- | ------------------------------------------------- |
| root     | `--time-grid-fz`     | Controls `font-size` property of all controls     |
| root     | `--time-grid-radius` | Controls `border-radius` property of all controls |



#### TimeGrid data attributes

| Selector | Attribute       | Condition                                                                                  |
| -------- | --------------- | ------------------------------------------------------------------------------------------ |
| control  | `data-active`   | Current component value is the same as control value                                       |
| control  | `data-disabled` | Component is disabled by one of the props: `minTime`, `maxTime`, `disableTime`, `disabled` |



### Keyword Arguments
#### TimeGrid

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- allowDeselect (boolean; optional):
    Determines whether the value can be deselected when the current
    active option is clicked or activated with keyboard, `False` by
    default.

- amPmLabels (dict; optional):
    Labels used for am/pm values, `{ am: 'AM', pm: 'PM' }` by default.

    `amPmLabels` is a dict with keys:

- aria-* (string; optional):
    Wild card aria attributes.

- 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.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data (list of strings; optional):
    Time data in 24h format to be displayed in the grid, for example
    `['10:00', '18:30', '22:00']`. Time values must be unique.

- data-* (string; optional):
    Wild card data attributes.

- defaultValue (string; optional):
    Uncontrolled component default value.

- disableTime (list of strings; optional):
    Array of time values to disable.

- disabled (boolean; optional):
    If set, all controls are disabled.

- format (a value equal to: '12h', '24h'; optional):
    Time format displayed in the grid, `'24h'` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- 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:

- maxTime (string; optional):
    All controls after this time are disabled.

- minTime (string; optional):
    All controls before this time are disabled.

- 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.

- 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.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `theme.defaultRadius` by default.

- simpleGridProps (boolean | number | string | dict | list; optional):
    Props passed down to the underlying `SimpleGrid` component, `{
    cols: 3, spacing: 'xs' }` by default.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Control `font-size` of controls, key of `theme.fontSizes` or any
    valid CSS value, `'sm'` 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.

- timeRangeData (dict; optional):
    Generates a range of time values for the `data` prop. Accepts a
    dictionary with `startTime`, `endTime`, and `interval` keys, where
    all values are strings in `hh:mm:ss` format. This overrides any
    values provided directly in the `data` prop.

    `timeRangeData` is a dict with keys:

- value (string; default ''):
    Value for controlled component.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withSeconds (boolean; optional):
    Determines whether the seconds part should be displayed, `False`
    by default.