Time picker
Examples
No suggestions
Stepping
Min and max
Custom suggestions
Input attributes
Disabled
Required
Importing
Properties
Events
Methods
Custom Properties
Parts
Dependencies

Time Picker

<mo-time-picker> | MOTimePicker

Since 1.6

stable

The time picker allows users to select a time from a dropdown.

<mo-time-picker label="Time"></mo-time-picker>

import { MOTimePicker } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOTimePicker label="Time"></MOTimePicker>;

Examples

No suggestions

By default the time picker provides a dropdown of options to choose a time from. Use the no-suggestions attribute to disable the dropdown.

<mo-time-picker no-suggestions format="HH:mm:ss" label="Time"></mo-time-picker>

import { MOTimePicker } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOTimePicker noSuggestions label="Time"></MOTimePicker>;

Stepping

The step attribute defines the distance between suggestions. It should be given as seconds, and it defaults to 3600 seconds (one hour). In this example, it is set to 1800, which is half an hour.

<mo-time-picker step="1800" label="Time"></mo-time-picker>

import { MOTimePicker } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOTimePicker step="1800" label="Time"></MOTimePicker>;

Min and max

A minimum and maximum time will limit the options shown on the dropdown, and also validate that any manually inputted time follows these constraints.

<mo-time-picker
  help-text="Open 12:00 - 18:00"
  min="12:00"
  max="18:00"
  step="1800"
  label="Appointment time"
></mo-time-picker>

import { MOTimePicker } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTimePicker
    help-text="Open 12:00 - 18:00"
    min="12:00"
    max="18:00"
    step="1800"
    label="Appointment time"
  ></MOTimePicker>
);

Custom suggestions

Shown suggestions can be customized at will using the options attribute. Note that you need to ensure they are in the correct format. This functionality can be used e.g., to show pre-set available times to choose from.

<mo-time-picker
  help-text="Find available times in the dropdown, or input a manual time to submit a request for that time slot."
  min="12:00"
  max="18:00"
  id="custom"
  label="Appointment time"
></mo-time-picker>
<script>
  const picker = document.getElementById('custom');
  picker.options = [
    { text: '15:35', value: '15:35' },
    { text: '16:20', value: '16:20' },
    { text: '16:45', value: '16:45' },
    { text: '17:30', value: '17:30' }
  ];
</script>

import { MOTimePicker } from '@metsooutotec/modes-web-components/dist/react';

const suggestions = [
  { text: '15:35', value: '15:35' },
  { text: '16:20', value: '16:20' },
  { text: '16:45', value: '16:45' },
  { text: '17:30', value: '17:30' }
];

const App = () => (
  <MOTimePicker
    help-text="Find available times in the dropdown, or input a manual time to submit a request for that time slot."
    min="12:00"
    max="18:00"
    id="custom"
    suggestions={suggestions}
    label="Appointment time"
  ></MOTimePicker>
);

If the users must always select a pre-set time, usage of mo-select should be considered.

Input attributes

The mo-time-picker is similar to the standard mo-input component. It can use many of mo-input’s attributes, such as clearable, placeholder and size. See the full list in the properties section.

<mo-time-picker
  help-text="Open 12:00 - 18:00"
  min="12:00"
  max="18:00"
  size="small"
  step="1800"
  clearable
  placeholder="HH:MM"
  label="Appointment time"
></mo-time-picker>

import { MOTimePicker } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTimePicker
    help-text="Open 12:00 - 18:00"
    min="12:00"
    max="18:00"
    size="small"
    step="1800"
    clearable
    placeholder="HH:MM"
    label="Appointment time"
  ></MOTimePicker>
);

Disabled

A disabled time picker will not allow interaction, but it will evaluate to valid on form submission.

<mo-time-picker disabled label="Appointment time"></mo-time-picker>

import { MOTimePicker } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOTimePicker disabled label="Appointment time"></MOTimePicker>;

Required

If the required attribute is set to true, the time picker will stop form submission if no value has been selected. The picker also automatically checks if it is formatted correctly and if the given time is between the minimum and maximum time values (if set).

submitted data will be here...

<form class="form" id="req-form">
  <mo-time-picker
    help-text="Open 12:00 - 18:00"
    min="12:00"
    max="18:00"
    placeholder="HH:MM"
    label="Time"
    name="time"
    required
    id="picker-required"
  >
  </mo-time-picker>
  <br />
  <mo-button type="submit">Submit</mo-button>
</form>
<mo-divider></mo-divider>
<pre id="data">submitted data will be here...</pre>
<script>
  const form = document.querySelector('#req-form');
  const output = document.querySelector('#data');
  const req = document.querySelector('#picker-required');
  form.addEventListener('submit', e => {
    e.preventDefault();
    const formData = new FormData(form);
    if (!req.invalid) {
      var object = {};
      formData.forEach((value, key) => (object[key] = value));
      var json = JSON.stringify(object, null, 2);
      output.innerHTML = json;
    }
  });
</script>

import { MOTimePicker } from '@metsooutotec/modes-web-components/dist/react';

// form submission logic here

const App = () => (
  <>
    <form>
      <MOTimePicker
        help-text="Open 12:00 - 18:00"
        min="12:00"
        max="18:00"
        placeholder="HH:MM"
        label="Time"
        name="time"
        required
        id="picker-required"
      ></MOTimePicker>
      <br />
      <MOButton type="submit">Submit</MOButton>
    </form>
    <MODivider></MODivider>
    <output id="data">submitted data will be here...</output>
  </>
);

The time picker does not properly report its validity currently, and the form submission requires an extra check to see if the time picker is actually valid. See the source code above for an example.

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler

React

Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/time-picker/time-picker.js';

To import this component as a React component:

import MOTimePicker from '@metsooutotec/modes-web-components/dist/react/time-picker/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/time-picker/time-picker.js"></script>

Properties

Name	Description	Type	Default
`options`	Custom suggestions for the picker dropdown.	`{ text: string \| undefined; value: string \| undefined }[] \| undefined`	`undefined`
`size`	The time picker’s size.	`'small' \| 'medium' \| 'large'`	`'medium'`
`label`	The time picker’s label.	`string`	-
`name`	The time picker’s name attribute.	`string`	-
`value`	The time picker’s value attribute.	`string`	`''`
`invalid`	This will be true when the control is in an invalid state. Validity is determined by props such as `type`, `required`, `minlength`, `maxlength`, and `pattern` using the browser’s constraint validation API.	`boolean`	`false`
`helpText` `help-text`	The time picker’s help text.	`string`	`''`
`error`	Renders the field in an error state	`boolean`	`false`
`success`	Renders the field in a success state	`boolean`	`false`
`errorText` `error-text`	Error text to show in place of help text when input is invalid.	`string`	`''`
`successText` `success-text`	Success text to show in place of help text when input is valid.	`string`	`''`
`clearable`	Adds a clear button when the input is populated.	`boolean`	`false`
`readonly`	Disables interactivity for the time picker.	`boolean`	`false`
`required`	The time picker’s required attribute.	`boolean`	`false`
`noSuggestions` `no-suggestions`	Disable dropdown of suggestions.	`boolean`	`false`
`hoist`	Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`.	`boolean`	`false`
`format`	The time input’s format.	`string`	`'HH:mm'`
`placeholder`	The input’s placeholder text. Defaults to format.	`string`	-
`autofocus`	The input’s autofocus attribute.	`boolean`	-
`disabled`	Disables the time picker component.	`boolean`	`false`
`delay`	The delay in milliseconds between when a keystroke occurs and when a search is performed.	`number`	`0`
`step`	Defines the time interval (in seconds) between the items displayed in the time selection box. The default is 1 hour (i.e. `3600`).	`number`	`3600`
`min`	Minimum time allowed. Supported time formats are in ISO 8601: - `hh:mm` - `hh:mm:ss` - `hh:mm:ss.fff`	`string`	`'00:00'`
`max`	Maximum time allowed. Supported time formats are in ISO 8601: - `hh:mm` - `hh:mm:ss` - `hh:mm:ss.fff`	`string`	`'23:59'`
`validity`	Gets the validity state object	-	-
`validationMessage`	Gets the validation message	-	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`mo-select`	`onMoSelect`	Emitted when a menu item is selected.	`{ item: MOOption }`
`mo-change`	`onMoChange`	Emitted when the input’s value changes.	-
`mo-clear`	`onMoClear`	Emitted when the clear button is activated.	-
`mo-input`	`onMoInput`	Emitted when the input receives input.	-
`mo-focus`	`onMoFocus`	Emitted when the input gains focus.	-
`mo-blur`	`onMoBlur`	Emitted when the input loses focus.	-
`mo-show`	`onMoShow`	Emitted when the dropdown opens.	-
`mo-after-show`	`onMoAfterShow`	Emitted after the dropdown opens and all animations are complete.	-
`mo-hide`	`onMoHide`	Emitted when the dropdown closes.	-
`mo-after-hide`	`onMoAfterHide`	Emitted after the dropdown closes and all animations are complete.*	-

Learn more about events.

Methods

Name	Description	Arguments
`checkValidity()`	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.	-
`getForm()`	Gets the associated form, if one exists.	-
`reportValidity()`	Checks for validity and shows the browser’s validation message if the control is invalid.	-
`addStep()`	Returning Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }` from the result of adding step value in milliseconds to the milliseconds amount. With `precision` parameter rounding the value to the closest step valid interval.	`msec: number, step: number, precision: number`
`getSec()`	Returning seconds from Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`	`obj: Partial<TimeObject>`
`resetCustomValidity()`	Reset custom validity message if input is cleared.	-

Learn more about methods.

Custom Properties

Name	Description	Default
`--focus-ring`	The focus ring style to use when the control receives focus, a `box-shadow` property.

Learn more about customizing CSS custom properties.

Parts

Name	Description
`base`	The component’s base wrapper.
`label__base`	The input label.
`input`	The input control.
`clear-button`	The clear button.
`suffix`	The input suffix container.
`help-text`	The input help text.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

Ask Rocky (Beta)

Examples

No suggestions

Stepping

Min and max

Custom suggestions

Input attributes

Disabled

Required

Importing

Properties

Events

Methods

Custom Properties

Parts

Dependencies