Pure JavaScript Date Picker – FooPicker

Category: Date & Time , Javascript | September 26, 2019
Views Total:7,520 views
Official Page:Go to website
Last Update:September 26, 2019


Pure JavaScript Date Picker – FooPicker


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'];



  • Fix issue with data picker hiding in old browsers


  • Add option to select upto 5 future years

You Might Be Interested In:

7 thoughts on “Pure JavaScript Date Picker – FooPicker

  1. Seow Zhi Xuan

    how if i want to display this calendar when open the webpage instead of click on somewhere?

  2. Zin Myo Ko

    To extend year in date picker , you can edit in fool-picker.jg at line // Build years select.

    1. Pavan

      Hi, How can i restrict future dates? means i need to show date till today only…

  3. dfsdfsd

    hello, how I canc change de lang please? I need to have french language


Leave a Reply