jQuery datepicker - 在init之后更改.ui-datepicker-calendar的显示 [英] jQuery datepicker - change display of .ui-datepicker-calendar after init
问题描述
在初始化datepicker之后,如何更改ui-datepicker-calendar类的css显示属性?我有一个带有可选复选框的html表单,我想从其中切换此表的显示。我尝试了以下内容:
How can I change the css display attribute of the ui-datepicker-calendar class after the datepicker has already been initialized? I have a html form with a selectable checkbox from which I want to toggle the display of this table. I've tried the following:
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,但是还显示日历。
The beforeShow is called, but the calender is still displayed.
JS第二种方法:
<script>
$(document).ready(function() {
[....]
$("#dateplanedcheck").change(function() {
if ($(this).is(':checked')) {
$(".ui-datepicker-calendar").css("display", "none");
}
});
});
</script>
我缺少什么?这甚至可以用jQuery吗?
提前感谢!
What am I missing? Does this even work with jQuery? Thanks in advance!
推荐答案
所以,如果勾选复选框,您不想显示日历?
So you want to NOT show the calendar if the checkbox is checked?
只需返回false;
在beforeShow中。
Just return false;
in the beforeShow.
$("#datefrom, #dateto").datepicker({
dateFormat: "dd.mm.yy",
beforeShow: function(input, inst) {
if ($("#dateplanedcheck").prop('checked')) {
return false;
}
}
});
答案
仍然显示日历但使其不可见:
Still displaying the calendar but making it invisible:
BeforeShow无法访问表上的ui-datepicker-calendar,因为它尚未呈现。应用像 $(inst.dpDiv).addClass('calendar-off')
之类的类,然后具有样式 .calendar-off table.ui -datepicker-calendar {display none; }
如下: http://jsfiddle.net/JzbPD/4
BeforeShow can't access the ui-datepicker-calendar on the table because it hasn't been rendered yet. Apply a class like$(inst.dpDiv).addClass('calendar-off')
and then have the style .calendar-off table.ui-datepicker-calendar { display none; }
like this: http://jsfiddle.net/JzbPD/4
这篇关于jQuery datepicker - 在init之后更改.ui-datepicker-calendar的显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!