← Back

vaadin-date-picker

The Web Component providing a date selection field with scrollable month calendar. Part of the Vaadin components.

Author

Contributors

Rating

Popularity

<100

<vaadin-date-picker>

Name: vaadin-date-picker
Availability: InStock
Rating: 5 (177 reviews)
Author: Vaadin

Live Demo ↗ | API documentation ↗

<vaadin-date-picker> is a Web Component providing a date selection field which includes a scrollable month calendar view, part of the Vaadin components.

<vaadin-date-picker label="Label" placeholder="Placeholder">
</vaadin-date-picker>

Installation

The Vaadin components are distributed as Bower and npm packages. Please note that the version range is the same, as the API has not changed. You should not mix Bower and npm versions in the same application, though.

Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components are only published on npm, not pushed to GitHub repositories.

Polymer 2 and HTML Imports Compatible Version

Install vaadin-date-picker:

bower i vaadin/vaadin-date-picker --save

Once installed, import it in your application:

<link rel="import" href="bower_components/vaadin-date-picker/vaadin-date-picker.html">

Polymer 3 and ES Modules Compatible Version

Install vaadin-date-picker:

npm i @vaadin/vaadin-date-picker --save

Once installed, import it in your application:

import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';

Getting started

Vaadin components use the Lumo theme by default.

To use the Material theme, import the correspondent file from the theme/material folder.

Entry points

The components with the Lumo theme:

theme/lumo/vaadin-date-picker.html
theme/lumo/vaadin-date-picker-light.html
The components with the Material theme:

theme/material/vaadin-date-picker.html
theme/material/vaadin-date-picker-light.html
Alias for theme/lumo/vaadin-date-picker.html
theme/lumo/vaadin-date-picker-light.html:

vaadin-date-picker.html
vaadin-date-picker-light.html

Running demos and tests in a browser

Fork the vaadin-date-picker repository and clone it locally.
Make sure you have npm and Bower installed.
When in the vaadin-date-picker directory, run npm install and then bower install to install dependencies.
Run npm start, browser will automatically open the component API documentation.
You can also open demo or in-browser tests by adding demo or test to the URL, for example:

Running tests from the command line

When in the vaadin-date-picker directory, run polymer test

Following the coding style

We are using ESLint for linting JavaScript code. You can check if your code is following our standards by running npm run lint, which will automatically lint all .js files as well as JavaScript snippets inside .html files.

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs.

Contributing

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

License

Apache License 2.0

Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

Compatibility

(Loading compatibility data...)

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

iron-a11y-announcer#^2.0.0
iron-a11y-keys-behavior#^2.0.0
iron-media-query#^2.0.0
iron-resizable-behavior#^2.0.0
polymer#^2.0.0
vaadin-button#vaadin/vaadin-button#^2.1.0
vaadin-text-field#vaadin/vaadin-text-field#^2.3.0
vaadin-themable-mixin#vaadin/vaadin-themable-mixin#^1.3.2
vaadin-control-state-mixin#vaadin/vaadin-control-state-mixin#^2.1.1
vaadin-overlay#vaadin/vaadin-overlay#^3.2.0
vaadin-lumo-styles#vaadin/vaadin-lumo-styles#^1.4.1
vaadin-material-styles#vaadin/vaadin-material-styles#^1.1.2
vaadin-element-mixin#vaadin/vaadin-element-mixin#^2.0.0

Released: 2019-05-22
Maturity: IMPORTED
License: Apache License 2.0

Compatibility

Framework: Polymer 2.0+; Polymer 3.0+; Polymer 1.0+ in 1.2.4
Browser: Browser Independent

paper-countries - Vaadin Add-on Directory

Select Dropdown with list of countries with flags and autocomplete

**[ This description is mirrored from README.md at [github.com/bluewatertracks/paper-countries](https://github.com//bluewatertracks/paper-countries/blob/2.1.0/README.md) on 2019-05-10 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bluewatertracks/paper-countries) # paper-countries ## Example ```html ``` ## About paper-countries is a typeahead component based on Polymer; it allows users to select a country from a list. Think of it as a fun and interactive version of the select input field. We at Blue Water Tracks developed it because we were bored with the usual dropdowns selects fields and wanted to something that was fun using Polymer. Credit goes out to the creators of [flag-icon-css](https://github.com/lipis/flag-icon-css) without which we never would have had those beautiful flags. ![paper-countries](paper-countries.gif) ## Installation The element can be installed using bower bower install paper-countries If you want to save it in bower.json file, remember to add flag `--save` bower install --save paper-countries ## Usage - Following code is required to place in the polymer web component. ```html ``` - It is used to select timezone offset from dialog or dropdown. Check out the [getting started guide](http://bluewatertracks.github.io/paper-contries/components/paper-countries). ## Demo [Documentation and Demo](http://bluewatertracks.github.io/paper-countries/components/paper-countries/) To run the demo locally, install using the installation command above and then go into the components folder and run ```polymer serve``` ## Contributors | | | | |----------|:-------------:|------:| | [![@bhargavkonkathi](https://avatars2.githubusercontent.com/u/24550636?v=3&u=ddd3f64f6888100d6eebd283768b61dabc6f495d&s=80)](https://github.com/bhargavkonkathi) | Programming is like playing chess; each line is as important as each step to determine what kind of player or programmer you are. When ever not playing chess, it's Javascript, Java and mongodb. | [![@maisnamraju](https://avatars2.githubusercontent.com/u/2786378?v=3&s=80)](https://github.com/maisnamraju) | Javascript Ninja; saving the world with one line of javascript at a time. ;) | [![@dhrytsenko](https://avatars0.githubusercontent.com/u/12988041?v=3&s=80)](https://github.com/dhrytsenko) | What is my opinion about JavaScript, NodeJS, MongoDB and Polymer? Building blocks to the future! Allowing me to help make the world a better place. ## Pull Requests are welcome If you feel that you have something that could improve the component, please feel free to send a PR or create an issue with an explanation. ## License This project is licensed under the terms of the MIT license.

GitHub Homepage
Issue tracker
View on GitHub

paper-countries version 1.0.0
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.1
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.2
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.3
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.4
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.5
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.6
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.7
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.8
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 2.0.0
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^1.0.6

paper-countries version 2.0.1
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^1.0.6

paper-countries version 2.0.2
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^1.0.6

paper-countries version 2.0.3
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^1.0.6

paper-countries version 2.0.4
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^1.0.6

paper-countries version 2.0.5
### Dependencies * flag-icon-css#^2.7.0 * polymer#1 - 2 * paper-input#^2.0.0 * paper-listbox#^2.0.0 * paper-item#^2.0.0 * iron-ajax#^2.0.0 * paper-material#^2.0.0 * iron-component-page#^2.0.0 * webcomponentsjs#^1.0.10 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^2.0.0

paper-countries version 2.1.0
### Dependencies * flag-icon-css#^2.7.0 * polymer#1 - 2 * paper-input#^2.0.0 * paper-listbox#^2.0.0 * paper-item#^2.0.0 * iron-ajax#^2.0.0 * paper-material#^2.0.0 * iron-component-page#^2.0.0 * webcomponentsjs#^1.0.10 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^2.0.0

Add-on Directory