jv-datepicker

Update (v2.4.0)

A list of new features have been added to the element:

• minDate (dates that are smaller than the predefined minDate will be disabled)

• maxDate (dates that are larger than the predefined maxDate will be disabled)

• showLongDate (to show long date instead of short date. Eg. Fri, May 12 2017)

• inputDate (To allow date change from the external eg. paper-input)

• invalidDate (Comes with inputDate to indicate whether the input date is in valid date format)

• noAnimation (To enable/ disable all animations and transitions of the datepicker)

• pageEntryAnimation (To customize the entry animation for page switching between months)

• pageExitAnimation (To customize the exit animation for page switching between months)

• enforceDateChange (A public method to force update a datepicker w/o any buttons to confirm date change)

• theme (To change the theme of the datepicker. Available options: dark-theme, light-theme, goog-theme)

• view (To forcefully change the view of the datepicker without respecting the orientation of the device: horizontal, vertical)

See the component page for more information.

An custom Polymer element built from scratch to provide a datepicker based on Google's Material Design that is more compelling and rich with features.

Example:

<jv-datepicker><jv-datepicker>
<jv-datepicker view="horizontal"></jv-datepicker>
<jv-datepicker theme="dark-theme"></jv-datepicker>
<jv-datepicker-dialog modal></jv-datepicker-dialog>
<jv-datepicker-dialog with-backdrop></jv-datepicker-dialog>
<jv-datepicker-dialog></jv-datepicker-dialog>

jv-datepicker provides a regular datepicker element. While jv-datepicker-dialog has a jv-datepicker being wrapped inside a dialog.

## ( 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.

Styling

Now with mixins, head over to the component page for more details.

Getting Started

1. Install with bower
   bower install --save jv-datepicker

2. Load the web component and the dependencies

For jv-datepicker,

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

For jv-datepicker-dialog,

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

3. Markup with <jv-datepicker></jv-datepicker> or <jv-datepicker-dialog></jv-datepicker-dialog>

4. Done

License

MIT License © Rong Sen Ng