Polymer wrapper around with browser-dependent appearance

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

Published on webcomponents.org

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
Property name value
Property type String
Default value 00:00
Can be set from html Yes
Corresponding attribute 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'
  1. Disabled
Property name disabled
Property type Boolean
Default value false
Can be set from html Yes
Corresponding attribute 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
  1. Placeholder
Property name placeholder
Property type String
Default value -
Can be set from html Yes
Corresponding attribute 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:

Custom property Description Default
--seinput-text-color Input digits color Browser-default(black)
--seinput-bottom-line-color Style of component’s bottom line. Other borders are disabled 1px solid rgba(0, 0, 0, .12)
--seinput-placeholder-color Color of placeholder text #999999
--seinput-input-font-size Font size of digits. All component dimesions will scale accordingly 16px
--seinput-input-font-family Font family of input digits Roboto, sans-serif

Demo

Better view on webcomponentsjs.org

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

Install

Link to this version
TestedReleased 25 July 2017Apache License 2.0
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 1.0.2

Dependencies

Polymer/polymer#^2.0.0-rc.2