Datepicker仅包含月份和年份
我想有一个日期选择器，用户只能从日期选择器中选择月份和年份，我还需要限制下一个日期选择器，选择上一个日期选择器中的月份和年份。
谁能帮我吗？
肖恩的答案非常好，如果你想禁用日期选择，你可能会使用不同的方法，你可以看到这个小提琴的结果：
日历已隐藏，因此您只能选择月份和年份。 在第一个datepicker中选择日期时，第二个datepicker的minDate正在适应。
编辑
当dateformat没有提供一天时，jQuery datepicker存在严重问题。 我更改了代码以使其工作。 唯一的事情是打开一个datepicker，我必须将日期转换为合适的格式。 看看新的小提琴。
HTML：
Date:
Date:
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); };
您可以修改jQuery datepicker以仅允许用户选择某些日期，在这种情况下，我们可以将其限制为该月的第一天：
$(".datepicker").datepicker({ beforeShowDay: disableDaysExceptFirst }) function disableDaysExceptFirst(date) { if (date.getDate() != 1) { return [false, date.getDate().toString() + "_day"]; } return [true, ""]; }
您还可以修改选项以不同方式显示日期：
$(".datepicker").datepicker({ dateFormat: 'mm/yy' });
结合这两个，我们得到：
$(".datepicker").datepicker({ beforeShowDay: disableDaysExceptFirst, dateFormat: 'mm/yy' }) function disableDaysExceptFirst(date) { if (date.getDate() != 1) { return [false, date.getDate().toString() + "_day"]; } return [true, ""]; }
您还可以使用它来限制第二个日期选择器：
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, ""]; }
你可以使用这个monthpicker jquery小部件： https ： //github.com/lucianocosta/jquery.mtz.monthpicker
如果你可以在html5中工作，我会建议使用新的月份输入支持更新的浏览器
简单地使用并让魔法发生。
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/month