❮ Plugins Mb Linkbutton Jeasyui Dd Timetable ❯

jQuery EasyUI Form Plugin - `Datebox Date Field`

Extends from $.fn.combo.defaults. Overrides the default defaults with $.fn.datebox.defaults.

The datebox combines an editable text box and a drop-down calendar panel, allowing users to select a date from the drop-down calendar panel. Strings entered in the text box can be converted into valid dates. The selected date can also be converted into the desired format.

Dependencies

combo
calendar

Usage

Create a datebox from markup.

<input id="dd" type="text" class="easyui-datebox" required="required">

Create a datebox using JavaScript.

<input id="dd" type="text">

$('#dd').datebox({
    required: true
});

Properties

This property extends from combo, and the following properties are added for datebox.

Name	Type	Description	Default Value
panelWidth	number	The width of the drop-down calendar panel.	180
panelHeight	number	The height of the drop-down calendar panel.	auto
currentText	string	The text displayed on the current date button.	Today
closeText	string	The text displayed on the close button.	Close
okText	string	The text displayed on the ok button.	Ok
disabled	boolean	When set to true, disables the field.	false
buttons	array	Buttons under the calendar. This property is available since version 1.3.5. <br>Example code: var buttons = $.extend([], $.fn.datebox.defaults.buttons);<br>buttons.splice(1, 0, {<br> text: 'MyBtn',<br> handler: function(target){<br> alert('click MyBtn');<br> }<br>});<br>$('#dd').datebox({<br> buttons: buttons<br>});
sharedCalendar	string,selector	A shared calendar used by multiple datebox components. This property is available since version 1.3.5. <br>Example code: <input class="easyui-datebox" sharedCalendar="#sc"><br><input class="easyui-datebox" sharedCalendar="#sc"><br><div id="sc" class="easyui-calendar"></div>	null
formatter	function	A function to format the date, which takes a 'date' parameter and returns a string value. The following example shows how to override the default formatter function. $.fn.datebox.defaults.formatter = function(date){<br> var y = date.getFullYear();<br> var m = date.getMonth() + 1;<br> var d = date.getDate();<br> return m + '/' + d + '/' + y;<br>}
parser	function	A function to parse the date string, which takes a 'date' string and returns a date value. The following example shows how to override the default parser function. $.fn.datebox.defaults.parser = function(s){<br> var t = Date.parse(s);<br> if (!isNaN(t)){<br> return new Date(t);<br> } else {<br> return new Date();<br> }<br>}

Events

Name	Parameters	Description
onSelect	date	Triggered when a user selects a date. <br>Example code: $('#dd').datebox({<br> onSelect: function(date){<br> alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":" + date.getDate());<br> }<br>});

Methods

This method extends from combo, and the following methods are overridden for datebox.

Name	Parameters	Description
options	none	Returns the options object.
calendar	none	Gets the calendar object. The following example shows how to get the calendar object and then modify it. // get the calendar object<br>var c = $('#dd').datebox('calendar');<br>// set the first day of the week to Monday<br>c.calendar({<br> firstDay: 1<br>});
setValue	value	Sets the value of the datebox. <br>Example code: $('#dd').datebox('setValue', '6/1/2012'); // set datebox value<br>var v = $('#dd').datebox('getValue'); // get datebox value