This is a message.

Customizing Dateinput behavior

These inputs are initialized with a single $(":date").dateinput() call and they share a common configuration. Each input overrides this configuration with their own options.

standalone demo

Dateinput initialization

All three dateinputs are initialized with this single call. Look at the dateinput configuration for the details of each configuration option. 

$(":date").dateinput({
	format: 'dddd dd, mmmm yyyy',	// the format displayed for the user
	selectors: true,             	// whether month/year dropdowns are shown
	min: -100,                    // min selectable day (100 days backwards)
	max: 100,                    	// max selectable day (100 days onwards)
	offset: [10, 20],            	// tweak the position of the calendar
	speed: 'fast',               	// calendar reveal speed
	firstDay: 1                  	// which day starts a week. 0 = sunday, 1 = monday etc..
});

JavaScript

You need to place the script block after the HTML code or you can alternatively use jQuery's $(document).ready to execute the script as soon as the webpage's Document Object Model (DOM) has been loaded. Read more about that from the User's Manual.

HTML5 attributes

Native HTML5 date input supports two attributes, min and max, that can be used to set boundaries for the selectable day. The value must be in RFC 3339 format such as: 2010-12-22 but this tool also accepts a numeric value that evaluates to the number of days from the present day.

value attribute specifies the initial value displayed for the user. This can be eiter a date in RFC format or a number but it can also be any string in which case you can use data-value parameter to specify the initial value. 

<input type="date" name="date1" value="Today" />
<input type="date" name="date2" value="10 days from now" min="2010-03-01" max="2012-01-01" />
<input type="date" name="date3" value="15" min="-25" max="25" data-value="15"/>

HTML