Super Tiny jQuery & HTML5 Date Picker Plugin

Super Tiny jQuery & HTML5 Date Picker Plugin

A super lightweight and simple jQuery plugin to display a clean date picker as you click on an input/toggle button.

How to use it:

1. Include the jQuery datepicker plugin's CSS in the head of your document.

<link href="css/jquery.datepicker.css" rel="stylesheet">

2. Include the jQuery datepicker plugin's script at the end of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.datepicker.js"></script>

3. Create a text input with data-select="datepicker" attribute to enable the date picker when clicked on.

<input type="text" name="date" id="date" data-select="datepicker">

4. You can also add a toggle button with data-toggle="datepicker" attribute next the input field to open the date picker instead.

<button type="button" data-toggle="datepicker">

5. Default strings.

monthsFull: ['January', 'Febraury', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
daysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
daysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

6. Default settings.

formatDate: function(date) {
  var formatted = $.datePicker.utils.pad(date.getDate(), 2) + '/' + $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + date.getFullYear();
  return formatted;
},
parseDate: function(string) {
  var date = new Date();
  var parts = string.match(/(\d{1,2})\/(\d{1,2})\/(\d{4})/);
  if ( parts && parts.length == 4 ) {
        date = new Date( parts[3], parts[2] - 1, parts[1] );
  }
  return date;
},
selectDate: function(date) {
  return true;
},
limitCenturies: true,
closeOnPick: true

Change logs:

2017-12-19

  • Fixed locked-days issue with single digit months/days

2016-02-19

  • bugfix

2014-12-06

  • Added selection callback

2014-09-30

  • Improved selection of grayed-out values, now they change the current month and select the corresponding day

2014-09-01

  • Fixed click on grayed-out items selecting wrong dates

2014-08-30

  • Added custom format callbacks

This awesome jQuery plugin is developed by biohzrdmx. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 19.12.2017
  • Source