Feature: InputDate and InputDateRange Enhancements

[brian-c-ogorman]

Overview

This change adds a few enhancements to the InputDate and InputDateRange components:

• Adds support for controlling the minimum/maximum allowed dates.
• Adds support for a date picker that has monthly granularity.
• Adds support for sorting the selected dates (for the InputDateRange component only).

See here for the full discussion.

Usage

Daily granularity, with limits the min/max allowed date

Using the min_date and max_date parameters to limit selection to dates in the next two weeks:

import datetime as dt
import solara

@solara.component
def Page():
    min_date = dt.date.today()
    max_date = min_date + dt.timedelta(days=14)

    selected_date = solara.use_reactive(min_date)
    solara.lab.InputDate(
        value=selected_date,
        min_date=min_date.isoformat(),
        max_date=max_date.isoformat(),
    )
    solara.Text(f"Selected date: {selected_date.value}")

Page()

Monthly granularity, with limits on the min/max allowed date

Use date_picker_type="month" to have an input with monthly granularity:

import datetime as dt
import solara

@solara.component
def Page():
    
    min_date = dt.date.today().replace(day=1)
    max_date = (min_date + dt.timedelta(days=62)).replace(day=1)

    selected_date = solara.use_reactive(min_date)
    
    solara.lab.InputDate(
        value=selected_date,
        min_date=min_date.isoformat(),
        max_date=max_date.isoformat(),
        date_picker_type="month",
    )
    solara.Text(f"Selected date: {selected_date.value}")
    
Page()

Daily granularity, with limits the min/max allowed dates, where the output is sorted

Use sort=True to automatically sort the output in ascending order:

import datetime as dt
import solara

@solara.component
def Page():
    min_date = dt.date.today()
    max_date = min_date + dt.timedelta(days=14)

    selected_date = solara.use_reactive((min_date, min_date + dt.timedelta(days=1)))
    solara.lab.InputDateRange(
        value=selected_date,
        min_date=min_date.isoformat(),
        max_date=max_date.isoformat(),
        sort=True,
    )
    solara.Text(f"Selected dates: {selected_date.value}")
    
Page()

Monthly granularity, with limits the min/max allowed dates, where the output is sorted

Use date_picker_type="month" to have an input with monthly granularity and sort=True to automatically sort the output in ascending order:

import datetime as dt
import solara

@solara.component
def Page():
    
    min_date = dt.date.today().replace(day=1)
    max_date = (min_date + dt.timedelta(days=62)).replace(day=1)

    selected_date = solara.use_reactive(
        (min_date, (min_date + dt.timedelta(days=30)).replace(day=1))
    )
    
    solara.lab.InputDateRange(
        value=selected_date,
        min_date=min_date.isoformat(),
        max_date=max_date.isoformat(),
        date_picker_type="month",
        sort=True,
    )
    solara.Text(f"Selected date: {selected_date.value}")
    
Page()

Vuetify 3 Upgrade Path

From what I can tell, in Vuetify 3, the min and max parameters are still supported by the VDatePicker object (see here).

I don't see a clear example of a date picker with monthly granularity on the component documentation here. Based on the API, it looks like they have split the "Monthly Date Picker" into a separate component, called VDatePickerMonth (see here). There is also a VDatePickerMonths in the API (see here), though it appears to have fewer parameters -- I am not sure how that component differs from or VDatePickerMonth.

As a result, when upgrading to Vuetify 3, these components would probably be split into something like InputDate/InputMonth and InputDateRange/InputMonthRange, based on the VDatePicker and VDatePickerMonth components, respectively.

[iisakkirotko]

Thanks a lot for the PR and detailed explanation @brian-c-ogorman! I only had one comment. I think it would also be good to squash the last two commits into one. Otherwise looks great!

[iisakkirotko]

Looks good to me. Thanks a lot for the PR!

[maartenbreddels]

Awesome work @brian-c-ogorman !
Thank you @iisakkirotko as well for the review.

We plan to release this soon, today maybe even.

[iisakkirotko]

And it's out :)