@doubletrade/range-datepicker

range-datepicker provides a simple datepicker with range.

Usage no npm install needed!

<script type="module">
  import doubletradeRangeDatepicker from 'https://cdn.skypack.dev/@doubletrade/range-datepicker';
</script>

README

Build status Published on webcomponents.org

Published on Vaadin Directory Stars on vaadin.com/directory

<range-datepicker>

range-datepicker in action

range-datepicker provides a simple datepicker with range.

Install

bower install range-datepicker
npm install range-datepicker

Inspired by airbnb datepicker.

See live demo See docs

<div>
  <range-datepicker date-from="{{dateFrom}}" date-to="{{dateTo}}"></range-datepicker>
  <range-datepicker no-range></range-datepicker>
  <range-datepicker no-range force-narrow></range-datepicker>
  <range-datepicker locale="fr"></range-datepicker>

  <range-datepicker-input date-format="MM/DD/YYYY">
    <template>
      <paper-input label="Date from" value="[[dateFrom]]" readonly></paper-input>
      <paper-input label="Date to" value="[[dateTo]]" readonly></paper-input>
    </template>
  </range-datepicker-input>
</div