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?
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.
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.
HTML:
<p>Date: <input type=text id=first-datepicker/></p>
<p>Date: <input type=text id=second-datepicker/></p>
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);
};