customize.html

<%-- :mode=jsp: --%>
<%@ include file="../header.jsf" %>

<p class="more" style="margin-bottom:25px">
	These inputs are initialized with a single <samp>$(":date").dateinput()</samp> call and they share a common configuration. Each input overrides this configuration with their own options.
</p>

<%@ include file="customize.htm" %>

<h3>Dateinput initialization</h3>

<p>
	All three dateinputs are initialized with this single call. Look at the <a href="${jqt}/dateinput/#configuration">dateinput configuration</a> for the details of each configuration option.
</p>

<pii:code>
${js}
</pii:code>

<p>
	You need to place the <samp>script</samp> block <em>after</em> the HTML code or you can alternatively use jQuery's <samp>$(document).ready</samp> to execute the script as soon as the webpage's Document Object Model (DOM) has been loaded. Read more about that from the <a href="${jqt}/documentation/basics.html#document_ready">User's Manual</a>.
</p>

<h3>HTML5 attributes</h3>

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

<p>
	<samp>value</samp> 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 <samp>data-value</samp> parameter to specify the initial value.
</p>

<pii:code lang="html">
${html}
</pii:code>





<br />
<div class="box petrol">
	Here is the <a href="customize.htm">standalone version</a> of this demo. You can freely study and copy its source code.
</div>