12 jquery
我有一个javascript代码,我想用它完成以下操作.我希望当我点击按钮时出现一个表单,但是datepicker的日期选择选项不会自动出现(但在我的情况下会打开).所以换句话说,我的魔杖禁用了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>
Man*_*eUK 17
究其原因,datepicker表示刚是因为input在datapicker被加载上具有focus默认.. 在这里看到的 -这是因为它的第一个input窗体上....如果添加另一个input第一以其优良的前- > HTTP://的jsfiddle.净/ JXtBM/1 /
解决此问题的一种方法是使用按钮来触发datepicker的打开:
showOn: "button",
buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
如果你不想把焦点放在日期选择器上,你可以在它们之前加上另一个输入并使它"隐形"
<input type="button" value="addclass" id="button">
<div id="order-popup" style="display:none;" class="popup-content already-ordered">
<input style="height:0px; top:-1000px; position:absolute" type="text" value="">
<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>?
在这种情况下,输入的高度为0px,并且不在屏幕之外,因此不会显示.请记住,应始终选择日期,由于日期格式,分隔符等,允许用户编写风险...