input绑定datapicker控件后input再绑定blur或者mouseout等问题

input绑定datapicker控件后input再绑定blur或者mouseout等问题

　　问题描述：今天在修改一个东西的时候需要给一个input输入域绑定blur事件，从而当它失去焦点后动态修改其中的内容。但是问题来了，当点击输入域datapicker控件出现，当离开输入域去选择时间时就触发了blur事件，而这个时候获取输入域内的内容时获取的是选择时间之前输入域的内容。这跟我们的想法相背离。比方说我们想校验选择的时间，可是每次都是校验的选择时间之前输入域的内容。

之前的错误做法：代码如下

　　

$('input.date').live('blur',function(){//选择class为date的input输入域
    if("" == $(this).val().trim()){
           $(this).val('balabalabala');
    }
});

　　这段代码很简单，目的是当输入域失去焦点时获取输入域的内容，并判断是否为空，如果为空则设置内容为balabalabala。（当然，你在这个时候校验或者正则匹配是一样的）而问题来了，除非你输入域失去焦点前内容为空，否则永远不会修改其内容为balabalabala。换句话说，取到的内容为选择时间之前的内容。这跟我们的初衷违背，我们希望的是取到选择时间之后的内容并当输入域失去焦点的时候进行操作或者校验等。

解决办法：

常规思路：从输入域input绑定事件（比方说blur）去思考。结果是总是出错，问题得不到解决。唯一可行的但是不科学或者说不合理的方法如下：

$('input.date').blur(function () {
    setTimeout(function () { /* 你的代码 */ }, 1000);
});

这段代码也很简单，选中控件，在失去焦点后不是马上去执行，而是设置一个延时，等待1秒或者几秒后再去执行。好了，问题解决。但是方法可行，却不可靠。你无法去左右用户点击事件后去点击其它部分之间的时间大小。

逆向思考：从datepicker这个插件方向去思考。该插件提供了几个方法，可以满足要求。

方法1：onSelect

$('input.date').datepicker({
    onSelect: function(dateText) {
     /*代码 */
        if("" == $(this).val()){
        $(this).val("balabalabala");
    }
     }
});

方法2：

$(".date-picker")
            .datepicker(options)
            .change(function () {
                if("" == $(this).val()){
            $(this).val("balabalabala");
        }
  });

　　问题得到解决。