DatePicker#

Download this notebook from GitHub (right-click to download).

import datetime as dt

import panel as pn
import panel_material_ui as pmui

pn.extension()

The DatePicker widget allows selecting selecting a date value using a text box and the browser’s date-picking utility.


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity. Alternatively, learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.




Parameters:#


For details on other options for customizing the component see the customization guides.




Core#


    

  • clearable (boolean, default=True): If true, allows the date to be cleared.
    • 

  • disabled (boolean, default=False): Whether the widget is editable
    • 

  • disabled_dates (list[datetime.date]): dates to make unavailable for selection; others will be available
    • 

  • disable_future (boolean): If true, future dates are disabled.
    • 

  • disable_past (boolean): If true, past dates are disabled.
    • 

  • enabled_dates (list[datetime.date]): dates to make available for selection; others will be unavailable
    • 

  • format (str, default='YYYY-MM-DD'):The format of the date displayed in the input.
    • 

  • end (datetime.date): The latest selectable date
    • 

  • open_to (list[str]): The default view to open the calendar to.
    • 

  • show_today_button (boolean, default=False): If true, shows a button to select today’s date.
    • 

  • start (datetime.date): The earliest selectable date
    • 

  • value (datetime.date): The selected value as a datetime type
    • 

  • views (list[str], default=['year', 'month', 'day']): The views that are available for the date picker.
    • 







Display#


    

  • label (str): The title of the widget
    • 







Styling#


    

  • color (str): Choose from “default” (default), “primary”, “secondary”, “error”, “info”, “success”, “warning”, “light”, “dark”, or “danger”.
    • 

  • sx (dict): Component level styling API.
    • 

  • theme_config (dict): Theming API.
    • 

  • variant (str): Choose from “filled”, “outlined” (default), or “standard”.
    • 







Aliases#


For compatibility with Panel certain parameters are allowed as aliases:


    

  • name: Alias for label
    • 





DatePicker uses allows selecting a date, by default this can be any date:


date_picker = pmui.DatePicker(label='Date Picker', value=dt.datetime(2024, 4, 1, 11, 37))

pmui.Row(date_picker, height=400)







            
            
To ensure it is visible in a notebook we have placed it in a Column with a fixed height.


DatePicker.value returns a datetime.date type that can be read out or set like other widgets:


date_picker.value





datetime.date(2024, 4, 1)








Limiting to a calendar range#


The range of selectable dates can be limited by setting start and/or end:


dt_picker = pmui.DatePicker(
    label='Date Picker',
    start=dt.datetime(2024, 4, 1, 0, 0),
    end=dt.datetime(2024, 4, 7, 0, 0),
    value=dt.datetime(2024, 4, 1, 11, 37)
)

pmui.Row(dt_picker, height=400)







            
            




Disable Past or Future#


The disable_past and disable_future options make it easy to limit the selectable dates:


disable_past = pmui.DatePicker(
    disable_past=True,
    label='Date Picker (disable_past)',
)

disable_future = pmui.DatePicker(
    disable_future=True,
    label='Date Picker (disable_future)',
)

pmui.Row(disable_past, disable_future, height=400)







            
            




Enabled Dates#


The enabled_dates option allows limiting the dates that can be selected to a specific subset:


date_picker = pmui.DatePicker(
    label='Date Picker (enabled_dates)',
    enabled_dates=[dt.datetime(2024, 4, i, 12, 37) for i in range(1, 7)],
    value=dt.datetime(2024, 4, 1, 11, 37)
)

pmui.Column(date_picker, height=400)







            
            




Disabled Dates#


The disabled_dates option allows excluding specific dates:


date_picker = pmui.DatePicker(
    label='Date Picker (disabled_dates)',
    disabled_dates=[dt.datetime(2024, 4, i, 12, 37) for i in range(2, 7)],
    value=dt.datetime(2024, 4, 1, 11, 37)
)

pmui.Column(date_picker, height=400)







            
            




Controls#


The DatePicker widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:


pmui.Row(date_picker.api(jslink=False), date_picker)







            
            




References#


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity.


Learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.


See also the Material UI DatePicker Reference and API documentation for inspiration.




Download this notebook from GitHub (right-click to download).