Troubleshooting VDateInput component

[EZoni]

Hello,

This Trame code for a date input range selector (including variations of v_model=("date_range", [None, None]) such as v_model=("date_range", []) or v_model=("date_range", None))

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


server = get_server(client_type = "vue3")


with SinglePageLayout(server) as layout:
    with layout.toolbar:
        vuetify.VSpacer()
        vuetify.VDateInput(
            v_model=("date_range", [None, None]),
            label="Select range",
            multiple="range",
            dense=True,
            hide_details=True,
            style="max-width: 368px;",
        )


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

does not seem to render the VDateInput component at the right end of the toolbar:

On the other hand, this Trame code for a single date selector

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


server = get_server(client_type = "vue3")


with SinglePageLayout(server) as layout:
    with layout.toolbar:
        vuetify.VSpacer()
        vuetify.VTextField(
            v_model=("date", None),
            label="Select date",
            type="date",
            dense=True,
            hide_details=True,
            style="max-width: 368px;",
        )


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

does render the VTextField component correctly:

I would like to use the VDateInput component because it allows for range selection, as shown in one of the examples at https://vuetifyjs.com/en/components/date-inputs/#range:

Could you help me understand why the first code above, with VDateInput, does not render the component correctly? Note also that wrapping the VDateInput component within a with html.Div(classes="d-flex justify-center"): (to fully mimic the Vuetify example) does not seem to work either.

[alesgenova]

Looks like the VDateInput widget is part of the Vuetify Lab experimental components.
You can activate these components in trame by calling the enable_lab() function in the trame-vuetify package

[EZoni]

Thank you, @alesgenova! Calling vuetify.enable_lab() in my example above fixes the issue.