SaltyNuts SaltyNuts - 2 months ago 13
Javascript Question

JQuery Datepicker hide dates from one calendar on a page

I have several datepickers on the same page and need one to only display the month and year, while others should show complete calendar with days. I know that to hide days from a lone datepicker I can do something like:

<style>
.ui-datepicker-calendar {
display: none;
}
</style>


But that hides the dates from all calendars. How can I make sure the other datepicker keeps the calendar view?

Edit
I did try nesting CSS but am still missing something. For HTML part I have roughly:

<div id="monthOnly"><input type="text" class="monthly-picker" name="mdate"></div>


And JS code
$('.monthly-picker').datepicker();


Still, doing something like

<style>
#monthOnly .ui-datepicker-calendar {
display: none;
}
</style>


Does not produce desired results.

Answer

give the use an id on a container element.

<style>
 #monthOnly .ui-datepicker-calendar {
   display: none;
 }
</style>

EDIT: http://jsfiddle.net/h8DWR/ is a solution to deal with the idiosyncrasies of datepicker. The idea is use a style element to add the style when the specific datepicker is chosen and then remove it when it is closed.