Timepicker

Display a timepicker. There are two styles to choose from. Popup and inline. The default is popup.

                
                    <x-bladewind::timepicker  />
                
            

                
                    <x-bladewind::timepicker style="inline"  />
                
            

Time Formats

By default the timepicker displays time in the 12 hour format. This format has hours from 1 to 12 and an AM/PM suffix. To change this to a 24 hour format, set format="24". The 24 hour time format gets rid of AM/PM suffix and displays the hours from 01 to 00. Note how the hours in 24 hour format are double digits.

                
                    <x-bladewind::timepicker format="24"  />
                
            

                
                    <x-bladewind::timepicker style="inline" format="24"  />
                
            

Required Fields

An asterisk is appended to the placeholder text when required="true".

                
                    <x-bladewind::timepicker required="true"  />
                
            

                
                    <x-bladewind::timepicker label="HH:MM" required="true"  />
                
            

                
                    <x-bladewind::timepicker style="inline" required="true"  />
                
            

Default Values

There are times you will want the timepicker to be prepopulated with a default time. This is useful when in edit mode. To achieve this, set the selected attribute to the time you will like to display. The format of the time you set will depend on the format defined on the timepicker.

                
                    <x-bladewind::timepicker selected_value="3:25PM"  />
                
            

                
                    <x-bladewind::timepicker selected_value="03:25" format="24" />
                
            

                
                    <x-bladewind::timepicker style="inline" selected_value="3:25PM"  />
                
            

                
                    <x-bladewind::timepicker style="inline" format="24" selected_value="03:25"  />
                
            

<x-bladewind::timepicker
    required="true"
    style="inline"
    format="24"
    selected_value="03:25"  />

Form Values

Typically in a form, you should specify a name for your timepicker component. A default random name is generated if no name is specified. Let's assume in our form the timepicker is named event_time. An input is created with the name specified. In this case event_time.

When your form is submitted, you will be able to retrieve the time as shown below.

        
            // if format="12" (default)
            $request->event_time; // outputs 1:25PM

            // if format="24"
            $request->event_time; // outputs 01:25
        
    

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the timepicker component.

Timepicker with all attributes defined

<x-bladewind.timepicker
    name="start_time"
    format="24"
    required="false"
    hour_label="hh"
    minute_label="mm"
    format_label="AM/PM"
    placeholder="Start Time"
    label="Start Time"
    style="inline"
    selected_value="12:35AM" />