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.
- Clone the repo
git clone https://github.com/TheBous/universal-datepicker.git
- Install NPM packages
yarn
- Start your locally application
yarn start
Configurable options
-
DOMElement
: DOM element to which the calendar should be attached (es. body, #app) -
today
: Pass today from the parent application, so calendar can avoid to adapt itself to internalization and/or timezones. Today could be a jsDate
, a string formatted withYYYY/MM/DD
or an object{ year, month, day }
-
initialDate
: selected date to fit calendar to the right month/year on the splash screen -
weekdaysLabels
: Array of weekdays label in current language -
monthsLabels
: Array of months label in current language -
checkin
: checkin in javascript date format (checkin: new Date()). -
checkout
: checkout in javascript date format (checkout: new Date()). -
orientation
: calendar orientation : vertical with scroll or horizontal with arrows (horizontal|vertical). -
horizontalPages
: number of calendar page per view in horizontal view. -
verticalPages
: number of calendar page per view in vertical view. -
onCheckinChange
: (function) callback triggered with new checkin date (dd/mm/yyyy) . -
onCheckoutChange
: (function) callback triggered with new checkout date (dd/mm/yyyy) . -
maxCheckin
: max number of days between checkin and checkout (default = 30) -
leftArrowClassname
: Class to add some icon style to left arrow -
rightArrowClassname
: Class to add some icon style to right arrow -
showTodayDate
: Boolean to show a custom UI for today date cell -
customCheckinElement
: DOM element to customize checkin calendar cell (ex ) customizable with position relative-absolute -
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