Pure JavaScript Date Picker – FooPicker

Preview:

Description:

FooPicker is a simple, lightweight date picker component to select a date from the calendar popup when you click/tap on an input field.

How to use it:

Import the FooPicker’s JavaScript and CSS files into the document.

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

Initialize the FooPicker on an input field and done. You can specify the initial date in the value attribute. Default data format: ‘dd-MMM-yyyy’.

<input type="text" id="datepicker" value="28-Jun-2019" />

var foopicker = new FooPicker({
    id: 'datepicker'
});

Change the default date format.

var foopicker = new FooPicker({
    id: 'datepicker',
    dateFormat: 'MM/dd/yyyy'
});

Define an array of disabled days.

var foopicker = new FooPicker({
    id: 'datepicker',
    dateFormat: 'MM/dd/yyyy',
    disable: ['29/07/2017', '30/07/2017', '31/07/2017', '01/08/2017']
});

Localize the date picker.

var weeks = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

Changelog:

09/26/2019

• Fix issue with data picker hiding in old browsers

07/04/2019

• Add option to select upto 5 future years