YouTip

# jQuery EasyUI Form Plugin – Datebox * * jQuery EasyUI Plugins](#) * * * Extends from $.fn.combo.defaults. Override defaults by using $.fn.datebox.defaults. The datebox combines an editable text box and a drop-down calendar panel. Users can select a date from the drop-down calendar panel. The string entered in the text box can be converted to a valid date. The selected date can also be converted to the desired format. !(#) ## Dependencies * combo * calendar ## Usage Create a datebox from markup. Create a datebox using JavaScript. $('#dd').datebox({ required:true}); ## Properties The properties extend from combo, below are the added properties 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 'Today' 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 | The buttons beneath the calendar. This property is available since version 1.3.5. Code example: var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, {text: 'MyBtn',handler: function(target){alert('click MyBtn');}}); $('#dd').datebox({buttons: buttons }); | | | sharedCalendar | string,selector | A shared calendar used by multiple datebox components. This property is available since version 1.3.5. Code example: | null | | formatter | function | A function to format the date. The function takes a 'date' parameter and returns a string value. The following example demonstrates how to override the default formatter function. $.fn.datebox.defaults.formatter = function(date){var y = date.getFullYear();var m = date.getMonth()+1;var d = date.getDate();return m+'/'+d+'/'+y;} | | | parser | function | A function to parse a date string. The function takes a string parameter and should return a date object. The following example demonstrates how to override the default parser function. $.fn.datebox.defaults.parser = function(s){var t = Date.parse(s);if (!isNaN(t)){return new Date(t);} else {return new Date();}} | | ## Methods | Name | Parameter | Description | | :--- | :--- | :--- | | options | none | Return the options object. | | calendar | none | Get the calendar object. | | setValue | value | Set the datebox value. | | getPanel | none | Get the drop-down panel object. | | destroy | none | Destroy the datebox component. |