https://github.com/pankajpatel/dates
The AirBnB's date picker done in web components
https://github.com/pankajpatel/dates
Last synced: 8 months ago
JSON representation
The AirBnB's date picker done in web components
- Host: GitHub
- URL: https://github.com/pankajpatel/dates
- Owner: pankajpatel
- License: unlicense
- Created: 2017-04-12T14:53:02.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T17:33:25.000Z (about 2 years ago)
- Last Synced: 2025-03-29T17:01:32.576Z (9 months ago)
- Language: JavaScript
- Homepage: http://pankaj.pro/dates/
- Size: 1.29 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dates
> Basic Datepicker WebComponent inspired by AirBnB's react-dates
## Demo
[Check it live!](http://pankajpatel.github.io/dates)
## Install
Install the component using
1. [Bower](http://bower.io/):
```sh
bower install git@github.com:pankajpatel/dates.git --save
```
2. [npm](http://npmjs.org/):
```sh
npm install pankajpatel/dates --save
```
Or [download as ZIP](https://github.com/pankajpatel/git@github.com:pankajpatel/dates.git/archive/master.zip).
## Usage
### JS File
1. Import polyfill:
```html
```
2. Import custom element script:
```html
```
3. Start using it!
3.1 The standalone calendar:
```html
```
3.2 The Datepicker:
```html
```
3.3 The Rangepicker:
```html
```
### Webpack
You can directly require the component in the main entry file and it should work as other dependencies in the project.
And after the bundle generation, you can use it as a normal customElement tag explained in Step 3 above.
## Options
| Attribute | Options | Default | Description |
| ------------- | -------- | ------------- | -------------------------------------------------------------- |
| `on` | _string_ | `.datepicker` | The Input selector on which DatePicker is to be bound |
| `open-event` | _string_ | `focus` | Event name on the Input selector to trigger DatePicker's open |
| `close-event` | _string_ | `blur` | Event name on the Input selector to trigger DatePicker's close |
| `months` | _number_ | `1` | Number of months to be shown by Datepicker |
| `step` | _number_ | `1` | Number of months to Step through on month navigation |
## Events
Every component has different set of events. All of those events have the property `data` and `value` as subproperty of `data`.
| Event | Compoenent | Description |
| -------- | -------------------- | ------------------------------------- |
| `range` | Rangepicker | When the dates for renge are selected |
| `change` | Datepicker, Calendar | When the date is selected |
## History
For detailed changelog, check [Releases](https://github.com/pankajpatel/git@github.com:pankajpatel/dates.git/releases).
## License
[MIT License](http://opensource.org/licenses/MIT)