2013-03-25 91 views
9

有没有办法处理在jQuery UI DatePicker中按下“完成”按钮的事件?jquery DatePicker完成按钮

我有一个日期选择器,只允许为年份和月份之间选择here

的问题是,使用OnClose事件阻止我清场(如果我点击的日期选择这样会弹出然后如果我关闭当前选定的月份和年份将被放入该字段中)。

我不想在datepicker之外使用额外的“清除”按钮,所以我尽管可以使用完成按钮。

回答

8

为 “完成” 按钮调用_hideDatepicker功能,你可以重写它:

jQuery.datepicker._hideDatepicker = function() { 
    alert('hello'); 
}; 
1

可能:

$('#myInput') 
    .datepicker({ 
     // datepicker options 
    }) 
    .datepicker('widget') 
    .find('.ui-datepicker-close') 
    .on('click', function() { 
     // done button's handler here 
    }); 
7

这里是完美的解决方案:

$(function() { 
    $('.monthYearPicker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     dateFormat: 'MM yy' 
    }).focus(function() { 
     var thisCalendar = $(this); 
     $('.ui-datepicker-calendar').detach(); 
     $('.ui-datepicker-close').click(function() { 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      thisCalendar.datepicker('setDate', new Date(year, month, 1)); 
     }); 
    }); 
}); 

CSS:

.ui-datepicker-calendar { 
    display: none; 
} 

HTML:

<label for="myDate">Date :</label> 
<input name="myDate" class="monthYearPicker"> 

看看它是如何工作的在这个jsfiddle

来源:http://develop-for-fun.blogspot.com/2013/08/jquery-ui-datepicker-month-and-year.html

礼貌:THISTHAT SO答案合并,使这个解决方案。

5

我在一个论坛上找到解决方案(不记得在哪里 - 抱歉)。我知道这是一段时间,但为了将来的搜索:)

注:需要在插件中完成更改。您只需搜索“onClose:”即可找到它。

onClose: function (dateText, inst) { 
    function isDonePressed() { 
     return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1); 
    } 
    if (isDonePressed()){ 
     alert('done pressed'); 
    } 
} 
1
$('#start_date_download').datepicker({ 
    dateFormat:"yy-mm-dd", 
    "autoclose": true, 
    showButtonPanel: true, 
    closeText: 'Clear' 
}).focus(function() { 
    var thisCalendar = $(this); 
    $('.ui-datepicker-close').click(function() { 
     $.datepicker._clearDate($('#start_date_download')); 
    }); 
}); 
相关问题