日期选择器自动打开 [英] Date Picker automatically opens
问题描述
我有一个javascript代码，我想使用它完成以下操作.我希望当我单击按钮时出现一个表单，但datepicker的日期选择选项不会自动出现(但在我的情况下会打开).所以换句话说，我要禁用该自动打开功能.这是脚本
I have a javascript code using which I want to accomplish the following . I want when i click on the button a form to appear but datepicker's date choosing option not to appear automatically (but in my case it opens up) . So in other words I wand disable that autoopen . Here is the script
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$("#button").click(function () {
var dates2 = $("#datePicker3,#datePicker4").datepicker({
autoOpen: false,
minDate: 0,
changeMonth: true,
numberOfMonths: 1,
onSelect: function (selectedDate) {
var option = this.id == "datePicker3" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates2.not(this).datepicker("option", option, date);
calculate_total_price();
}
}); ///
$("#order-popup").dialog();
$("#order-popup").show();
});
});
</script>
<input type="button" value="addclass" id="button">
<div id="order-popup" style="display:none;" class="popup-content already-ordered">
<input type="text" id="datePicker3" name="datepickerFrom" value="">
<br/>
<input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px">
</form>
</div>
</body>
推荐答案
datepicker立即显示的原因是，默认情况下，由于加载了datapicker的input具有focus. "http://jsfiddle.net/JXtBM/" rel ="noreferrer">请参见此处-这是因为它是表单上的第一个input....首先要好-> http://jsfiddle.net/JXtBM/1/
The reason the datepicker shows immediately is because the input the datapicker is loaded on has focus by default .. see here - this is because its the first input on a form .... if you add another input before the first its fine - > http://jsfiddle.net/JXtBM/1/
解决此问题的一种方法是使用按钮触发日期选择器的打开:
One way around this problem would be to use a button to trigger the opening of the datepicker :
showOn: "button",
buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
这篇关于日期选择器自动打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
