Skip to content

pankajpatel/dates

Repository files navigation

Dates

Basic Datepicker WebComponent inspired by AirBnB's react-dates

Demo

Check it live!

Install

Install the component using

  1. Bower:

    bower install [email protected]:pankajpatel/dates.git --save
  2. npm:

    npm install pankajpatel/dates --save

Or download as ZIP.

Usage

JS File

  1. Import polyfill:

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  2. Import custom element script:

    <script src="./dist/dates-component.js"></script>
  3. Start using it!

    3.1 The standalone calendar:

    <d-calendar months="3" step="1"></d-calendar>

    3.2 The Datepicker:

    <d-datepicker
      on=".datepicker"
      open-event="focus"
      close-event="blur"
      months="3"
      step="1"
    >
      <input type="text" class="datepicker" placeholder="Pick the date" />
    </d-datepicker>

    3.3 The Rangepicker:

    <d-rangepicker open-event="focus" close-event="blur" months="2" step="1">
      <input type="text" class="datepicker from" placeholder="Select Dates" />
      <input type="text" class="datepicker to" placeholder="Select Dates" />
    </d-rangepicker>

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.

License

MIT License

About

The AirBnB's date picker done in web components

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published