Lottra

Loading

Fetching the page content

Loading
Lottra

Quasar QTime-Inspired

Advanced Timepicker Debug Surface

Use this local page to exercise the Alpine-based timepicker across Quasar-style examples for 24-hour mode, masks, option limits, slots, methods, and native form payloads.

Basic modes

Basic and always-visible clock examples

Start with the default clock popup, then keep the full time dial mounted in an always-visible surface.

Basic

The default clock popup mirrors the simple QTime entry point with a single named field underneath.

Always visible with seconds

Keep the clock mounted and include seconds for workflows that need a longer-running operations timer.

Functionality

24-hour mode, now action, and readonly states

These examples cover forced 24-hour formatting, the now action, and locked states for the shared clock surface.

24h format

24h format

Force the clock into 24-hour mode regardless of locale defaults.

Now button

Now button

Use the now action to jump the value to the current local time.

Disable and readonly

Disable and readonly

Readonly and disabled states keep the shell visible but prevent edits to the dial.

Masks and shared models

Masks, escaped text, and date plus time pairing

Switch model masks, escape literal text, and pair a datepicker with the timepicker in the same section.

Simple mask

Simple mask

Use a 12-hour mask while preserving the same clock interaction pattern.

Mask with escaped characters

Mask with escaped characters

Literal text inside the mask stays intact by wrapping static text in brackets.

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.

Locale and limits

Color, locale, and explicit option limits

Recolor the picker accent, switch locale-aware labels, and limit allowed hours, minutes, or seconds to approved values.

Color setting

Switch the accent token to confirm the trigger, now button, and active clock values update together.

Color setting

Swap the picker accent away from primary and confirm the input shell, hero, now button, and active time states inherit the new tone.

Custom locale

Custom locale

Locale-aware labels can change independently from the canonical model mask.

Limiting options

Limiting options

Restrict hours, minutes, and seconds to approved values to enforce valid schedule slots.

Integrations

Input shells, prefix or suffix triggers, and always-visible mode

Exercise the default input shell, slot-based trigger affordances, and a permanently visible dial layout.

With input

With input

The component renders a standard input shell that opens the clock dial on click.

Always visible

Always visible

Keep the clock mounted when the timepicker needs to behave like a dashboard widget.

Methods and events

External method controls

Drive the timepicker from outside the component to verify the exposed `show`, `hide`, `toggle`, `setNow`, 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 timepicker 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 timepicker 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.