jQuery UI - Datepicker - Ocultar año

Question

Estoy usando jQuery UI 1.8 y me gustaría ocultar el año del usuario tanto en la ventana emergente como en el cuadro de texto. Esencialmente, en lugar de elegir el día, mes y año, quiero que el usuario simplemente seleccione el día y el mes.

Ocultar el año en el cuadro de texto es bastante fácil, el código que se muestra a continuación lo hará. Estoy perplejo sobre cómo ocultar el año de la ventana emergente, por lo que diría "abril" en lugar de "abril de 2010".

$(function() { 
     $("#beginDateRange").datepicker({ dateFormat: 'mm/dd' }); 
}); 

<input type="text" name="beginDateRange" id="beginDateRange" /> 

Cualquier ayuda sería muy apreciada.

Answer 1

No creo que esta opción esté expuesta a la API. Creo que la forma más fácil es cambiar la hoja de estilo. Cambie la clase de ui-datepicker-year a display: none Otra opción sería la de modificar el origen de lo que isnt prestados en absoluto, que ver que se puede eliminar esta parte del código:

// year selection 
if (secondary || !changeYear) 
html += '<span class="ui-datepicker-year">' + drawYear + '</span>'; 
else { 
// determine range of years to display 
var years = this._get(inst, 'yearRange').split(':'); 
var thisYear = new Date().getFullYear(); 
var determineYear = function(value) { 
var year = (value.match(/c[+-].*/) ? drawYear + parseInt(value.substring(1), 10) : 
(value.match(/[+-].*/) ? thisYear + parseInt(value, 10) : 
parseInt(value, 10))); 
return (isNaN(year) ? thisYear : year); 
}; 
var year = determineYear(years[0]); 
var endYear = Math.max(year, determineYear(years[1] || '')); 
year = (minDate ? Math.max(year, minDate.getFullYear()) : year); 
endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear); 
html += '<select class="ui-datepicker-year" ' + 
'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' + 
'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' + 
'>'; 
for (; year <= endYear; year++) { 
html += '<option value="' + year + '"' + 
(year == drawYear ? ' selected="selected"' : '') + 
'>' + year + '</option>'; 
} 
html += '</select>'; 
} 

No he probado la eliminación de la código, pero debería funcionar. Yo probé ocultarlo usando css y que hace el trabajo (en Firefox de todos modos :))

HTH

Answer 2

muy vieja pregunta, pero yo sólo tenía que hacer esto mismo y aquí está un método alternativo que podría ser útil para alguien; una solución rápida y sucia que permitirá que sus otros buscadores de fechas continúen trabajando, siempre que NO necesite el cambio. La funcionalidad del año es establecer changeYear en true en los marcadores de fecha que NO quiere que aparezca un año, luego agregue el CSS:

select.ui-datepicker-year { display:none } 

Answer 3

Encontré este hilo en mi búsqueda de una buena manera de hacer esto, y esto es lo que se me ocurrió.

en mi css tengo un

.BirthdayDatePicker .ui-datepicker-year 
{ 
display:none; 
} 

y así es como puedo configurar mi datepickers que no desea mostrar el año en:

$('.DateTextBox.NoYear').datepicker({ 
      beforeShow: function (input, inst) { 

       inst.dpDiv.addClass('BirthdayDatePicker'); 
      }, 
      onClose: function(dateText, inst){ 
       inst.dpDiv.removeClass('BirthdayDatePicker'); 
      } 
     }); 

básicamente i añadir la clase justo antes de que se muestre, y quítelo cuando lo oculte, de modo que los demás selectores de fecha en la página no se vean afectados.

por si acaso alguien necesita ocultar el año solo en selectores específicos en una página y no quiere meterse con las partes internas de jQuery.

Answer 4

El atributo

changeYear:false; 

select.ui-datepicker-year { display:none } 

veces cambiar desplegable para atravesar. <span></span> Así que agrega este código CSS.

span.ui-datepicker-year { display:none } 

Answer 5

VIKSME Hide year http://jsfiddle.net/tocv/e5cvA/

CSS

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

HTML

<div id="datepicker"></div> 

</div> 

JavaScript

$(function() { 
    $("#datepicker").datepicker({ 
     changeMonth: true, 
     changeYear: false 
    }); 
    });