javascript 仅包含月份和年份的日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13681837/
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
Datepicker with month and year only
提问by Murugavel
I would like to have a datepicker where user can select only the month and year from the datepicker and i also need to restrict the next datepicker with selected month and year from previous datepicker..
我想要一个日期选择器，用户只能从日期选择器中选择月份和年份，而且我还需要使用上一个日期选择器中的选定月份和年份来限制下一个日期选择器。
Can anyone help me out?
谁能帮我吗？
回答by iappwebdev
Sean answer is pretty good, if you want to disable day selecting as well, you might use a different approach, you can see the result in this fiddle:
肖恩的回答非常好，如果你也想禁用日期选择，你可以使用不同的方法，你可以在这个小提琴中看到结果：
Calendar is hidden, so you can only choose month and year. When selecting a date in first datepicker, minDate of second datepicker is getting adapted.
日历是隐藏的，所以你只能选择月份和年份。在第一个 datepicker 中选择日期时，第二个 datepicker 的 minDate 正在适应。
EDIT
编辑
jQuery datepicker has seriously problems when dateformat doesn't provide a day. I changed th code to make it work. Only thing is when opening a datepicker, I have to convert the date to a suitable format. Have a look at the new fiddle.
当 dateformat 不提供日期时，jQuery datepicker 会出现严重问题。我更改了代码以使其工作。唯一的问题是在打开日期选择器时，我必须将日期转换为合适的格式。看看新的小提琴。
HTML:
HTML：
<p>Date: <input type="text" id="first-datepicker"/></p>
<p>Date: <input type="text" id="second-datepicker"/></p>
CSS:
CSS：
#ui-datepicker-div .ui-datepicker-calendar,
#ui-datepicker-div .ui-datepicker-current
{
display: none !important;
}
JAVASCRIPT:
爪哇脚本：
$('#first-datepicker').datepicker({
changeYear: true,
changeMonth: true,
beforeShow: function (input, inst) {
setMyDate(inst);
},
onClose: function (dateText, inst) {
saveMyDate(inst);
var secondDatePicker = $('#second-datepicker').data('datepicker');
var dateSetted = secondDatePicker.input.data('date-setted');
setMyDate(secondDatePicker);
secondDatePicker.input.datepicker('option', 'minDate', new Date(inst.selectedYear, inst.selectedMonth, 0));
if (dateSetted == true) {
saveMyDate(secondDatePicker);
};
}
});
$('#second-datepicker').datepicker({
changeYear: true,
changeMonth: true,
beforeShow: function (input, inst) {
setMyDate(inst);
},
onClose: function (dateText, inst) {
saveMyDate(inst);
}
});
function saveMyDate(inst) {
inst.selectedDay = 1;
inst.input.data('year', inst.selectedYear);
inst.input.data('month', inst.selectedMonth);
inst.input.data('day', inst.selectedDay );
var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
inst.input.datepicker('setDate', date );
formatDate(inst, date);
inst.input.data('date-setted', true);
};
function setMyDate(inst) {
var dateSetted = inst.input.data('date-setted');
if (dateSetted == true) {
var year = inst.input.data('year');
var month = inst.input.data('month');
var day = inst.input.data('day');
var date = new Date(year, month, day);
inst.input.datepicker('setDate', date );
};
};
function formatDate(inst, date) {
var formattedDate = $.datepicker.formatDate('MM - yy', date);
inst.input.val(formattedDate);
};
回答by Magus
You can use this monthpicker jquery widget : https://github.com/lucianocosta/jquery.mtz.monthpicker
你可以使用这个monthpicker jquery小部件：https: //github.com/lucianocosta/jquery.mtz.monthpicker
回答by Sean Airey
You can modify the jQuery datepicker to only allow the user to select certain dates, in this case we could restrict it to the first of the month:
您可以修改 jQuery datepicker 以仅允许用户选择某些日期，在这种情况下，我们可以将其限制为每月的第一天：
$(".datepicker").datepicker({
beforeShowDay: disableDaysExceptFirst
})
function disableDaysExceptFirst(date) {
if (date.getDate() != 1) {
return [false, date.getDate().toString() + "_day"];
}
return [true, ""];
}
You can also modify the options to display the date differently:
您还可以修改选项以不同方式显示日期：
$(".datepicker").datepicker({
dateFormat: 'mm/yy'
});
Combine the two and we get:
将两者结合起来，我们得到：
$(".datepicker").datepicker({
beforeShowDay: disableDaysExceptFirst,
dateFormat: 'mm/yy'
})
function disableDaysExceptFirst(date) {
if (date.getDate() != 1) {
return [false, date.getDate().toString() + "_day"];
}
return [true, ""];
}
You can also use this to restrict your second datepicker:
您还可以使用它来限制您的第二个日期选择器：
var restrictedMonth = parseInt($("#myFirstDatePicker").text().split("/")[0]); //replace myFirstDatePicker with the HTML ID of the text input your datepicker is attached to
$("#myFirstDatePicker").datepicker({
beforeShowDay: disableAllExceptCurrentMonth,
dateFormat: 'dd/mm/yy' //swap mm and dd for US dates
});
function disableAllExceptCurrentMonth(date) {
if (date.getMonth() != restrictedMonth) {
return [false, date.getDate().toString() + "_day"];
}
return [true, ""];
}
回答by Yannick Richard
If you can work in html5 i would suggest to use the new month input support for newer browser
如果您可以在 html5 中工作，我建议对较新的浏览器使用新的月份输入支持
simply use and let the magic happen.
只需使用并让魔法发生。
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/month
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/month
