with browser-dependent appearance"> with browser-dependent appearance"> with browser-dependent appearance">

Directory

← Back

se-time-input

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

Author

Contributors

Rating

[ 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 <!--

<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>

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Polymer/polymer#^2.0.0-rc.2

Released
2017-07-25
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent
Online