我想在用户单击某些文本时使用jQuery显示日期选择器,然后在用户选择日期选择器上的日期后,我可以从日期选择器中获取值作为javascript变量。我的代码是这样的:
<div id="datepicker-container" style="display: none;">
<div id="select-delivery-date-input"> </div>
</div>
<a id="show-datepicker">Select Delivery Date</a>
<script>
$("#show-datepicker").click(function(){
$("#datepicker-container").show();
});
$('#select-delivery-date-input').datepicker({
dateFormat:'yy-m-d',
minDate: new Date(),
});
</script>
问题是,当日期选择器弹出窗口出现时,当我尝试在日期选择器弹出窗口上选择日期时,它不会关闭日期选择器弹出窗口。
您可以使用datepicker的onSelect
选项:
选择日期选择器时调用。该函数以文本形式接收所选日期,以参数形式接收datepicker实例。
然后,您可以使用jQuery hide()
。
这是一个现场样本:
$(document).ready(function() {
$("#show-datepicker").click(function(){
$("#datepicker-container").show();
});
$('#select-delivery-date-input').datepicker({
dateFormat:'yy-m-d',
minDate: new Date(),
onSelect: function(selectedDate){
console.log(selectedDate);
$("#datepicker-container").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="datepicker-container" style="display: none;">
<div id="select-delivery-date-input"> </div>
</div>
<a id="show-datepicker">Select Delivery Date</a>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句