JQuery Datepicker ocultar fechas de un calendario en una página

Question

Tengo varios fechadores en la misma página y necesito uno para mostrar solo el mes y el año, mientras que otros deben mostrar el calendario completo con días. Sé que para ocultar días de un selector de fechas solitario que puedo hacer algo como:

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

Pero que oculta las fechas de todos los calendarios. ¿Cómo puedo asegurarme de que el otro datepicker mantenga la vista del calendario?

Editar Intenté anidar CSS pero aún me falta algo. Por parte HTML tengo más o menos: Código

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

y JS $('.monthly-picker').datepicker();

Aún así, haciendo algo como

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

No produce los resultados deseados.

Answer 1

dan el uso una identificación en un elemento contenedor.

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

EDIT: http://jsfiddle.net/h8DWR/ es una solución para hacer frente a la idiosincrasia del selector de fechas. La idea es utilizar un elemento de estilo para agregar el estilo cuando se elija el marcador de fecha específico y luego eliminarlo cuando se cierra.

Answer 2

lo hice un poco diferente ...

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

Ligeramente diferente manera

$('.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="" />