Lightweight Pure JavaScript Date Picker library – DatePickerX

Category: Date & Time , Javascript | August 30, 2018
Views Total:10,831 views
Official Page:Go to website
Last Update:August 30, 2018


Lightweight Pure JavaScript Date Picker library – DatePickerX


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"]'),
    // 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'


v1.0.5 (08/30/2018)

  • Fixed top alignment

You Might Be Interested In:

2 thoughts on “Lightweight Pure JavaScript Date Picker library – DatePickerX

  1. Stanislav Hošek

    Hello, very nice! Is possible to show only month and year? I mean hide table with days and when click on month, hide datepicker and get ‘Y/mm’ in input button. Thank you very much.


Leave a Reply