https://github.com/muan/input-duration-element

A Custom Element for <input type="duration">.
https://github.com/muan/input-duration-element

custom-elements input-type

Last synced: 2 months ago
JSON representation

A Custom Element for <input type="duration">.

• Host: GitHub
• URL: https://github.com/muan/input-duration-element
• Owner: muan
• License: mit
• Created: 2023-01-25T03:12:32.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-27T09:12:31.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T18:07:43.950Z (2 months ago)
• Topics: custom-elements, input-type
• Language: JavaScript
• Homepage: https://muan.github.io/input-duration-element/
• Size: 17.6 KB
• Stars: 11
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

README

        
# ``

A Custom Element for ``.

References:

- Browser support

  - Stable: https://wpt.fyi/results/custom-elements/HTMLElement-attachInternals.html?label=master&label=stable&aligned&view=subtest

  - Experimental: https://wpt.fyi/results/custom-elements/HTMLElement-attachInternals.html

  - https://webkit.org/blog/13703/release-notes-for-safari-technology-preview-162/

- Web standards

  - https://github.com/whatwg/html/issues/5488

  - https://github.com/tc39/proposal-intl-duration-format

## Usage

```html

Duration

```

## Attributes

- `max` (`number`): Max value of duration in seconds.

- `name` (`string`): Input name.

- `value` (`number`): Default value of duration in seconds.

## Shadow Parts

- `::part(divider)`: Divider (`:`).

## Slots

- `hour`: Default to `:`.

- `minute`: Default to `:`.

- `second`:  Default to empty.

## Methods

- `inputDuration.value = number` sets duration value to number in seconds.

- `inputDuration.value` gets duration value to number in seconds.

## Events

- `change` fires when duration value changes.

## Todo

- Support `min`

- Validation

- Figure out `maxLength`, `max`, `size`.