VDatePicker doesn't show date as expected

[flyercarol]

Describe the bug

VDatePicker doesn't show date/calendar of a full month as expected, only MONTH and YEAR selections are generated. Clicking on the month/year picker only changes the pending selection and no valid DATE selection can be clicked/double clicked. Edit: It seems like this happens when vuetify3 is used instead of vuetify2. Given the EOL of vuetify2, I would very much hope for this to be functional in vuetify3 too, thanks!

To Reproduce

Steps to reproduce the behavior:

1. Install trame dependencies as shown in imports in trame virtual environment
2. Open VSCode and run the script
3. Edit: This error happens when vuetify3 is in use, but not vuetify2.
4. See error pop up in both Chrome, Edge and Firefox browser

Versions trame==3.7.1 trame-vuetify==2.6.1 vuetify3

Code

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vuetify3 as vuetify

server = get_server()
server.client_type = "vue3"
state, ctrl = server.state, server.controller

# Variables
min_date = '2024-01-01'
allowed_dates = ['2024-01-01', '2024-01-01',
                 '2024-02-15', '2024-03-01', '2024-04-01']

# Functions
def handle_date(positional, **kwargs):
    print(positional)
    print("Event object:", kwargs)

# Serve trame
with SinglePageLayout(server) as layout:
    layout.title.set_text("Quick vuetify test")
    with layout.content:
        with vuetify.VContainer():
            vuetify.VDatePicker(v_model=("baseline_date", min_date), active_picker='DATE', full_width=True, no_title=True, type='date',
                                min=min_date, max=allowed_dates[-1], click=(handle_date, "[$event]"))

if __name__ == "__main__":
    server.start()

Expected behavior

A calendar similar to vuetify date pickers should show up. But instead only half the actual date picker/calendar is generated, the lower half containing days of month is missing.

Screenshots

• Error happened when vuetify3 is used.

• The calendar shows properly when we revert back to vuetify2 (not ideal).

• 

Platform:

Device:

• [x] Desktop
• [ ] Mobile

OS:

• [x] Windows
• [ ] MacOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Browsers Affected:

• [x] Chrome
• [x] Firefox
• [x] Microsoft Edge
• [ ] Safari
• [ ] Opera
• [ ] Brave
• [ ] IE 11

[jourdain]

Thanks for sharing a full example, but from what I remember is that the JavaScript Date object does not properly serialize and information is missing when reaching python.

You can create some workaround with a variable in pure JS and another one that is Python only and then, you create some JS code to sync the 2 together.