Timepicker

A TimePicker is an input that allows users to select a time from a dropdown of options or type one in manually.

Importing

For code splitting optimizations, Timepicker is exported separately and must be imported as shown here:

import { CiTimepicker } from '@ci/stratus-components/build/timepicker'

Default Usage

By default, the TimePicker shows all time slots in a day divided into 15 minute intervals.

You can either select one of these options or enter a time into the input. As you type, the timepicker will try to match the user's input to a time in the dropdown or in the range presented. Pressing enter or tab will select the highlighted 15 minute interval, the closest match to any time, or revert the input to its previous value which will capture both blank inputs and invalid inputs.

Use v-model to pass in and watch changes to the data in ISO format (opens new window).

See the Form Field docs for more information about labeling, descriptions, placeholders, error state success state and more.

<template>
  <ci-timepicker
    v-model="selectedTime"
    sublabel="Time"
    placeholder="Choose a time"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedTime: '',
    }
  }
}
</script>

Time Window

Use the timeWindow prop to define what times can be selected by passing in an array with a start and end time: ['HH:MM:SS', 'HH:MM:SS']. The Timepicker component will split the duration between these two times into 15 minute intervals for you.

Here you can also see that the Timepicker is set to 12:30pm by default.

<template>
  <ci-timepicker
    v-model="selectedTime"
    sublabel="Time"
    placeholder="Choose a time"
    :time-window="['09:00:00', '17:00:00']"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedTime: '12:30:00',
    }
  }
}
</script>

Events

The TimePicker emits two events @input and @update.

Event	Arguments	Description
@input	The value inside the input	Emitted when the input field gets an input event
@highlight	The text highlighted in the dropdown	Emitted whenever a time is highlighted in the dropdown
@update	The selected time in ISO format	Emitted when a time is chosen

This demo shows how to use @input and @update events.

<template>
  <div>
    @input: <code>({{ keystrokes }}) {{ inputVal}}</code>
    <br>
    @update: <code>{{ updateValue }}</code>
    <br>
    selectedTime: <code>{{ selectedTime }}</code>
    <br><br>
    <ci-timepicker
      v-model="selectedTime"
      @input="captureInput"
      @update="captureUpdate"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: '',
      keystrokes: 0,
      updateValue: '',
      selectedTime: '',
    }
  },
  methods: {
    captureInput(val) {
      this.inputVal = val;
      this.keystrokes += 1;
    },
    captureUpdate(val) {
      this.updateValue = val;
    }
  }
}
</script>