foopicker.js | Creating a Beautiful Date Picker with Pure JavaScript

foopicker.js is a simple and powerful javascript date picker, you can select a data from the calendar popup easily.

How to create a date picker using foopicker.js?

1.Import foopicker.css and foopicker.js in your html file

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

2.Create a html input field to show date with id=datepicker

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

3.Create a FooPicker instance with input filed id

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

4.You can change the date format with dateFormat attribute

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

5.You also can define an array of disabled date with disable attribute

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