Print Page - How can a generic databox onchange handler can modify value?

I have a dialog box with a datebox control on it. If an end user types in a date like "9-9-13", the popup calendar properly selects the date as Sep 9, 2013 and if the user hits return, the date is properly changed to 9/9/13 and all is well. But if the user uses the tab key to leave that field and move to the next one, the datebox value is left as "9-9-13" which causes parsing errors downstream. One solution is clearly to change the downstream processing to look for either mm/dd/yy or mm-dd-yy - but I'd much rather have a generic solution on the client side.

HTML fragment looks like this:

Code:

<input name="date" id="date" class="easyui-datebox"/>

I tried using onChange to dynamically change the '-' character to a '/' like this:

Code:

   $('#date').datebox({
      onChange:  function(newValue,oldValue) {
         if (newValue.indexOf('-') >= 0) {
            newValue = replaceAll(newValue, '-', '/');
            $(this).datebox('setValue', newValue);
         }
      }
   });

Breakpoints show that newValue is being changed dynamically as expected, and I don't see any javascript console errors -- but the datebox value is not being changed either.

How can I accomplish this?

To correct the inputted value, the better way is to override $.fn.datebox.defaults.keyHandler.query function.

Code:

$('#db').datebox('options').keyHandler.query = function(q){
if (q.indexOf('-') >= 0) {
            q = replaceAll(q, '-', '/');
}
$(this).datebox('setValue', q);
}

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: tomhj on September 30, 2013, 09:41:29 AM