se-time-input

Polymer wrapper around <input type="time"> with browser-dependent appearance

View larger

Close

[ This description is mirrored from README.md at github.com/andrewmiroshnichenko/se-time-input on 2019-05-22 ]

se-time-input

Polymer wrapper around input type time with browser-dependent appearance. Basically, it allows user to use native mobile time pickers and Edge time picker, because they are looking good and provide good experience. In other cases (unsuppored type time or desktop Chrome) input will become text with ability to manually enter the value.

Install

$ bower install se-time-input

Make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing component

$ polymer serve

Running tests

$ polymer test

API

Component have four public properties.

1. Value

Actual value of the component. Has format hh:mm where hh is hours(values from 0 to 23) and mm is minutes(values from 0 to 59). Input in inacceptable format will cause error to show.

      <se-time-input value="12:34"></se-time-input>

      var customEl = document.querySelector('se-time-input');
      customEl.value; // returns String '12:34'
      customEl.value = '10:00';
      customEl.value; // returns String '10:00'

2. Disabled

If true - disables possibility of user interaction with component. But component’s value still will be changeable from code. Warning: presence of this property as attribute of <se-time-input> tag will lead to disabling of component, even if it's value will be false.

      <se-time-input></se-time-input>

      var customEl = document.querySelector('se-time-input');
      customEl.disabled; // returns Boolean false
      customEl.disabled = true;
      customEl.disabled; // returns Boolean true

3. Placeholder

String that is shown as component’s placeholder when component’s value is empty. Length of this property is limited to 10 characters, bigger placeholder will explicitely cut to this length. When component’s value changes from empty to non-empty placeholder should move to “upper left corner” of the component.

      <se-time-input placeholder="Enter time"></se-time-input>

      var customEl = document.querySelector('se-time-input');
      customEl.placeholder; // returns String 'Enter time'
      customEl.placeholder = 'hh:mm';
      customEl.placeholder; // returns String 'hh:mm'

Styling

The following custom properties are available for styling:

Demo

Better view on webcomponentsjs.org <!--

<custom-element-demo>
  <template>
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="se-time-input.html">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>

-->

<se-time-input placeholder="hh:mm" value="10:45"></se-time-input>

Links

• Online Demo
• Documentation
• View on GitHub
• GitHub Homepage
• Issue tracker

Compatibility