Timepicker

The <wui-timepicker> is wrapper component built on top of vue2-datepicker plugin. It extends plugin functionality to fit WeScale requirements regarding functionality and style guide.

Description

<wui-timepicker> is component used to display timepicker to user. It consists of input group (input and trigger button) and time picker panels, with options to override default slots. To set time bind value via v-model. Component accepts many props to customize plugin based on developer needs.

<wui-timepicker
  v-model="value"
  locale="en-US"
  format="hh:mm A"
  placeholder="hh:mm A"
/>

export default { data() { return { value: new Date(), }; }, }

v-model binding

If you bind a variable to the v-model prop, the contents of this variable will be the currently selected time. v-model value type depends on prop valueType default value type is JS date object.

Value type

Developers can set the format of binding value with prop valueType. Default is "date", other available options are:

<wui-timepicker value-type="timestamp" v-model="new Date().getTime()" />

Plugin type

There are two display types, default simple and precise. Developers can change type with displayType property.

When using simple timepicker display type developer can set multiple options like format and timePickerOptions with start, step and end values that define plugin panel display.

Difference between precise and simple options is that simple option will display all time units in one panel/column while precise will have many columns depending on format.

<wui-timepicker
  display-type="simple"
  format="hh:mm A"
  placeholder="hh:mm A"
  :time-picker-options="{ step: '00:15' }"
/>

Locale

Use locale property to set user locale for timepicker formatting settings. Default locale is en-US.

Datepicker supports all locales that are supported by old datepicker plugin and by WeScale IntlJS.

All locale options contain values required by timepicker plugin.

<wui-timepicker locale="de-DE" />

Relevant properties for timepicker are included in locale object. Example for de-DE:

{
  ...
  use12h: false,
  timeFormat: 'HH:mm:ss',
  ...
}

use12h

Default value for use12h is set automatically from locale settings object.

It's important to note that use12h is prop from vue2-datepicker plugin and it will hide/show AM-PM column and display 24 hour column in "precise" type of timepicker!

Timezone

Timepicker will always output time as JavaScript Date object in user locale timezone. To change timezone developers modify JS Date object or can create new select component with timezones and use selection value to change timezone.

Formatting

Developers can set custom time formatting for input element using time tokens. Users can type in, or paste text in defined format. If format property is not defined then default formatting will be locale format.

<wui-timepicker format="hh:mm A" placeholder="hh:mm A" />

User input

User can type in, or paste text in input element, and if that value is in correct user locale format it will be displayed in timepicker. e.g. user locale is de-DE user can type in or paste in value e.g. 16:21:38. In case when input value is in different format from user locale plugin will simply ignore that value.

Set time

Use v-model property to set time. Accepted value depends on valueType prop, default is JavaScript date object.

<wui-timepicker :v-model="value" format="HH:mm:ss" />

export default { data() { return { value: new Date('2022-06-21T12:00:00Z'), };
}, }

Hide selection options

To hide specific column for precise timepicker use available properties showHour, showMinute and showSecond.

Default display depends on format prop, but it will be overridden if one of the above mentioned props are used.

It's important to understand that if format prop is used with for example showSecond, it will only hide seconds column when displayType: 'precise' is used, and input value will match format. For displayType: simple format has precedence over showSecond i.e. if format is hh:mm:ss A then seconds will be displayed in selection even if showSecond: false.

<wui-timepicker :v-model="value" :show-second="false" />

Hour, minute and second steps

Timepicker has two option to set allowed hour, minute and second steps for selection.

For simple displayType developers can set custom time picker options with timePickerOptions property:

<wui-timepicker
  display-type="simple"
  format="hh:mm A"
  placeholder="hh:mm A"
  :time-picker-options="{ start: '01:15', step: '00:15', end: '19:45' }"
/>

For precise displayType developers can use hourStep, minuteStep and secondStep properties:

<wui-timepicker :minute-step="15" :disabled-time="date => date < new Date()" />

Disable time

To disable specific time selection use disabledTime property. It's function with date argument that should compare every value from timepicker with custom JavaScript date object.

For example allow only future time selection:

<wui-timepicker
  format="hh:mm A"
  placeholder="hh:mm A"
  :disabled-time="date => date < new Date()"
/>

Component reference

<wui-timepicker>

• <wui-timepicker> Properties
• <wui-timepicker> Events
• <wui-timepicker> Slots

Properties

Events

Slots