Skip to content

Feature: InputDate and InputDateRange Enhancements#672

Merged
maartenbreddels merged 4 commits intowidgetti:masterfrom
brian-c-ogorman:feat/input-date-enhancements
Jul 3, 2024
Merged

Feature: InputDate and InputDateRange Enhancements#672
maartenbreddels merged 4 commits intowidgetti:masterfrom
brian-c-ogorman:feat/input-date-enhancements

Conversation

@brian-c-ogorman
Copy link
Copy Markdown
Contributor

@brian-c-ogorman brian-c-ogorman commented Jun 6, 2024

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()
image

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()
image

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
iisakkirotko requested changes Jun 10, 2024
View reviewed changes
Copy link
Copy Markdown
Collaborator

@iisakkirotko iisakkirotko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Brian O'Gorman added 4 commits June 10, 2024 11:59
docs: move link for "date_format" to the right place
07b526b
feat: add date picker type parameter
b6827c9 
Adds a "date_picker_type" parameter to let the user specify whether the
date picker should use daily (the default) or monthly granularity.
feat: add min/max date parameters
2e53cd0 
Adds "min_date" and "max_date" parameters to allow the user to set
limits on allowed dates.
feat: support automatically sorting dates
efcc6f0 
Adds an optional "sort" parameter to allow the user to automatically
sort the dates chosen with the InputDateRange. If `sort=True`, dates
will be sorted in ascending order. Otherwise, the order of the dates
will reflect the order that they were picked.
@brian-c-ogorman brian-c-ogorman force-pushed the feat/input-date-enhancements branch from 559c2d6 to efcc6f0 Compare June 10, 2024 16:00
iisakkirotko
iisakkirotko approved these changes Jun 11, 2024
View reviewed changes
Copy link
Copy Markdown
Collaborator

@iisakkirotko iisakkirotko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@maartenbreddels maartenbreddels merged commit 7bf0091 into widgetti:master Jul 3, 2024
@maartenbreddels
Copy link
Copy Markdown
Contributor

maartenbreddels commented Jul 3, 2024

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

We plan to release this soon, today maybe even.

@iisakkirotko
Copy link
Copy Markdown
Collaborator

iisakkirotko commented Jul 3, 2024

And it's out :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@iisakkirotko iisakkirotko iisakkirotko approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@brian-c-ogorman @maartenbreddels @iisakkirotko