javascript JQuery Datepicker 从页面上的一个日历中隐藏日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10352769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Datepicker hide dates from one calendar on a page
提问by SaltyNuts
I have several datepickers on the same page and need one to only display the month and year, while others should show complete calendar with days. I know that to hide days from a lone datepicker I can do something like:
我在同一页面上有几个日期选择器，需要一个只显示月份和年份，而其他人应该显示完整的日历和日期。我知道要从一个单独的日期选择器中隐藏几天，我可以执行以下操作：
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
But that hides the dates from all calendars. How can I make sure the other datepicker keeps the calendar view?
但这会隐藏所有日历中的日期。如何确保其他日期选择器保留日历视图？
EditI did try nesting CSS but am still missing something. For HTML part I have roughly:
编辑我确实尝试过嵌套 CSS，但仍然缺少一些东西。对于 HTML 部分，我大致有：
<div id="monthOnly"><input type="text" class="monthly-picker" name="mdate"></div>
<div id="monthOnly"><input type="text" class="monthly-picker" name="mdate"></div>
And JS code $('.monthly-picker').datepicker();
和JS代码 $('.monthly-picker').datepicker();
Still, doing something like
仍然，做类似的事情
<style>
#monthOnly .ui-datepicker-calendar {
display: none;
}
</style>
Does not produce desired results.
不会产生预期的结果。
采纳答案by qw3n
give the use an id on a container element.
在容器元素上给 use 一个 id。
<style>
#monthOnly .ui-datepicker-calendar {
display: none;
}
</style>
EDIT: http://jsfiddle.net/h8DWR/is a solution to deal with the idiosyncrasies of datepicker. The idea is use a style element to add the style when the specific datepicker is chosen and then remove it when it is closed.
编辑：http: //jsfiddle.net/h8DWR/是处理日期选择器特性的解决方案。这个想法是使用样式元素在选择特定日期选择器时添加样式，然后在关闭时将其删除。
回答by Michel Ayres
I did a little different ...
我做了一些不同的...
HTML
HTML
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
CSS
CSS
.hide-calendar .ui-datepicker-calendar {
display: none;
}
jQuery
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));
}
});
});
回答by Anton Novik
Slightly different way
方式略有不同
$('.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="" />