tessl/pypi-dash-mantine-components

Plotly Dash Components based on the Mantine React Components Library, providing over 90 high-quality UI components for building dashboards and web applications.

—

Pending

Overview

Eval results

Files

Date and Time Components

Name: tessl/pypi-dash-mantine-components
Author: tessl

Specialized components for date and time selection including date pickers, time inputs, and calendar widgets with internationalization support.

Capabilities

Date Input Components

Input components for date selection with various formats and constraints.

def DateInput(
    id=None,
    value=None,  # Date value (datetime.date or string)
    placeholder="",  # Placeholder text
    label="",  # Input label
    description="",  # Help text
    error="",  # Error message
    required=False,  # Required field
    disabled=False,  # Disabled state
    valueFormat="YYYY-MM-DD",  # Display format
    minDate=None,  # Minimum selectable date
    maxDate=None,  # Maximum selectable date
    **kwargs
): 
    """
    Single date input field with date picker.
    
    Parameters:
    - id: Component ID for callbacks
    - value: Selected date value
    - placeholder: Placeholder text when empty
    - label: Field label
    - description: Help text below input
    - error: Error message
    - required: Show required indicator
    - disabled: Disable input
    - valueFormat: Date display format string
    - minDate: Earliest selectable date
    - maxDate: Latest selectable date
    """

def DatePickerInput(
    id=None,
    value=None,  # Date value or list for range
    placeholder="",  # Placeholder text
    label="",  # Input label
    description="",  # Help text
    error="",  # Error message
    type="default",  # "default" | "multiple" | "range"
    allowSingleDateInRange=False,  # Allow single date in range mode
    numberOfColumns=1,  # Calendar columns
    columnsToScroll=1,  # Columns to scroll
    minDate=None,  # Minimum date
    maxDate=None,  # Maximum date
    excludeDate=None,  # Function to exclude dates
    locale="en",  # Locale for formatting
    firstDayOfWeek=0,  # First day of week (0=Sunday)
    **kwargs
): 
    """
    Date picker input with dropdown calendar.
    
    Parameters:
    - id: Component ID for callbacks
    - value: Selected date(s) - single date, list, or range
    - type: Selection type (single, multiple, range)
    - allowSingleDateInRange: Allow incomplete range
    - numberOfColumns: Calendar columns to display
    - columnsToScroll: Columns to scroll at once
    - minDate: Minimum selectable date
    - maxDate: Maximum selectable date
    - excludeDate: Function to disable specific dates
    - locale: Language/region for date formatting
    - firstDayOfWeek: Week start day (0-6)
    """

def DatePicker(
    id=None,
    value=None,  # Selected date(s)
    type="default",  # "default" | "multiple" | "range"
    numberOfColumns=1,  # Calendar columns
    columnsToScroll=1,  # Columns to scroll
    minDate=None,  # Minimum date
    maxDate=None,  # Maximum date
    excludeDate=None,  # Date exclusion function
    locale="en",  # Locale
    firstDayOfWeek=0,  # Week start day
    hideWeekdays=False,  # Hide weekday headers
    renderDay=None,  # Custom day renderer
    **kwargs
): 
    """
    Standalone calendar date picker.
    
    Parameters:
    - id: Component ID for callbacks
    - value: Selected date(s)
    - type: Selection mode
    - numberOfColumns: Calendar grid columns
    - columnsToScroll: Scroll increment
    - minDate: Earliest selectable date
    - maxDate: Latest selectable date
    - excludeDate: Function to disable dates
    - locale: Localization
    - firstDayOfWeek: Week start (0=Sunday)
    - hideWeekdays: Hide day name headers
    - renderDay: Custom day cell renderer
    """

Date-Time Components

Components combining date and time selection.

def DateTimePicker(
    id=None,
    value=None,  # DateTime value
    placeholder="",  # Placeholder text
    label="",  # Input label
    description="",  # Help text
    error="",  # Error message
    valueFormat="YYYY-MM-DD HH:mm",  # Display format
    submitButtonProps=None,  # Submit button properties
    minDate=None,  # Minimum date
    maxDate=None,  # Maximum date
    locale="en",  # Locale
    **kwargs
): 
    """
    Combined date and time picker input.
    
    Parameters:
    - id: Component ID for callbacks
    - value: Selected datetime value
    - valueFormat: DateTime display format
    - submitButtonProps: Properties for confirm button
    - minDate: Minimum selectable date
    - maxDate: Maximum selectable date
    - locale: Language/region for formatting
    """

Time Input Components

Specialized inputs for time selection.

def TimeInput(
    id=None,
    value="",  # Time value (HH:mm format)
    placeholder="",  # Placeholder text
    label="",  # Input label
    description="",  # Help text
    error="",  # Error message
    format="24",  # "12" | "24"
    withSeconds=False,  # Include seconds
    **kwargs
): 
    """
    Time input field with time picker.
    
    Parameters:
    - id: Component ID for callbacks
    - value: Time value in HH:mm or HH:mm:ss format
    - format: Time format (12 or 24 hour)
    - withSeconds: Include seconds in picker
    """

Period Pickers

Components for selecting months, years, and other periods.

def MonthPickerInput(
    id=None,
    value=None,  # Month value (datetime.date)
    placeholder="",  # Placeholder text
    label="",  # Input label
    description="",  # Help text
    error="",  # Error message
    type="default",  # "default" | "multiple" | "range"
    valueFormat="YYYY-MM",  # Display format
    numberOfColumns=1,  # Calendar columns
    minDate=None,  # Minimum month
    maxDate=None,  # Maximum month
    locale="en",  # Locale
    **kwargs
): 
    """
    Month picker input component.
    
    Parameters:
    - id: Component ID for callbacks
    - value: Selected month(s)
    - type: Selection type (single, multiple, range)
    - valueFormat: Month display format
    - numberOfColumns: Calendar columns
    - minDate: Earliest selectable month
    - maxDate: Latest selectable month
    - locale: Language/region for formatting
    """

def YearPickerInput(
    id=None,
    value=None,  # Year value
    placeholder="",  # Placeholder text
    label="",  # Input label
    description="",  # Help text
    error="",  # Error message
    type="default",  # "default" | "multiple" | "range"
    numberOfColumns=1,  # Calendar columns
    minDate=None,  # Minimum year
    maxDate=None,  # Maximum year
    **kwargs
): 
    """
    Year picker input component.
    
    Parameters:
    - id: Component ID for callbacks
    - value: Selected year(s)
    - type: Selection type
    - numberOfColumns: Calendar columns
    - minDate: Earliest selectable year
    - maxDate: Latest selectable year
    """

Date Provider

Localization and configuration provider for date components.

def DatesProvider(
    children=None,  # Child date components
    settings=None,  # Date settings configuration
    **kwargs
): 
    """
    Provider for date component localization and settings.
    
    Parameters:
    - children: Date components to configure
    - settings: Configuration object for date behavior
    """

Date Configuration Types

# Date settings for DatesProvider
class DateSettings:
    locale: str  # Locale code (e.g., "en", "es", "fr")
    firstDayOfWeek: int  # Week start day (0-6)
    weekendDays: list  # Weekend days [0, 6] for Sat/Sun
    labelSeparator: str  # Range separator in labels
    
# Date value types
DateValue = Union[
    datetime.date,  # Python date object
    str,  # ISO date string "YYYY-MM-DD"
    None  # No selection
]

DateRangeValue = Union[
    List[datetime.date],  # [start_date, end_date]
    List[str],  # ["YYYY-MM-DD", "YYYY-MM-DD"]
    None  # No selection
]

MultiDateValue = Union[
    List[datetime.date],  # List of selected dates
    List[str],  # List of ISO date strings
    []  # No selection
]

Usage Examples

Basic Date Selection

import dash_mantine_components as dmc
from datetime import date, datetime

date_inputs = dmc.Stack([
    dmc.DateInput(
        id="birth-date",
        label="Birth Date",
        placeholder="Select your birth date",
        maxDate=date.today(),
        valueFormat="MM/DD/YYYY"
    ),
    
    dmc.DatePickerInput(
        id="event-date",
        label="Event Date",
        placeholder="Pick a date",
        minDate=date.today(),
        type="default"
    ),
    
    dmc.TimeInput(
        id="meeting-time",
        label="Meeting Time",
        format="12",
        withSeconds=False
    )
])

Date Range Selection

range_picker = dmc.DatePickerInput(
    id="date-range",
    label="Select Date Range",
    placeholder="Pick dates range",
    type="range",
    allowSingleDateInRange=True,
    numberOfColumns=2
)

Advanced Date/Time Selection

advanced_datetime = dmc.Stack([
    dmc.DateTimePicker(
        id="appointment-datetime",
        label="Appointment Date & Time",
        placeholder="Select date and time",
        valueFormat="MMM DD, YYYY at HH:mm",
        minDate=datetime.now().date()
    ),
    
    dmc.MonthPickerInput(
        id="report-month",
        label="Report Month",
        placeholder="Select month",
        type="multiple",
        numberOfColumns=3
    ),
    
    dmc.YearPickerInput(
        id="financial-year",
        label="Financial Year",
        placeholder="Select year range",
        type="range"
    )
])

Localized Date Components

import dash_mantine_components as dmc

localized_dates = dmc.DatesProvider([
    dmc.Stack([
        dmc.Text("English (US)", weight=500),
        dmc.DatePickerInput(
            id="date-en",
            placeholder="Select date",
            valueFormat="MM/DD/YYYY"
        ),
        
        dmc.Text("Spanish", weight=500, mt="md"),
        dmc.DatePickerInput(
            id="date-es",
            placeholder="Seleccionar fecha",
            locale="es",
            valueFormat="DD/MM/YYYY"
        ),
        
        dmc.Text("French", weight=500, mt="md"),
        dmc.DatePickerInput(
            id="date-fr",
            placeholder="Sélectionner une date",
            locale="fr",
            firstDayOfWeek=1  # Monday
        )
    ])
], settings={
    "locale": "en",
    "firstDayOfWeek": 0,
    "weekendDays": [0, 6]
})

Form with Date Validation

date_form = dmc.Stack([
    dmc.DateInput(
        id="start-date",
        label="Start Date",
        required=True,
        minDate=date.today()
    ),
    
    dmc.DateInput(
        id="end-date", 
        label="End Date",
        required=True,
        # minDate will be set dynamically based on start date
    ),
    
    dmc.Group([
        dmc.Button("Reset", variant="outline"),
        dmc.Button("Submit", type="submit")
    ], position="right")
])

# Callback to handle date validation
@callback(
    Output("end-date", "minDate"),
    Output("end-date", "error"),
    Input("start-date", "value"),
    Input("end-date", "value")
)
def validate_date_range(start_date, end_date):
    if start_date:
        min_end_date = start_date
        error = ""
        if end_date and end_date < start_date:
            error = "End date must be after start date"
        return min_end_date, error
    return None, ""

Install with Tessl CLI

npx tessl i tessl/pypi-dash-mantine-components

docs