**[ This description is mirrored from README.md at [github.com/andrewmiroshnichenko/se-time-input](https://github.com//andrewmiroshnichenko/se-time-input/blob/v1.0.2/README.md) on 2019-05-22 ]** [](https://www.webcomponents.org/element/andrewmiroshnichenko/se-time-input) # 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](https://www.npmjs.com/package/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. ```html ``` ```javascript 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 | | | | --- | --- | | **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 `` tag will lead to disabling of component, even if it's value will be `false`. ```html ``` ```javascript var customEl = document.querySelector('se-time-input'); customEl.disabled; // returns Boolean false customEl.disabled = true; customEl.disabled; // returns Boolean true ``` 3. 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. ```html ``` ```javascript 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](https://www.webcomponents.org/element/andrewmiroshnichenko/se-time-input) ```html ```