我有一个 JavaScript 代码，我想用它来完成以下任务。我希望当我单击按钮时会出现一个表单，但日期选择器的日期选择选项不会自动出现（但在我的情况下它会打开）。换句话说，我想禁用 autoopen 。这是脚本
<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立即显示是因为input the datapicker已加载focus默认情况下 ..see here http://jsfiddle.net/JXtBM/- 这是因为它是第一个input在表格上......如果您添加另一个input在第一个之前还好 - >http://jsfiddle.net/JXtBM/1/ http://jsfiddle.net/JXtBM/1/
解决此问题的一种方法是使用按钮来触发日期选择器的打开：
showOn: "button",
buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
工作示例在这里 http://jsfiddle.net/JXtBM/2/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
