Lightweight Pure JavaScript Date Picker library – DatePickerX

Preview:

Description:

DatePickerX is a lightweight, native JavaScript based date picker which enables the visitor to select dates, months and years in a nice clean calendar view.

How to use it:

Include the DatePickerX’s JavaScript and CSS files on the html page.

<link rel="stylesheet" href="DatePickerX.css">
<script src="DatePickerX.min.js"></script>

Create a normal text field to accept the date input.

<input type="text" name="demo" placeholder="Pick A Date">

Initialize the date picker.

window.addEventListener('DOMContentLoaded', function(){
  var myDatepicker = document.querySelector('input[name="demo"]'),
  $myDatepicker.DatePickerX.init({
    // options here
  });
});

Options and defaults.

mondayFirst      : true,
format           : 'yyyy/mm/dd',
minDate          : new Date(0, 0),
maxDate          : new Date(9999, 11, 31),
weekDayLabels    : ['Mo', 'Tu', 'We', 'Th', 'Fr', 'St', 'Su'],
shortMonthLabels : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
singleMonthLabels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
todayButton      : true,
todayButtonLabel : 'Today',
clearButton      : true,
clearButtonLabel : 'Clear'

Changelog:

v1.0.5 (08/30/2018)

• Fixed top alignment