universal-datepicker

Pure 8kb Vanilla Javascript plug and play datepicker

Usage no npm install needed!

<script type="module">
  import universalDatepicker from 'https://cdn.skypack.dev/universal-datepicker';
</script>

README


Logo

Pure 8kb Vanilla Javascript plug and play datepicker

An awesome vanilla javascript datepicker for only 8kb!

Table of Contents

About The Project

Lightweight datepicker component for your projects. It's fully compatible with any frameworks/libraries (React, Vue, Angular, ecc...). Light fast and customizable. Partially inspired by airbnb/react-dates.

Built With

This library does not have any dependencies. It's fully and totally pure vanilla javascript. We only used devDependencies to write modern code, beautify and bundle it:

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

  1. Clone the repo
git clone https://github.com/TheBous/universal-datepicker.git
  1. Install NPM packages
yarn
  1. Start your locally application
yarn start

Configurable options

  1. DOMElement: DOM element to which the calendar should be attached (es. body, #app)

  2. today: Pass today from the parent application, so calendar can avoid to adapt itself to internalization and/or timezones. Today could be a js Date, a string formatted with YYYY/MM/DD or an object { year, month, day }

  3. initialDate: selected date to fit calendar to the right month/year on the splash screen

  4. weekdaysLabels: Array of weekdays label in current language

  5. monthsLabels: Array of months label in current language

  6. checkin: checkin in javascript date format (checkin: new Date()).

  7. checkout: checkout in javascript date format (checkout: new Date()).

  8. orientation: calendar orientation : vertical with scroll or horizontal with arrows (horizontal|vertical).

  9. horizontalPages: number of calendar page per view in horizontal view.

  10. verticalPages: number of calendar page per view in vertical view.

  11. onCheckinChange: (function) callback triggered with new checkin date (dd/mm/yyyy) .

  12. onCheckoutChange: (function) callback triggered with new checkout date (dd/mm/yyyy) .

  13. maxCheckin: max number of days between checkin and checkout (default = 30)

  14. leftArrowClassname: Class to add some icon style to left arrow

  15. rightArrowClassname: Class to add some icon style to right arrow

  16. showTodayDate: Boolean to show a custom UI for today date cell

  17. customCheckinElement: DOM element to customize checkin calendar cell (ex ) customizable with position relative-absolute

  18. customCheckoutElement: DOM element to customize checkout calendar cell (ex ) customizable with position relative-absolute

Installation

1: Install NPM packages

yarn add universal-datepicker

2: Add these lines when you want to show calendar

const UniversalCalendar = require("universal-datepicker");
const calendar = new UniversalCalendar({configs here})

3: Add a DOM element in your own project. Coincides with the DOMElement configuration

<div id="calendar"></div>

4: Horizontal arrows to switch months are <i></i>. You need to pass to application a class to these icons with leftArrowClassname and rightArrowClassname

{
  ...,
  leftArrowClassname: "my-custom-right-arrow-class",
  rightArrowClassname: "my-custom-right-arrow-class"
}

5: Add custom css hooking to existing classes

In order to add some style customization, you need to override these CSS classes (optional):

  • calendar__wrapper: calendar generic wrapper
  • calendar__wrapper--horizontal: calendar wrapper with horizontal orientation
  • calendar__wrapper--vertical: calendar wrapper with horizontal orientation
  • calendar__weekday: Each generic weekday on the top of calendar
  • calendar__header: Header with month - year values
  • calendar__arrow-wrapper: Horizontal calendar arrows wrapper
  • calendar__arrow : Arrow to change month in horizontal view
  • calendar__arrow--left: Arrow left
  • calendar__arrow--right: Arrow right
  • calendar__cell: Each generic calendar day
  • calendar__cell--past: A past day in calendar
  • calendar__cell--checkin: Selected checkin in calendar
  • calendar__cell--checkout: Selected checkout in calendar
  • calendar__cell--range: Date between checkin and checkout
  • calendar__cell--today: Today date
  • calendar__cell--today-highlighted: Rule to custom today highlighting date
  • calendar__cell__decorator: Decorator for checkin and checkout cells

Limits

With minor 1.2.0 a user can select a date up to 1 year from now.

Contact

TheBous - @the_bous - thebous1993@gmail.com