Contact us Create app

Directory

← Back

vcf-date-range-picker

Web Component providing a date range selection field which includes a scrollable month calendar view

Author

Rating

Links

Popularity

<100

npm version

Published on Vaadin Directory Stars on vaadin.com/directory

<vcf-date-range-picker>

<vcf-date-range-picker> is a Web Component providing a date range selection field which includes a scrollable month calendar view.

<vcf-date-range-picker label="Enter date range" value="1990-01-28" end-value="1990-01-30">
</vcf-date-range-picker>

GIF for fc-menuitem

Running demo

  1. Fork the vcf-date-range-picker repository and clone it locally.

  2. Make sure you have npm installed.

  3. When in the vcf-date-range-picker directory, run npm install to install dependencies.

  4. Run npm start to open the demo.

Contributing

To contribute to the component, please read the guideline first.

License

Apache License 2.0

Sample code

          <vcf-date-range-picker id="test" label="Enter date range">
            <vaadin-button id="may2021MonthButton" theme="tertiary" part="preset-button" on-tap="document.querySelector('#test')" slot="presets">
              May 2021
            </vaadin-button>
          </vcf-date-range-picker>

Compatibility

(Loading compatibility data...)

Last updated: 2021-08-24

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/iron-a11y-announcer#^3.0.0
  • @polymer/iron-a11y-keys-behavior#^3.0.0
  • @polymer/iron-media-query#^3.0.0
  • @polymer/iron-resizable-behavior#^3.0.0
  • @polymer/polymer#^3.0.0
  • @vaadin/vaadin-button#^2.4.0
  • @vaadin/vaadin-control-state-mixin#^2.2.2
  • @vaadin/vaadin-element-mixin#^2.4.1
  • @vaadin/vaadin-lumo-styles#^1.6.0
  • @vaadin/vaadin-material-styles#^1.3.2
  • @vaadin/vaadin-overlay#^3.5.0
  • @vaadin/vaadin-text-field#^2.8.0
  • @vaadin/vaadin-themable-mixin#^1.6.1
  • @vaadin/vaadin-form-layout#^2.3.0
Released
2021-08-24
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent

vcf-date-range-picker - Vaadin Add-on Directory

Web Component providing a date range selection field which includes a scrollable month calendar view vcf-date-range-picker - Vaadin Add-on Directory
[![npm version](https://badgen.net/npm/v/@vaadin-component-factory/vcf-date-range-picker)](https://www.npmjs.com/package/@vaadin-component-factory/vcf-date-range-picker) [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadin-component-factoryvcf-date-range-picker) [![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvcf-date-range-picker.svg)](https://vaadin.com/directory/component/vaadin-component-factoryvcf-date-range-picker) # <vcf-date-range-picker> [<vcf-date-range-picker>](https://vaadin.com/components/vcf-date-range-picker) is a Web Component providing a date range selection field which includes a scrollable month calendar view. ```html ``` ![GIF for fc-menuitem](https://github.com/mlopezFC/vcf-date-range-picker/raw/master/Demo.gif) ## Running demo 1. Fork the `vcf-date-range-picker` repository and clone it locally. 1. Make sure you have [npm](https://www.npmjs.com/) installed. 1. When in the `vcf-date-range-picker` directory, run `npm install` to install dependencies. 1. Run `npm start` to open the demo. ## Contributing To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first. ## License Apache License 2.0
View on GitHub
View on NPM

vcf-date-range-picker version 4.5.0
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.2.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.4 * @vaadin/vaadin-element-mixin#^2.4.2 * @vaadin/vaadin-lumo-styles#^1.6.1 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.1 * @vaadin/vaadin-text-field#^3.0.0 * @vaadin/vaadin-themable-mixin#^1.6.2 * @vaadin/vaadin-icons#^4.3.1

vcf-date-range-picker version 4.6.0
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.2.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.4 * @vaadin/vaadin-element-mixin#^2.4.2 * @vaadin/vaadin-lumo-styles#^1.6.1 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.1 * @vaadin/vaadin-text-field#^3.0.0 * @vaadin/vaadin-themable-mixin#^1.6.2 * @vaadin/vaadin-icons#^4.3.1

vcf-date-range-picker version 4.6.2
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.2 * @vaadin/vaadin-element-mixin#^2.4.1 * @vaadin/vaadin-lumo-styles#^1.6.0 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.0 * @vaadin/vaadin-text-field#^2.8.0 * @vaadin/vaadin-themable-mixin#^1.6.1

vcf-date-range-picker version 4.6.5
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.2 * @vaadin/vaadin-element-mixin#^2.4.1 * @vaadin/vaadin-lumo-styles#^1.6.0 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.0 * @vaadin/vaadin-text-field#^2.8.0 * @vaadin/vaadin-themable-mixin#^1.6.1

vcf-date-range-picker version 4.6.6
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.2 * @vaadin/vaadin-element-mixin#^2.4.1 * @vaadin/vaadin-lumo-styles#^1.6.0 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.0 * @vaadin/vaadin-text-field#^2.8.0 * @vaadin/vaadin-themable-mixin#^1.6.1

vcf-date-range-picker version 4.7.0
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.2 * @vaadin/vaadin-element-mixin#^2.4.1 * @vaadin/vaadin-lumo-styles#^1.6.0 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.0 * @vaadin/vaadin-text-field#^2.8.0 * @vaadin/vaadin-themable-mixin#^1.6.1

vcf-date-range-picker version 4.8.0
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.2 * @vaadin/vaadin-element-mixin#^2.4.1 * @vaadin/vaadin-lumo-styles#^1.6.0 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.0 * @vaadin/vaadin-text-field#^2.8.0 * @vaadin/vaadin-themable-mixin#^1.6.1

vcf-date-range-picker version 4.8.1
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.2 * @vaadin/vaadin-element-mixin#^2.4.1 * @vaadin/vaadin-lumo-styles#^1.6.0 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.0 * @vaadin/vaadin-text-field#^2.8.0 * @vaadin/vaadin-themable-mixin#^1.6.1

vcf-date-range-picker version 4.8.2
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.2 * @vaadin/vaadin-element-mixin#^2.4.1 * @vaadin/vaadin-lumo-styles#^1.6.0 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.0 * @vaadin/vaadin-text-field#^2.8.0 * @vaadin/vaadin-themable-mixin#^1.6.1

vcf-date-range-picker version 4.8.3
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.2 * @vaadin/vaadin-element-mixin#^2.4.1 * @vaadin/vaadin-lumo-styles#^1.6.0 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.0 * @vaadin/vaadin-text-field#^2.8.0 * @vaadin/vaadin-themable-mixin#^1.6.1

vcf-date-range-picker version 4.8.4
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.2 * @vaadin/vaadin-element-mixin#^2.4.1 * @vaadin/vaadin-lumo-styles#^1.6.0 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.0 * @vaadin/vaadin-text-field#^2.8.0 * @vaadin/vaadin-themable-mixin#^1.6.1 * @vaadin/vaadin-form-layout#^2.3.0

vcf-date-range-picker version 4.8.5
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.2 * @vaadin/vaadin-element-mixin#^2.4.1 * @vaadin/vaadin-lumo-styles#^1.6.0 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.0 * @vaadin/vaadin-text-field#^2.8.0 * @vaadin/vaadin-themable-mixin#^1.6.1 * @vaadin/vaadin-form-layout#^2.3.0

vcf-date-range-picker version 4.8.6
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.2 * @vaadin/vaadin-element-mixin#^2.4.1 * @vaadin/vaadin-lumo-styles#^1.6.0 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.0 * @vaadin/vaadin-text-field#^2.8.0 * @vaadin/vaadin-themable-mixin#^1.6.1 * @vaadin/vaadin-form-layout#^2.3.0

vcf-date-range-picker version 4.8.7
### Dependencies * @polymer/iron-a11y-announcer#^3.0.0 * @polymer/iron-a11y-keys-behavior#^3.0.0 * @polymer/iron-media-query#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0 * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.4.0 * @vaadin/vaadin-control-state-mixin#^2.2.2 * @vaadin/vaadin-element-mixin#^2.4.1 * @vaadin/vaadin-lumo-styles#^1.6.0 * @vaadin/vaadin-material-styles#^1.3.2 * @vaadin/vaadin-overlay#^3.5.0 * @vaadin/vaadin-text-field#^2.8.0 * @vaadin/vaadin-themable-mixin#^1.6.1 * @vaadin/vaadin-form-layout#^2.3.0

Online