/compound-timepicker

A custom timepicker element built from scratch with Polymer 1.4

Primary LanguageHTML

GitHub version Bower version Build Status

compound-timepicker

timepicker-light-theme timepicker-dark-theme timepicker-goog-theme

Compound is composed of two or more separate elements and compound-timepicker happens to be under this category.

compound-timepicker is a timepicker. It is used to select a single time (hours: minutes) on both mobile and desktop web applications. The selected time is indicated by the filled circle at the end of each clock hand.

Update (v0.5.0)

  • Added support for IE11 and Edge in this release:

  • Fixed layout issue on IE11 and Edge.

  • Added my own version of classList polyfill for SVG on IE11 and Edge.

  • Minor fix on validation of inputs via properties which caused testing to fail.

  • Made changing theme much easier.

  • theme - To change theme. Available themes: dark-theme, light-theme, goog-theme.

  • view - To change how the timepicker is viewed. Available views: vertical, horizontal.

  • Inline SVGs with data URI.

  • Minor update from Google's Material Design.

Example:

<compound-timepicker></compound-timepicker>
<compound-timepicker view="horizontal"></compound-timepicker>
<compound-timepicker theme="dark-theme"></compound-timepicker>
<compound-timepicker hours="23"></compound-timepicker>
<compound-timepicker minutes="59"></compound-timepicker>
<compound-timepicker step="5"></compound-timepicker>
<compound-timepicker time-format="24"></compound-timepicker>

On mobile, pickers are best suited for display in a confirmation dialog. The timepicker can be wrapped inside a paper-dialog. compound-timepicker-dialog is created alongside compound-timepicker to provide a easy-to-use dialog timepicker.

Example:

<compound-timepicker-dialog></compound-timepicker-dialog>
<compound-timepicker-dialog view="horizontal"></compound-timepicker-dialog>
<compound-timepicker-dialog theme="dark-theme"></compound-timepicker-dialog>
<compound-timepicker-dialog hours="23"></compound-timepicker-dialog>
<compound-timepicker-dialog minutes="59"></compound-timepicker-dialog>
<compound-timepicker-dialog step="5"></compound-timepicker-dialog>
<compound-timepicker-dialog time-format="24"></compound-timepicker-dialog>

Styling

Style the timepicker with CSS as you would a normal DOM element. Click here to learn more.

## Coming Soon! Generating your own boilerplate code of the compounds

At the end of the demo, there is a section where user can play around with to generate your own boilerplate code with the attributes provided.

Getting Started

  1. Install with bower
    bower install --save compound-timepicker

  2. Load the web component and the dependencies

For compound-timepicker,

<link rel="import" href="path-to-bower-components/compound-timepicker/compound-timepicker.html">

For compound-timepicker-dialog,

<link rel="import" href="path-to-bower-components/compound-timepicker/compound-timepicker-dialog.html">

License

MIT License © Rong Sen Ng