An awesome vanilla javascript datepicker for only 8kb!
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.
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:
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
-
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
yarn add universal-datepicker
const UniversalCalendar = require("universal-datepicker");
const calendar = new UniversalCalendar({configs here})
<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"
}
In order to add some style customization, you need to override these CSS classes (optional):
calendar__wrapper
: calendar generic wrappercalendar__wrapper--horizontal
: calendar wrapper with horizontal orientationcalendar__wrapper--vertical
: calendar wrapper with horizontal orientationcalendar__weekday
: Each generic weekday on the top of calendarcalendar__header
: Header with month - year valuescalendar__arrow-wrapper
: Horizontal calendar arrows wrappercalendar__arrow
: Arrow to change month in horizontal viewcalendar__arrow--left
: Arrow leftcalendar__arrow--right
: Arrow rightcalendar__cell
: Each generic calendar daycalendar__cell--past
: A past day in calendarcalendar__cell--checkin
: Selected checkin in calendarcalendar__cell--checkout
: Selected checkout in calendarcalendar__cell--range
: Date between checkin and checkoutcalendar__cell--today
: Today datecalendar__cell--today-highlighted
: Rule to custom today highlighting datecalendar__cell__decorator
: Decorator for checkin and checkout cells
With minor 1.2.0 a user can select a date up to 1 year from now.
TheBous - @the_bous - thebous1993@gmail.com