I am looking to incorporate two unique PrimeFaces calendars on a single page.
The first calendar will display the date, while the second one will only show the month and year.
To achieve this, I have implemented the following JavaScript and CSS specifically for the month and year calendar. Although it works fine for that calendar, the other calendars are also being affected and not showing dates due to the CSS styling applied globally. Is there a way to apply the style only to a particular calendar and not all of them?
JavaScript :-
$(".monthPicker").datepicker({
dateFormat: 'M yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
maxDate: $.now() ,
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('M yy', new Date(year,month, 1)));
}
});
$( ".monthPicker" ).datepicker( "option", "maxDate", new Date() );
$(".monthPicker").focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
CSS:-
.ui-datepicker-calendar {
display: none;
}