TimePicker

The TimePicker control provides the ability to select time in the specified format. You can add a label for a time picker, disable the control, if needed, and specify the time value that should be displayed in the time picker.

Related resources

• Get the widget by installing the wx-svelte-core package.
• Check TimePicker API Reference to see the list of configuration properties.
• Explore the samples to visualize the available features.

Initialization

To create a TimePicker instance on a page, you need to complete the following steps:

• import the source file of the control on a page:

App.svelte

<script>
    import { Timepicker } from "wx-svelte-core";
</script>

• use the <Timepicker> tag to initialize the control:

App.svelte

<Timepicker />

A default time picker is initialized with the midnight time (00:00) displayed.

Setting the value

To show a certain time in a time picker, use the value property. Set the new Date() constructor as a value of this property. The default value is new Date(0, 0, 0, 0, 0);.

The options for setting time are the following:

• you can set the time via the last two parameters of the new Date(YYYY, MM, DD, HH, mm) function. The time is displayed according to the passed hour and minutes values
• you can call the new Date() function with no parameters, to show the current date and time

note

Note that if you provide a date with no time specified, e.g. new Date(2023, 3, 16), the midnight time will be shown.

The examples below sum up the variants TimePicker provides for setting the value:

<!-- shows the current time -->
<Timepicker value={new Date()} />

<!-- shows the specified hour and minutes -->
<Timepicker value={new Date(2023, 3, 16, 12, 12)} />

<!-- shows the midnight time of the specified date -->
<Timepicker value={new Date(2023, 3, 16)} />

Related sample: TimePicker

Getting the current value

You can get the current value of the TimePicker control. For this, you need to:

• declare a variable that will contain the control's value (it may contain the initial value):

<script>
    import { Timepicker } from "wx-svelte-core";

    let time;
</script>

• bind the variable to the value property of the control:

<Timepicker bind:value={time} />

If the name of the variable matches its value, you can use the shorthand while binding the property:

<script>
    import { Timepicker } from "wx-svelte-core";

    let value;
</script>

<Timepicker bind:value />

After that the value assigned to the bound variable will be updated on each change of the time.

Related sample: TimePicker

Setting the time format

It is possible to specify the time format of the Timepicker input via the format property. The value of this property should be set either as a string with the format or as a function that returns a formatted string.

<Timepicker {value} format="%g:%i %a" />

The default value is "%H:%i". Check the characters available for specifying the time format.

Related sample: TimePicker

note

The format property specifies the time format for the input of the Timepicker control. To set the 12-hour/24-hour time format for the Timepicker dropdown, you should also use the clockFormat property of the calendar object in the applied locale.

Localizing TimePicker

You can apply localization settings to the interface of TimePicker. To change the default English locale, you need to import the Locale object and the desired locale into the page of your application:

App.svelte

<script>
    import { Timepicker, Locale } from "wx-svelte-core";
    // importing the Chinese locale
    import { cn } from "wx-core-locales";
</script>

To apply the chosen locale, you need to:

• wrap a time picker instance in the <Locale> tag
• use the words property and set the name of the locale as its value

App.svelte

<!-- setting the Chinese locale -->
<Locale words={cn}>
    <Timepicker {value} />
</Locale>

The result of applying the Chinese locale is given below:

Related sample: TimePicker

Setting the time format from the locale

Timepicker displays time both in the 12-hour and 24-hour (default) clock format. You can adjust the displaying of time in the Timepicker dropdown and apply the necessary format to the time rendered in the Timepicker input from the applied locale.

To provide the desired format for Timepicker you should:

• wrap a time picker instance in the <Locale> tag and set the words property for it
• specify the calendar object inside the words object and define the clockFormat property with the necessary value: 12 or 24
  note

  The clockFormat property sets the 12-hour/24-hour clock format for the time displayed in the Timepicker dropdown.

• specify the formats object inside the words object and define the timeFormat property with the necessary time format set as a string. Check the characters available for specifying the time format

info

Note that timeFormat set in the <Locale> tag will be applied for all the controls specified within this tag. Thus, this way is useful for setting the time format for the whole app or a form that contains several time pickers. If you need to modify the time format of a separate time picker, you can use the format property.

For example:

<script>
    import { Timepicker, Locale } from "wx-svelte-core";
</script>

<Locale
    words={{
        formats: { timeFormat: "%g:%i %a" },
        calendar: { clockFormat: 12 },
    }}
>
    <Timepicker {value} />
</Locale>

When the 12-hour format is enabled:

• the input gets the "am/pm" label next to it
• the popup with time settings gets a two-state button which changes its states from "am" to "pm" on click

Check the images below for visualization:

Related sample: TimePicker

Customizing the position of the icon

The "wxi-clock" icon is placed in the rightmost part of the time picker input by default. You can put the icon in the leftmost part of the input (before the displayed time) with the help of the css property of the control. Specify the name of the icon as "wx-icon-left":

<Timepicker css="wx-icon-left" />

Adding a title

A title is a tooltip text that appears on hovering the mouse cursor over the input and may contain some extra information about the control. Use the title property to add a tooltip for a time picker:

<Timepicker error title="Invalid option" />

Related sample: TimePicker

Setting the disabled state

Whenever you need to render a disabled time picker, you can do it with the help of the disabled property. You can either set the property to true or set it without any value.

<Timepicker disabled={true}/> <!-- equals to <Timepicker disabled/> -->

Related sample: TimePicker

Adding a label

A default time picker has no label. To add it, you can use the Field component and complete several steps:

• include the Field source file on a page, declare the <Field> tag and complete it with the necessary props:
  • add a desired label via the label property
  • optionally, set the position="left" property to place the label to the left of the time picker
  • specify the id variable to bind the field and time picker controls

<script>
    import { Timepicker, Field } from "wx-svelte-core";
</script>

<Field label="Select time" position="left" let:id/>

After that, wrap the time picker in question in the <Field> tags and specify the id property in the time picker to link the controls:

<Field label="Select time" position="left" let:id>
    <Timepicker {id} />
</Field>

Related sample: TimePicker

Styling a time validation error

When you use a time picker inside a form and a wrong time value is passed to the control, you can use error styling to show that validation has failed. Once you've set the error property to true (or just specified the property without a value):

<Timepicker error={true}/>

the input's border, the selected time and the clock icon become red. To make the label red as well, use the error property of the Field control.

<script>
    import { Timepicker, Field } from "wx-svelte-core";
</script>

<Field label="Error" error let:id>
    <Timepicker error={true} {id}/>
</Field>

Related sample: TimePicker