Time

npm2.0.0

The time input component is used to collect a specific time value from the user. It can be used as a standalone component or as part of a form.

Example

Enables time selection with hours and minutes.

time

message text

code

<script type="module">
  import '@blueprintui/components/include/time.js';
</script>

<bp-field>
  <label>time</label>
  <bp-time min="09:00" max="18:00" value="11:00"></bp-time>
  <bp-field-message>message text</bp-field-message>
</bp-field>

Vertical

Demonstrates the time picker in vertical form layout.

label

message text

disabled

disabled message

error

error message

success

success message

code

<bp-form-group layout="vertical">
  <bp-field layout="vertical">
    <label>label</label>
    <bp-time></bp-time>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="vertical">
    <label>disabled</label>
    <bp-time disabled></bp-time>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="vertical" status="error">
    <label>error</label>
    <bp-time></bp-time>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="vertical" status="success">
    <label>success</label>
    <bp-time></bp-time>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Horizontal

Demonstrates the time picker in horizontal form layout.

label

message text

disabled

disabled message

error

error message

success

success message

code

<bp-form-group layout="horizontal">
  <bp-field layout="horizontal">
    <label>label</label>
    <bp-time></bp-time>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal">
    <label>disabled</label>
    <bp-time disabled></bp-time>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="error">
    <label>error</label>
    <bp-time></bp-time>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="success">
    <label>success</label>
    <bp-time></bp-time>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Compact

Demonstrates the time picker in compact form layout.

label

message text

disabled

disabled message

error

error message

success

success message

code

<bp-form-group layout="compact">
  <bp-field layout="compact">
    <label>label</label>
    <bp-time></bp-time>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="compact">
    <label>disabled</label>
    <bp-time disabled></bp-time>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="error">
    <label>error</label>
    <bp-time></bp-time>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="success">
    <label>success</label>
    <bp-time></bp-time>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Install

NPM

// npm package
import '@blueprintui/components/include/time.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/time.js/+esm';
</script>

Accessibility

Provide clear and descriptive label or aria-label attribute.
Use proper contrast ratios to ensure that the text is easily readable against the background
Provide clear and descriptive error messages when invalid values are entered

bp-time

Events

Name	Types	Description
`input`	`InputEvent`	occurs when the value changes
`change`	`InputEvent`	occurs when the value changes

Properties

Name	Types	Description
`type`	`string`	Specifies the input type as time for time selection
`i18n`		Provides internationalization strings for translated text content
`min`	`string \| null`	Override min to preserve string time values (HH:MM format)
`max`	`string \| null`	Override max to preserve string time values (HH:MM format)

Attributes

Name	Types	Description
`type`	`string`	Specifies the input type as time for time selection
`i18n`		Provides internationalization strings for translated text content

CSS Properties

Name	Types	Description
`--background-size`
`--color`
`--background`
`--border`
`--border-radius`
`--outline`
`--outline-offset`
`--padding`
`--font-size`
`--line-height`
`--height`
`--min-width`
`--width`
`--transition`
`--text-align`
`--cursor`

Slots

Name	Types	Description
`prefix`		slot for prefix text or icons
`suffix`		slot for suffic text or icons
`default`		slot for time input