[英]Datepicker with month and year only
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?谁能帮我吗?
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.
在第一个日期选择器中选择日期时,第二个日期选择器的 minDate 正在适应。
EDIT编辑
jQuery datepicker has seriously problems when dateformat doesn't provide a day.当 dateformat 不提供日期时,jQuery datepicker 会出现严重问题。 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.
看看新的小提琴。
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: 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);
};
您可以使用这个monthpicker jquery 小部件: https ://github.com/lucianocosta/jquery.mtz.monthpicker
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, ""];
}
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
Datepicker can show month and year only without using css Datepicker 可以只显示月份和年份而不使用 css
.ui-datepicker-calendar {
display: none;
}?
You can do like this你可以这样做
var dp=$("#datepicker").datepicker( {
format: "mm-yyyy",
startView: "months",
minViewMode: "months"
});
dp.on('changeMonth', function (e) {
//do something here
alert("Month changed");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.