Create a toggleable dropdown with an datepicker.


To create a datepicker, just add the data-datepicker attribute to an <input> element. You also have the possibility of customizing the date format. Just add the format option to the data-datepicker attribute.

The datepicker detects whether the JavaScript from the Form select component is being loaded. This allows you to quickly toggle between years and months through a select form inside the datepicker.


  • NOTE Focus on the input to display the datepicker
  • <form class="form">
    	<input type="" data-datepicker="{format:'MM/DD/YYYY'}">



This is an example of how to set options via attribute:

data-datepicker="{weekstart:0, format:'MM/DD/YYYY'}"
Option Possible value Default Description
weekstart integer (0..6) 1 Start of the week
i18n JSON object { months:['January',...], weekdays:['Sun',..,'Sat'] } Language string definitions
format any combination of DD, MM and YY 'MM/DD/YYYY' Date format string
offsettop integer 5 Offset to the input value


Data Attribute

<input type="text" data-datepicker="{<!-- Options... -->}">...</div>

Clique.UI API

var datepicker = Clique.datepicker('.my-datepicker', {
	// Options...

jQuery API

var datepicker = $('.my-datepicker').clique('datepicker', {
	// Options...

Callback Events

Name Parameter Description
show.clique.datepicker event On datepicker dropdown show
hide.clique.datepicker event On datepicker dropdown hide
update.clique.datepicker event On calendar rendering