我正在尝试在同一页面中使用2个不同的t-datepiker。
html代码是
<div class="t-datepicker">
<div class="t-check-in"></div>
<div class="t-check-out"></div>
</div>
<div class="class_a">
<div class="t-check-in"></div>
<div class="t-check-out"></div>
</div>
和调用t-datepicker的脚本是
<script type="text/javascript">
$(document).ready(function(){
$('.t-datepicker').tDatePicker({
// Global options
autoClose: true,
limitNextMonth: 3,
numCalendar : 1,
dateRangesHover: false
});
$('.class_a').tDatePicker({
// Options for .class_a
limitNextMonth: 4,
numCalendar : 2,
dateRangesHover: true
});
});
</script>
出现第一个日期选择器,并且html具有t-datepicker-open类
在class_a上单击第二个选择器
出现类t-datepicker-open,但随后立即消失,因此第二个datepicker不起作用。
根据文档,它应该作为多个选择器的说明工作:
<script type="text/javascript">
$(document).ready(function(){
$('.t-datepicker').tDatePicker({
// Global options
});
$('.class_a').tDatePicker({
// Options for .class_a
});
$('.class_b').tDatePicker({
// Options for .class_b
});
});
</script>
有什么建议吗?
答案 0 :(得分:1)
尝试一下。
html
<div class="t-datepicker class_a">
<div class="t-check-in"></div>
<div class="t-check-out"></div>
</div>
<div class="t-datepicker class_b">
<div class="t-check-in"></div>
<div class="t-check-out"></div>
</div>
js
<script type="text/javascript">
$(document).ready(function(){
$('.class_a').tDatePicker({
// options only here
autoClose: true,
limitNextMonth: 3,
numCalendar : 1,
dateRangesHover: false
});
$('.class_b').tDatePicker({
// options only here
limitNextMonth: 4,
numCalendar : 2,
dateRangesHover: true
});
});
</script>