Improve ui.date returning a dictionary

[Nemecsek]

The current version of ui.date returns:

• None, when no day is selected;
• a String, for a single day with format specified in parameter mask
• a Dictionary {"from", "to"}, when a days range is selected.

This code found at Input Element with Date Picker returns a valid date string when a single day is chosen, but reads [object Object] instead when a range is selected because it cannot render the dictionary as a string:

with ui.input('Date', on_change=lambda: menu.close()) as date:
    with date.add_slot('append'):
        ui.icon('edit_calendar').on('click', lambda: menu.open()).classes('cursor-pointer')
    with ui.menu() as menu:
        ui.date(mask="DD#MMM#YYYY").props('range').bind_value(date)

A workaround to embed the code to transform the range dictionary to a string (provided by @falkoschindler, because I couldn't work out a solution on my own) could be the following one, but it is not for the fainthearted:

        ui.date().props('range').bind_value(
            date,
            forward=lambda v: f'{v["from"]} .. {v["to"]}' if isinstance(v, dict) else v,
            backward=lambda v: {'from': v.split(' - ')[0], 'to': v.split(' - ')[1]} if isinstance(v, str) and ' - ' in v else v,

I would prefer ui.date always to return a dictionary, even if this breaks compatibility:

• None:
  { "no_of_days":0, "value":"Please select a day" }
• Single Day:
  { "no_of_days":1, "value":"Mai 23, 2024", "date":datetime(2024, 5, 23) }
• Range:
  { "no_of_days":5, "value":"Mai 23-27, 2024",
"date_from":datetime(2024, 5, 23), "date_to":datetime(2024, 5, 27) }

This is a possible new API:
ui.date(mask="MMM DD, YYYY", remove_common=True, range_separator="-", invalid_text="Please select a day")

• mask to formats both a single day and day_start/day_end in a range;
• remove_common removes the common part in a range to make the string more readable:
  i.e. May 23, 2024-June 7, 2024 becomes May 23-June 7, 2024 because the year is the same; May 23, 2024-May 27, 2024 becomes May 23-27, 2024 because the year and the month are the same.
• range_separator: the string between day_start and day_end (i.e. .., - or /)
• invalid_text: the text to return in case no day is selected.

[falkoschindler]

Thanks for the suggestion, @Nemecsek!

I agree that the different datatypes (None, str, dict) for ui.date are a bit confusing, even though they are derived from Quasar's QDate. Especially when used with date ranges, a uniform value format would be nice. Changing the API of ui.date would, however, induce a major breaking change for existing applications, it would complicate the implementation quite a bit to incorporate all new parameters, and it would complicate the usage for single dates.

Maybe date ranges justify a new element ui.date_range with your proposed API. It wouldn't break anything, but provides a convenient way to input date ranges in a uniform and configurable way. It's still a challenging undertaking to get all requirements working in integration.

[Nemecsek]

A new ui.date_range is probably the best idea (leaving the already baked date range in ui.date for the sake of compatibility.)