Contact us Create app

Directory

← Back

range-datepicker

range-datepicker provides a simple datepicker with range (see demo)

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/RoXuS/range-datepicker on 2019-05-10 ]

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

Compatibility

(Loading compatibility data...)

Last updated: 2018-01-10

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#^2.0.0

  • moment#^2.18.1
  • PolymerElements/paper-styles#^2.0.0
  • PolymerElements/iron-flex-layout#^2.0.0
  • PolymerElements/paper-icon-button#^2.0.0
  • PolymerElements/iron-icons#^2.0.1
  • PolymerElements/iron-media-query#^2.0.0
  • PolymerElements/iron-list#^2.0.7
  • PolymerElements/paper-item#^2.0.0
  • PolymerElements/paper-listbox#^2.0.0
  • PolymerElements/paper-dropdown-menu#^2.0.0
  • PolymerElements/neon-animation#^2.0.1
  • web-animations-js#^2.3.1
  • PolymerElements/iron-dropdown#^2.0.0
  • PolymerElements/paper-material#^2.0.0
Released
2018-11-12
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

range-datepicker - Vaadin Add-on Directory

range-datepicker provides a simple datepicker with range (see demo) range-datepicker - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/RoXuS/range-datepicker](https://github.com//RoXuS/range-datepicker/blob/0.0.31/README.md) on 2019-05-10 ]** [![Build status](https://travis-ci.org/RoXuS/range-datepicker.svg?branch=master)](https://travis-ci.org/RoXuS/range-datepicker) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/roxus/range-datepicker) [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/RoXuSrange-datepicker) [![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/RoXuSrange-datepicker.svg)](https://vaadin.com/directory/component/RoXuSrange-datepicker) ## <range-datepicker> ![range-datepicker in action](https://raw.githubusercontent.com/roxus/range-datepicker/master/demo.png) `range-datepicker` provides a simple datepicker with range. ### Install bower install range-datepicker npm install range-datepicker Inspired by [airbnb datepicker](https://github.com/airbnb/react-dates). [See live demo](https://roxus.github.io/range-datepicker/components/range-datepicker/demo/) [See docs](https://roxus.github.io/range-datepicker/) ```html
GitHub Homepage
Issue tracker
License
Documentation
View on GitHub
Online Demo

range-datepicker version 0.0.1
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1

range-datepicker version 0.0.2
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1

range-datepicker version 0.0.3
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1

range-datepicker version 0.0.4
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0

range-datepicker version 0.0.5
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0

range-datepicker version 0.0.6
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0

range-datepicker version 0.0.7
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0

range-datepicker version 0.0.8
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1

range-datepicker version 0.0.9
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1

range-datepicker version 0.0.10
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1

range-datepicker version 0.0.11
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1

range-datepicker version 0.0.12
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.13
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.14
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.15
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.16
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.17
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.18
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.19
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.20
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.21
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.22
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.23
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.24
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.25
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.26
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.27
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.28
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.29
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

range-datepicker version 0.0.30
### Dependencies Polymer/polymer#^2.0.0 * moment#^2.18.1 * PolymerElements/paper-styles#^2.0.0 * PolymerElements/iron-flex-layout#^2.0.0 * PolymerElements/paper-icon-button#^2.0.0 * PolymerElements/iron-icons#^2.0.1 * PolymerElements/iron-media-query#^2.0.0 * PolymerElements/iron-list#^2.0.7 * PolymerElements/paper-item#^2.0.0 * PolymerElements/paper-listbox#^2.0.0 * PolymerElements/paper-dropdown-menu#^2.0.0 * PolymerElements/neon-animation#^2.0.1 * web-animations-js#^2.3.1 * PolymerElements/iron-dropdown#^2.0.0 * PolymerElements/paper-material#^2.0.0

Online