jQuery Datepicker UI仅在单击“关闭”按钮或“完成”按钮时关闭
我正在使用jQueryUIDatePicker Datepicker工作正常,但当我们在日历外单击或单击Escape按钮时,它会关闭。但我希望我的日期选择器只有在我们单击“完成”按钮时才关闭jQuery Datepicker UI仅在单击“关闭”按钮或“完成”按钮时关闭,jquery,jquery-ui,date,datepicker,Jquery,Jquery Ui,Date,Datepicker,我正在使用jQueryUIDatePicker Datepicker工作正常,但当我们在日历外单击或单击Escape按钮时,它会关闭。但我希望我的日期选择器只有在我们单击“完成”按钮时才关闭 $(".date-picker").datepicker({ dateFormat: 'mm-yy', changeMonth: true, changeYear: true, showButtonPanel: true, onclose: function(dat
$(".date-picker").datepicker({
dateFormat: 'mm-yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onclose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
}
});
我如何才能做到这一点?无法控制关闭日期选择器的触发器。最接近的方法可能是创建一个内联日期选择器,并根据自己的意愿显示/隐藏。但是,内联日期选择器中不显示“完成”按钮,因为内联日期选择器通常不需要隐藏。这是我所能得到的最接近哈奇的结果: HTML:
此解决方案也已发布在中,它工作得非常完美: CSS: 和HTML:
日期:
看看它是怎么工作的
来源:
<input id="date" /> <button id="done">Done</button>
<div class="date-picker"></div>
$(".date-picker").hide().datepicker({
dateFormat: 'mm-yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
altField: '#date'
});
$('#date').click(function() {
$(".date-picker").show();
$('#done').show();
});
$('#done').hide().click(function() {
$(".date-picker").hide();
$(this).hide();
});
$(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));
});
});
});
.ui-datepicker-calendar {
display: none;
}
<label for="myDate">Date :</label>
<input name="myDate" class="monthYearPicker">