Tiny Customizable Date Range Picker – TinyPicker

TinyPicker is a tiny yet customizable date picker library that makes it easier to select date ranges from a minimal clean calendar popup. With no 3rd dependencies like jQuery, moment.js, etc.

How to use it:

Include the TinyPicker’s JavaScript on the html page.

<script src="index.js"></script>

Create start/end date input fields like these:

<input type="text" class="TinyPicker" id="startDate">
<input type="text" class="TinyPicker" id="endDate">

Initialize the date range picker.

new TinyPicker({
    firstBox:document.getElementById('startDate'),
    lastBox: document.getElementById('endDate'),
}).init();

Set the initial start/end dates.

new TinyPicker({
    firstBox:document.getElementById('startDate'),
    lastBox: document.getElementById('endDate'),
    startDate: new Date('03/20/2020'),
    endDate: new Date('07/04/2020'),
}).init();

Specify how many months to display in the calendar.

new TinyPicker({
    firstBox:document.getElementById('startDate'),
    lastBox: document.getElementById('endDate'),
    monthsToShow: 3
}).init();

Specify the language and date format.

new TinyPicker({
    firstBox:document.getElementById('startDate'),
    lastBox: document.getElementById('endDate'),
    local: 'es-US'
}).init();

Customize the day abbreviations.

new TinyPicker({
    firstBox:document.getElementById('startDate'),
    lastBox: document.getElementById('endDate'),
    days: ['Su','Mo','Tu','We','Th','Fr','Sa
}).init();

Available callback functions.

new TinyPicker({
    firstBox:document.getElementById('startDate'),
    lastBox: document.getElementById('endDate'),
    success: function(startDate, endDate){} 
    err: function(){} 
}).init();

Changelog:

08/16/2018

• Add a cleanup method to remove dom nodes, event listeners, and CSS