[英]JQuery Datepicker hide dates from one calendar on a page
我在同一页面上有几个日期选择器,需要一个只显示月份和年份,而其他人应该显示完整的日历和日期。 我知道要从一个独立的日期选择器中隐藏日子,我可以做类似的事情:
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
但这隐藏了所有日历的日期。 如何确保其他日期选择器保留日历视图?
编辑我确实尝试嵌套CSS但仍然遗漏了一些东西。 对于HTML部分我大致有:
<div id="monthOnly"><input type="text" class="monthly-picker" name="mdate"></div>
和JS代码$('.monthly-picker').datepicker();
还是,做点什么
<style>
#monthOnly .ui-datepicker-calendar {
display: none;
}
</style>
不会产生预期的结果。
在容器元素上使用id。
<style>
#monthOnly .ui-datepicker-calendar {
display: none;
}
</style>
编辑: http : //jsfiddle.net/h8DWR/是一个处理datepicker的特性的解决方案。 想法是使用样式元素在选择特定日期选择器时添加样式,然后在关闭时将其删除。
我做了一点点不同......
HTML
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
CSS
.hide-calendar .ui-datepicker-calendar {
display: none;
}
jQuery的
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
yearRange: '1980:' + new Date().getFullYear(),
beforeShow: function(el, dp) {
$('#ui-datepicker-div').addClass('hide-calendar');
},
onClose: function(dateText, inst) {
$('#ui-datepicker-div').removeClass('hide-calendar');
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
方式略有不同
$('.year').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', beforeShow: function(input) { $(this).datepicker('widget').addClass('hide-calendar'); }, onClose: function(input, inst) { $(this).datepicker('widget').removeClass('hide-calendar'); $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)); } }); $('.datepicker').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy dd', onClose: function(input, inst) { $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)); } });
.hide-calendar .ui-datepicker-calendar{ display: none; }
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" /> <input class="year" type="text" id="" /> <input class="datepicker" type="text" id="" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.