Date Picker

Documentation updated on February 7th.

Description

The Date Picker component is a member of Controls familiy.

The widget behavior is read & write. To get a component that only allows to read dates, see the Calendar.

Demo

Code snippet

<form ... >
	<p class="ch-form-row">
		<label for="example">Date:</label>
		<input type="date" id="example" />
	</p>
</form>

Instance component

This is the way to create a new Date Picker:

var foo = $("#example").datePicker("today");

Configuration

Any widget can be configurated through parameters written in JSON. Here is an example:

var foo = $("#example").datePicker({
	"bar": foobar,
	"baz": quux
});

You can see the complete list of parameters in Date Picker API documentation.

Basics

Show and hide

The Date Picker widget exposes some public methods called show and hide, both allow you to manage the Date Picker behavior programmatically. Something like this:

myDatePicker.show(); // Shows the Date Picker
myDatePicker.hide(); // Hides the Date Picker

Events

The main widget's actions trigger custom events, which you can suscribe to execute any action.

Here is an example of the ready event, triggered when component ends its load process:

foo.on("ready", function () {
	var that = this; // Where "this" is the returned object of component
});

You can see the complete list of events in Date Picker API documentation.

Learn more about events on our step-by-step guide.