Mobile-friendly Date Picker In Pure JavaScript – Cuppa DatePicker

Cuppa DatePicker is a simple flexible JavaScript library used for creating an input based date picker for both mobile and desktop web applications.

How to use it:

Load the necessary moment.js library in the webpage.

<script src="moment.min.js"></script>

Load the main JavaScript file ‘cuppa-calendar.js’ in the webpage.

<script src="js/cuppa-calendar.js"></script>

Create a container for the date picker.

<div id="demo"></div>

Create a new instance of the Cuppa DatePicker.

var cal  = new WinkelCalendar({
    container: 'demo'
});

Customization options with default values.

var cal  = new WinkelCalendar({
    defaultDate : new Date(),
    bigBanner: true,
    format : "DD/MM/YYYY",
    onSelect : null
});

API methods.

// Sets a new date
cal.setDate('07-11-2016')
// Sets the date to todays's date
cal.today()
// Opens the datepicker
cal.today()
// Closes the datepicker
cal.close()