ncb-datepicker v1.7.4

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

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
            });
        }
    });
}