Directory

← Back

datetime-picker

A minimal picker for date and time for Polymer, that can use the native input

Author

Rating

Popularity

<100

Published on NPM Published on webcomponents.org

API & Demo

The repository includes various helper components and standard styles used in elements like number-input, text-input, color-input, datetime-input, datetime-picker and color-picker.

It includes the following component-pattern:

  • input-pattern
  • input-picker-pattern

and component-mixins:

  • overlay-picker-mixin
  • form-element-mixin
  • switch-container-mixin

and style-mixins:

  • dropdown-style
  • dropdown-tip-style
  • input-shared-style
  • input-picker-shared-style

and components:

  • overlay-element
    • A simple element, that creates an overlay using iron-overlay-behavior.

default style-properties and -mixins

input-shared-style

Custom property Description Default
--input-color text-color of the input inherit
--input-background background of the input transparent
--input-border-width border-width of the input thin
--input-border-style border-style of the input dotted
--input-border-color border-color of the input rgba(0, 0, 0, 0.25)
--input-padding padding of the input 0.25em
--input-border-radius border-radius of the input 0.25em
--input-transition-duration transition-duration of the input 250ms
--input-transition-property transition-property of the input background
--input-transition-timing-function transition-timing-function of the input cubic-bezier(0.6, 1, 0.2, 1)
--input-align text-align of the input input center
--input-cursor cursor of the input input initial
--input-focus-color text-color of the focused and hovered input inherit
--input-focus-background background of the focused and hovered input rgba(0, 0, 0, 0.1)
--input-focus-border-style border-style of the focused and hovered input dotted
--input-focus-border-color border-color of the focused and hovered input rgba(0,0,0,0.5)
--input-invalid-color text-color of the invalid input inherit
--input-invalid-background background of the invalid input rgba(255, 0, 0, 0.25)
--input-invalid-border-style border-style of the invalid input dotted
--input-invalid-border-color border-color of the invalid input rgba(255, 0, 0, 0.5)
--input-disabled-color text-color of the disabled input inherit
--input-disabled-background background of the disabled input transparent
--input-disabled-font-style font-style of the disabled elements oblique
--input-disabled-opacity opacity of the disabled input 0.75
--input-placeholder-opacity opacity of the placeholder 0.75
--input-placeholder-align text-align of the placeholder center
--input-selection-color text-color of the selected text inherit
--input-selection-background background of the selected text rgba(255, 255, 255, 0.5)
--input-style mixin applied to the input {}
--input-focus mixin applied to the focused and hovered input {}
--input-invalid mixin applied to the invalid input {}
--input-disabled mixin applied to the disabled input {}
--input-placeholder mixin applied to the placeholder {}

For custom-inputs like number-input, integer-input and text-input, that are used inside the element, you can additionally use:

Custom property Description Default
--inner-input-color text-color of the inner input element inherit
--inner-input-background background of the inner input element transparent
--inner-input-border-width border-width of the inner input element thin
--inner-input-border-style border-style of the inner input element dotted
--inner-input-border-color border-color of the inner input element transparent
--inner-input-padding padding of the inner input element 0.15em
--inner-input-border-radius border-radius of the inner input element 0.2em
--inner-input-focus-color text-color of the focused and hovered inner input element currentColor
--inner-input-focus-background background of the focused and hovered inner input element rgba(0, 0, 0, 0.1)
--inner-input-focus-border-style border-style of the focused and hovered inner input element dotted
--inner-input-focus-border-color border-color of the focused and hovered inner input element rgba(0,0,0,0.1)
--inner-input-invalid-color text-color of the invalid inner input element inherit
--inner-input-invalid-background background of the invalid inner input element rgba(255,255,255,0.5)
--inner-input-invalid-border-style border-style of the invalid inner input element dotted
--inner-input-invalid-border-color border-color of the invalid inner input element rgba(255,0,0,0.25)

input-picker-shared-style

Custom property Description Default
--input-picker-color text-color of the picker #dfdfdf
--input-picker-background background of the picker #222
--input-picker-padding padding of the picker 0.3em
--input-picker-border-radius border-radius 0.5em
--input-picker-box-shadow box-shadow 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4)
--input-icon-border-radius border-radius of the icons 0.3em
--input-icon-padding padding of the icons and buttons 0.5em
--input-icon-height height of the icons and buttons 1em
--input-icon-width width of the icons and buttons 1em
--input-icon-background background of the icons and buttons transparent
--input-icon mixin applied to the icons and buttons {}
--input-picker mixin applied to the picker {}

The icons will apply all --input-focus-*-properties when hovered or focused. The native inputs, select-boxes and buttons apply the related style properties. Some --input-properties are set by default:

Custom property Default
--input-cursor pointer
--inner-input-padding 1px
--inner-input-border-radius 3px
--inner-input-focus-color #f1f1f1
--inner-input-focus-background --primary-color, #394FE8
--input-disabled { font-weight: lighter; }
Custom property Description Default
--dropdown-transition-duration transition duration for changing opacity when opening or closing 250ms
--dropdown-transition-timing-function dimensions of the tip of the dropdown cubic-bezier(0.6, 1, 0.2, 1)
--dropdown-background background of the dropdown --input-picker-background, transparent
Custom property Description Default
--dropdown-tip-size dimensions of the tip of the dropdown 6px
--dropdown-tip-gap gap to the outside of the tip 12px
--dropdown-background background of the of the dropdown and the tip --input-picker-background, transparent

overlays

Have a look at iron-overlay-behavior's repository to find out more about its style-properties.

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#^3
  • @polymer/iron-overlay-behavior#^3
Released
2018-11-16
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+
Polymer 2.0+ in 2.9.4
Polymer 1.0+ in 3.0.9
Browser
Browser Independent

datetime-picker - Vaadin Add-on Directory

A minimal picker for date and time for Polymer, that can use the native input datetime-picker - Vaadin Add-on Directory
[![Published on NPM](https://img.shields.io/npm/v/@fooloomanzoo/input-picker-pattern.svg)](https://www.npmjs.com/package/@fooloomanzoo/input-picker-pattern) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@fooloomanzoo/input-picker-pattern) _[API & Demo](https://fooloomanzoo.github.io/input-pattern-picker)_ The repository includes various helper components and standard styles used in elements like [number-input](https://github.com/fooloomanzoo/number-input), [text-input](https://github.com/fooloomanzoo/text-input), [color-input](https://github.com/fooloomanzoo/color-input), [datetime-input](https://github.com/fooloomanzoo/datetime-input), [datetime-picker](https://github.com/fooloomanzoo/datetime-picker) and [color-picker](https://github.com/fooloomanzoo/color-picker). It includes the following component-pattern: - input-pattern - input-picker-pattern and component-mixins: - overlay-picker-mixin - form-element-mixin - switch-container-mixin and style-mixins: - dropdown-style - dropdown-tip-style - input-shared-style - input-picker-shared-style and components: - overlay-element - A simple element, that creates an overlay using `iron-overlay-behavior`. ### default style-properties and -mixins #### input-shared-style Custom property | Description | Default ------------------------------------|-----------------------------------------------|-------------------- `--input-color` | text-color of the input | inherit `--input-background` | background of the input | transparent `--input-border-width` | border-width of the input | thin `--input-border-style` | border-style of the input | dotted `--input-border-color` | border-color of the input | rgba(0, 0, 0, 0.25) `--input-padding` | padding of the input | 0.25em `--input-border-radius` | border-radius of the input | 0.25em `--input-transition-duration` | transition-duration of the input | 250ms `--input-transition-property` | transition-property of the input | background `--input-transition-timing-function`| transition-timing-function of the input | cubic-bezier(0.6, 1, 0.2, 1) `--input-align` | text-align of the input input | center `--input-cursor` | cursor of the input input | initial `--input-focus-color` | text-color of the focused and hovered input | inherit `--input-focus-background` | background of the focused and hovered input | rgba(0, 0, 0, 0.1) `--input-focus-border-style` | border-style of the focused and hovered input | dotted `--input-focus-border-color` | border-color of the focused and hovered input | rgba(0,0,0,0.5) `--input-invalid-color` | text-color of the invalid input | inherit `--input-invalid-background` | background of the invalid input | rgba(255, 0, 0, 0.25) `--input-invalid-border-style` | border-style of the invalid input | dotted `--input-invalid-border-color` | border-color of the invalid input | rgba(255, 0, 0, 0.5) `--input-disabled-color` | text-color of the disabled input | inherit `--input-disabled-background` | background of the disabled input | transparent `--input-disabled-font-style` | font-style of the disabled elements | oblique `--input-disabled-opacity` | opacity of the disabled input | 0.75 `--input-placeholder-opacity` | opacity of the placeholder | 0.75 `--input-placeholder-align` | text-align of the placeholder | center `--input-selection-color` | text-color of the selected text | inherit `--input-selection-background` | background of the selected text | rgba(255, 255, 255, 0.5) `--input-style` | mixin applied to the input | {} `--input-focus` | mixin applied to the focused and hovered input| {} `--input-invalid` | mixin applied to the invalid input | {} `--input-disabled` | mixin applied to the disabled input | {} `--input-placeholder` | mixin applied to the placeholder | {} For custom-inputs like `number-input`, `integer-input` and `text-input`, that are used inside the element, you can additionally use: Custom property | Description | Default ------------------------------------|------------------------------------------------|-------------------- `--inner-input-color` | text-color of the inner input element | inherit `--inner-input-background` | background of the inner input element | transparent `--inner-input-border-width` | border-width of the inner input element | thin `--inner-input-border-style` | border-style of the inner input element | dotted `--inner-input-border-color` | border-color of the inner input element | transparent `--inner-input-padding` | padding of the inner input element | 0.15em `--inner-input-border-radius` | border-radius of the inner input element | 0.2em `--inner-input-focus-color` | text-color of the focused and hovered inner input element | currentColor `--inner-input-focus-background` | background of the focused and hovered inner input element | rgba(0, 0, 0, 0.1) `--inner-input-focus-border-style` | border-style of the focused and hovered inner input element | dotted `--inner-input-focus-border-color` | border-color of the focused and hovered inner input element | rgba(0,0,0,0.1) `--inner-input-invalid-color` | text-color of the invalid inner input element | inherit `--inner-input-invalid-background` | background of the invalid inner input element | rgba(255,255,255,0.5) `--inner-input-invalid-border-style` | border-style of the invalid inner input element | dotted `--inner-input-invalid-border-color` | border-color of the invalid inner input element | rgba(255,0,0,0.25) #### input-picker-shared-style Custom property | Description | Default ----------------------------------|----------------------------------------------|-------------------- `--input-picker-color` | text-color of the picker | #dfdfdf `--input-picker-background` | background of the picker | #222 `--input-picker-padding` | padding of the picker | 0.3em `--input-picker-border-radius` | border-radius | 0.5em `--input-picker-box-shadow` | box-shadow | 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4) `--input-icon-border-radius` | border-radius of the icons | 0.3em `--input-icon-padding` | padding of the icons and buttons | 0.5em `--input-icon-height` | height of the icons and buttons | 1em `--input-icon-width` | width of the icons and buttons | 1em `--input-icon-background` | background of the icons and buttons | transparent `--input-icon` | mixin applied to the icons and buttons | {} `--input-picker` | mixin applied to the picker | {} The icons will apply all `--input-focus-*`-properties when hovered or focused. The native inputs, select-boxes and buttons apply the related style properties. Some `--input-`properties are set by default: Custom property | Default ----------------------------------|-------------------- `--input-cursor` | pointer `--inner-input-padding` | 1px `--inner-input-border-radius` | 3px `--inner-input-focus-color` | #f1f1f1 `--inner-input-focus-background` | --primary-color, #394FE8 `--input-disabled` | { font-weight: lighter; } #### dropdown-style Custom property | Description | Default --------------------------------------|------------------------------------------------------------------|-------------------- --dropdown-transition-duration | transition duration for changing opacity when opening or closing | 250ms --dropdown-transition-timing-function | dimensions of the tip of the dropdown | cubic-bezier(0.6, 1, 0.2, 1) --dropdown-background | background of the dropdown | --input-picker-background, transparent #### dropdown-tip-style Custom property | Description | Default ----------------------------------|-----------------------------------------------|-------------------- --dropdown-tip-size | dimensions of the tip of the dropdown | 6px --dropdown-tip-gap | gap to the outside of the tip | 12px --dropdown-background | background of the of the dropdown and the tip | --input-picker-background, transparent #### overlays Have a look at iron-overlay-behavior's [repository](https://github.com/PolymerElements/iron-overlay-behavior#styling) to find out more about its style-properties.
Online