Author: | raymondborkowski |
---|---|
Views Total: | 6,599 views |
Official Page: | Go to website |
Last Update: | August 18, 2018 |
License: | MIT |
Preview:

Description:
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