JQuery Datepicker hide dates from one calendar per page

Question

I have several date pickers on one page, and you only need to display the month and year, while others should show a full calendar with days. I know that to hide days from a lonely datepicker, I can do something like:

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

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

Edit I tried nesting the CSS, but I still can't see anything. For the HTML part, I have roughly:

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

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

Still doing something like

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

It does not give the desired results.

Answer 1

provide the identifier of the container element.

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

EDIT: http://jsfiddle.net/h8DWR/ is a solution to deal with the features of a date picker. The idea is to use a style element to add a style when a specific date picker is selected, and then delete it when it is closed.

Answer 2

I'm a little different ...

HTML

 <label for="startDate">Date :</label> <input name="startDate" id="startDate" class="date-picker" /> 

CSS

 .hide-calendar .ui-datepicker-calendar { display: none; } 

JQuery

 $(function() { $('.date-picker').datepicker( { changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', yearRange: '1980:' + new Date().getFullYear(), beforeShow: function(el, dp) { $('#ui-datepicker-div').addClass('hide-calendar'); }, onClose: function(dateText, inst) { $('#ui-datepicker-div').removeClass('hide-calendar'); var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(year, month, 1)); } }); }); 

Fiddle

Answer 3

Slightly different way

 $('.year').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', beforeShow: function(input) { $(this).datepicker('widget').addClass('hide-calendar'); }, onClose: function(input, inst) { $(this).datepicker('widget').removeClass('hide-calendar'); $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)); } }); $('.datepicker').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy dd', onClose: function(input, inst) { $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)); } }); 

 .hide-calendar .ui-datepicker-calendar{ display: none; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" /> <input class="year" type="text" id="" /> <input class="datepicker" type="text" id="" />