ncb-datepicker

A datepicker with no dependencies. Check out a simple demo here: https://nickbittar.github.io/Datepicker/

Getting Started

HTML

<!-- Include the JS and CSS files -->
<link rel="stylesheet" type="text/css" href="dist/datepicker.css">
<script src="dist/datepicker.js"></script>

<input id="my-date-input" class="datepicker" />

JavaScript

var dateElem = document.getElementById('#my-date-input');
var datepicker1 = datepicker.create(dateElem);

note: Requires the input to have a unique id attribute

OR, to initalize all of your datepickers:

var dateElems = document.querySelectorAll('.datepicker');
for(var elem of dateElems) {
    datepicker.create(elem);
}

OR, if you prefer jQuery:

// Single element
datepicker.create($('#my-date-input')[0]);
// Multiple elements
$('.datepicker').each((index, elem) => datepicker.create(elem));

Pass options in when initializing

var options = {
    minDate: '2016-01-01',
    maxDate: '2020-12-31',
    compact: true
};
var datepicker1 = datepicker.create(dateElem, options);

Update these options afterwards:

// Use the object returned from the original 'datepicker.create' to call methods on it
datepicker1.updateOptions({
    minDate: '2011-01-01',
    darkMode: true
});

---

Options

Option	Datatype	Description	Possible Values	Default Value
defaultDate	Date	The date the calendar shows when no date is selected.	Any	Today's Date
minDate	Date	The earliest date that can be selected. (Inclusive)	Any	1900-01-01
maxDate	Date	The latest date that can be selected. (Inclusive)	Any	2100-01-01
startViewMode	String	What view is shown when the datepicker is first opened. 'day' shows a calendar month to pick a day. 'month' shows a year to pick a month. 'year' shows a decade to pick a year.	'day', 'month', 'year'	'day'
hideCalendarOnClickOff	Boolean	Hides the datepicker when the user clicks on something besides the datepicker or the associated input element.	true, false	true
hideCalendarOnSelect	Boolean	Hides the datepicker once a date is picked.	true, false	true
todayButton	Boolean	Shows a button to jump to and select today's date.	true, false	true
darkMode	Boolean	Changes the color scheme to better suit dark themes.	true, false	false
compact	Boolean	Reduces the size of the datepicker and inner elements.	true, false	false
selectedDateColor	Color	The background color of the date selected. Can be CSS color or hexadecimal representation (eg #FF3311).	Valid CSS color	'gold'
onDateSelect	Function	Calls this function when a date is picked from the datepicker.	Any	null
enableDateParsing	Boolean	When enabled, as the user types a date into the input element, the datepicker will show and highlight the corresponding date in the datepicker.	true, false	true
attachToElement	HTML Element	A different element to append the datepicker to. Useful if the input element is in a container that hides its overflow. By setting this to a higher level container the calendar can appear fully and not be cut off. Note: This option cannot be updated after initialization.	Any	null
wrapInputElem	Boolean	When set to true, will wrap the input element inside a div to set the position to 'relative'. Fixes an issue with input elements inside table elements. Note: This option cannot be updated after initialization.	true, false	true

More Advances Examples

Easily initialize all your datepickers with a few exceptions

Trying to create a datepicker on an input that alread has a datepicker will end up skipped. You can initialize all your datepickers with special options first and then create your datepicker on all datepickers to get the rest but preserve the exceptions.

HTML

<input id="special-input-1" class="datepicker" />
<input id="special-input-2" class="datepicker" />
<input id="special-input-3" class="datepicker" />

<input class="datepicker" />
<input class="datepicker" />
<input class="datepicker" />
<input class="datepicker" />

JavaScript

var specialInput1 = document.getElementById('special-input-1');
var specialInput2 = document.getElementById('special-input-2');
var specialInput3 = document.getElementById('special-input-3');
var dateInputs = document.querySelectorAll('.datepicker');

datepicker.create(specialInput1, {
    minDate: new Date(1900,0,1),
    maxDate: new Date(1949,11,31)
});
datepicker.create(specialInput2, {
    minDate: new Date(2000,0,1),
    darkMode: true
});
datepicker.create(specialInput3, {
    compact: true,
    selectedDateColor: '#7788EE'
});
    
for(var elem of dateInputs) {
  datepicker.create(elem);
}

Dynamically created pairs of date range inputs that should constrain a end date to be on or after the start date

HTML

<div id="datepickers-container">
    <input id="start-date-for-entity-id-123" class="datepicker" placeholder="mm/dd/yyyy"/>
    <input id="end-date-for-entity-id-123" class="datepicker" placeholder="mm/dd/yyyy"/>
       
    <input id="start-date-for-entity-id-321" class="datepicker" placeholder="mm/dd/yyyy"/>
    <input id="end-date-for-entity-id-321" class="datepicker" placeholder="mm/dd/yyyy"/>
        
    // ...
        
    <input id="start-date-for-entity-id-999" class="datepicker" placeholder="mm/dd/yyyy"/>
    <input id="end-date-for-entity-id-999" class="datepicker" placeholder="mm/dd/yyyy"/>
</div>

JavaScript

// Get all elements with the datepicker class inside the datepickers-container element
var dateInputs = document.querySelectorAll('#datepickers-container .datepicker');

// Create an empty object which will use the id of the inputs as the key to their datepicker object.
var datepickerLibrary = {};

for(var inputElem of dateInputs) {

    // Save the datepicker object in the library with its id as the key
    datepickerLibrary[dp.id] = datepicker.create(inputElem);
    
    // Listen for changes to the date value
    inputElem.addEventListener('change', function(e) {
    
        var inputId = this.id;
        
        // Figure out whether the start or end date was changed
        if(inputId.indexOf('start-date') > -1) {
        
            // Input was start date, get end date's id
            var endDatePickerId = inputId.replace('start-date', 'end-date');
            
            // Get end date's datepicker object
            var endDatePicker = datepickerLibrary[endDatePickerId];
            
            // Update the minimum date to the value of the start date
            endDatePicker.updateOptions({
                minDate: this.value
            });
        } else {
        
            // Input was end date, get the start date's id
            var startDatePickerId = inputId.replace('end-date', 'start-date');
            
            // Get start date's datepicker object
            var startDatePicker = datepickerLibrary[startDatePickerId];
            
            // Update the maximum date to the value of the end date
            startDatePicker.updateOptions({
                maxDate: this.value
            });
        }
    });
}