在初始化日期选择器后,如何更改 ui-datepicker-calendar 类的 css 显示属性?我有一个带有可选复选框的 html 表单,我想从中切换该表的显示。我尝试过以下方法:
HTML 示例:
<div class="row">
<div class="adddescr"><label for="date">Zeitraum:</label></div>
<div class="addinput" id="date"><input type="text" id="datefrom" name="datefrom" class="date" /> - <input type="text" id="dateto" name="dateto" class="date" /></div>
</div>
<div class="row">
<div class="addinput"><label><input type="checkbox" id="dateplanedcheck" /> grobe Planung</label></div>
</div>
JS第一种方法:
<script>
$(document).ready(function() {
$("#datefrom, #dateto").datepicker({ dateFormat: "dd.mm.yy",
[...]
beforeShow: function(input, inst) {
if ($("#dateplanedcheck").is(':checked')) {
$(".ui-datepicker-calendar").css("display", "none");
}}
});
[...]
});
<script>
beforeShow 被调用,但日历仍然显示。
JS第二种方法:
<script>
$(document).ready(function() {
[....]
$("#dateplanedcheck").change(function() {
if ($(this).is(':checked')) {
$(".ui-datepicker-calendar").css("display", "none");
}
});
});
</script>
我缺少什么?这也适用于 jQuery 吗?
提前致谢!
那么如果选中该复选框,您不想显示日历吗?
Just return false;
在之前的节目中。
$("#datefrom, #dateto").datepicker({
dateFormat: "dd.mm.yy",
beforeShow: function(input, inst) {
if ($("#dateplanedcheck").prop('checked')) {
return false;
}
}
});
http://jsfiddle.net/JzbPD/ http://jsfiddle.net/JzbPD/
Answer:
仍然显示日历但使其不可见:
BeforeShow 无法访问表格上的 ui-datepicker-calendar,因为它尚未渲染。应用像这样的类$(inst.dpDiv).addClass('calendar-off')
然后就有了风格.calendar-off table.ui-datepicker-calendar { display none; }
像这样:http://jsfiddle.net/JzbPD/4 http://jsfiddle.net/JzbPD/4
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)