datetime-picker is a picker for date and time for Polymer that prefers to use the native input. This element is for using the native date-picker, if it exists, or to replace it by a CustomElement. The calendar-element and the time-element will just be used if the native picker is not available or is explicitly wanted.
If you like an overlay then use overlay-datetime-picker, what extends datetime-picker and create the polyfilled elements time-element and calendar-element in an overlay-element, that extends IronOverlayBehavior and will create some of its attribute-bindings.
Internally it uses two input-elements, that are initially set to type date and time. If the Browser leaves these attributes as they are, then it will be assumed that native date- and time-inputs are available. If it won't, a calendar-element and a time-element will be displayed instead. calendar-element and time-element can also be used separately.
It might be useful for you to use, if you like to keep the native approach of Browsers like in Chrome for Desktop or Mobile, or you like to have a different look and you are using Polymer already.
The component page explains, which of the attributes you can use and how. You can see there a demo, too.
You can use it stand-alone, with overlay or as a range of dates. Examples:
<datetime-picker use-not-native value="{{value}}" date="{{synchronized}}"></datetime-picker>
<div style="padding: 8px;"><code>Two pickers can be synchronized: </code> <b>[[synchronized]]</b></div>
<div style="padding: 8px;"><code>A number representation is automatically provided: </code> <b>[[value]]</b></div>
<datetime-picker value="{{value}}"></datetime-picker><calendar-element date="{{date}}"></calendar-element>
<div style="padding: 12px;"><code>date: </code> <b>[[date]]</b></div><time-element time="{{time}}"></time-element>
<div style="padding: 12px;"><code>time: </code> <b>[[time]]</b></div><datetime-picker id="from" date="{{min}}" max="[[max]]"></datetime-picker>
<datetime-picker id="to" date="{{max}}" min="[[min]]"></datetime-picker><overlay-datetime-picker value="{{value}}" use-not-native></overlay-datetime-picker>
<div style="padding: 12px;"><code>value: </code> <b>[[value]]</b></div>bower install --save fooloomanzoo/datetime-picker
-
2.0.0
- changed properties
dateStringandtimeStringtodateandtime - polyfill is split up in two elements ('calendar-element' and 'time-element')
- minified version available ('build/..', ~18kB)
- changed properties
-
2.0.6 - 7
overlay-element introduced- shared custom-style-element introduced
- unifying some custom-style-properties
- renaming
positiontoverticalAlignandhorizontalAlign
Feel free to send a new issue, a commit, a pull request or just fork it!