¿Como puedo utilizar dos datepicker de jQuery en una misma página?

Buenas noches, escribo en esta oportunidad porque tengo un problema con el datepicker. Estoy utilizando uno solo para seleccionar el mes y el año; ese me funciona bien este es el código que estoy utilizando:

<input type="text" class="form-control date-picker deshabilitar-aseo"  id="nro" name="nro" />

$('.date-pickerOtros').datepicker({
    changeMonth: true,
    showButtonPanel: true,
    dateFormat: 'PAGÓ HASTA MM ' + strDate,
    onClose: function(dateText, inst) { 
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = strDate;
        $(this).datepicker('setDate', new Date(year, month, 1));
    }
});

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

Pero el problema que se me presenta es que quiero utilizar otro datepicker en la misma página pero en distinto lugares. Pero como antes le estoy diciendo que no me muestre los números al colocar el segundo datepicker, me lo muestra igual que el anterior, ¿cómo puedo hacer para que en el segundo datepicker me muestre el calendario normal? Es decir, con los días mes y años. En el segundo datepicker el código que estoy utilizando es este:

<div class="input-group">
  <input type = "text" id = "fechaP" name="fechaP" class="form-control" readonly />
  <span class="input-group-addon fecha1"><i class="icon-calendar"></i></span>
</div>

$("#fechaP").datepicker({
    changeMonth: true,
        changeYear: true      
    });
    $(".fecha1").on("click", function(){
    $("#fechaP").datepicker("show");
  });

Si me pudieran ayudar o dar una idea se lo agradecería

Respuestas

Si estás ocultando el calendario del primer datepicker simplemente con CSS, sólo tendrías que retocar un poco el siguiente estilo:

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

En vez de ocultar todos los calendarios de todos los datepickers, utiliza la clase CSS .deshabilitar-aseo para solo afectar al primer datepicker:

.deshabilitar-aseo .ui-datepicker-calendar {
    display: none;
}

@javiereguiluz

7 agosto 2015, 8:48

Muchas gracias @javiereguiluz por responderme. Cambié el CSS por el que me comentaste y no me funciona porque cuando coloco el focus en el input que tiene la clase .deshabilitar-aseo y me sale el calendario completo es como sino hiciera caso al CSS, ¿cómo haría en ese caso?

@eng_teresa

7 agosto 2015, 19:46