Lottra

Loading

Fetching the page content

Loading
Lottra

Quasar QDate-Inspired

Advanced Datepicker Debug Surface

Use this local page to exercise the Alpine-based datepicker across Quasar-style examples for masks, selection models, locale, navigation boundaries, slots, methods, and native form payloads.

Basic modes

Basic and landscape examples

Start with the default popup input, then keep the calendar visible in a landscape-style card layout.

Basic

The default popup surface matches the plain QDate entry point while keeping the submitted model in a named hidden field.

Basic

The default popup surface matches the plain QDate entry point while keeping the submitted model in a named hidden field.

Landscape

Always-visible mode keeps the calendar on screen and lets the layout stretch into a wide scheduling card.

Landscape

Always-visible mode keeps the calendar on screen and lets the layout stretch into a wide scheduling card.

Selection models

Multiple and range selection

Mirror the QDate multiple and range examples with canonical hidden field payloads and visible summaries.

Multiple selection

Clicking a selected day removes it again, while the hidden field stores a JSON array of the selected dates.

Multiple selection

Clicking a selected day removes it again, while the hidden field stores a JSON array of the selected dates.

Range selection

The range example emits start and end values and keeps the selected window highlighted between both anchors.

Range selection

The range example emits start and end values and keeps the selected window highlighted between both anchors.

Multiple range selection

This example stores an array of range objects so disjoint windows stay highlighted and editable in one payload.

Multiple range selection

This example stores an array of range objects so disjoint windows stay highlighted and editable in one payload.

Functionality

Headers, default periods, and today workflows

These examples cover custom headers, default year-month, default views, the first day of week, and disabled or readonly states.

Custom title and subtitle

Birthday

John Doe

Use custom header text that still lets the title jump back to the calendar view and the subtitle switch to the year grid.

Default year month

Default year month

When no model is filled, the picker can still open on a configured reference month.

Default view

Default view

Open directly on the year grid for long-range navigation workflows.

First day of week

First day of week

Shift the weekday headers so Monday starts the calendar instead of Sunday.

Today button

Today button

Use the built-in today action to jump back to the current local date quickly.

Disable and readonly

Disable and readonly

Readonly and disabled states keep the rendered shell visible but prevent any calendar edits.

Masks and locale

Masks, escaped text, locale, and Persian labels

Use custom masks, escaped text, locale-aware labels, and a Persian-calendar presentation to mirror the Quasar examples.

Simple mask

Simple mask

Switch the model string to a different mask without changing the calendar interaction.

Mask with escaped characters

Mask with escaped characters

Literal text inside the mask stays intact by using bracket escapes around static fragments.

Custom locale

Custom locale

Month and weekday labels can be localized independently from the canonical model string.

Persian calendar

Persian calendar

Show Persian month and weekday labels while keeping the date model shape predictable for the demo.

Color and limits

Picker colors, events, and date limits

Recolor the picker accent, highlight event dates, restrict allowed dates, and fence navigation between approved month boundaries.

Coloring and events

Switch the accent token to confirm the trigger, selected date, and default event dots update together.

Coloring and events

Recolor the shared picker accent while still marking notable dates with custom event dots and default accent dots.

Limiting options

Limiting options

Restrict selection to an approved set of dates when only specific appointment windows are valid.

Navigation boundaries and additional buttons

Navigation boundaries and additional buttons

Fence the visible months between July and September and keep a footer note for extra button workflows.

Integrations

Input, prefix or suffix triggers, and split layouts

Exercise the standard input shell, trigger slots, and a splitter-plus-tabs style layout around the shared component.

With input

With input

The component renders a standard form input shell that opens the calendar on click.

Input with prefix and suffix triggers

Use one seamless field with a date trigger and a time trigger so each picker opens inside its own responsive popover, matching the Quasar combined input pattern more closely.

With splitter and tabs

Highlighted dates borrow the events pattern and open richer agenda content in the wider panel beside the calendar.

With splitter and tabs

Highlighted dates borrow the events pattern and open richer agenda content in the wider panel beside the calendar.

This side panel mirrors the QSplitter and QTabPanels composition pattern by keeping the selected highlighted date details adjacent to the live picker.

Methods and events

External method controls

Drive the datepicker from outside the component to verify the exposed `show`, `hide`, `toggle`, `setValue`, and `setView` methods.

Public methods

Public methods

External controls call the root picker API directly so method wiring can be checked without reaching into Alpine internals.

Payload inspector

Inspect serialized datepicker values

Changes in any demo above update the parsed form payload and the most recent picker events for quick verification.


                    

                

            


            

                

                    

                        Native form submit

                    

                        Native form serialization

                    

                        This section demonstrates that the datepicker writes the expected named field value for plain HTML form submission.

                


                

                    

    

        

            

                
                                    
                
                                    
Native form submit

                
                
                                    
Submitting the form serializes the hidden input value exactly as a non-JavaScript backend would receive it.