jquery ui datepicker día/mes solamente, no año de selección

Question

He buscado aquí en SO y todo pero no se han encontrado soluciones adecuadas para este problema. Con jQueryUI DatePicker tengo que seleccionar una fecha recursiva para todos los años, por lo que no quiero mostrar la selección del año, porque no tiene sentido.

¿Cómo puedo obtener esto dentro de la llamada como el siguiente?

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

Nota: No puedo utilizar la solución css como se sugiere here.ui-datepicker-year{ display:none; } porque hay otros datepickers en la misma página.

Cualquier ayuda será apreciada.

Gracias de antemano.

Answer 1

HIYA probar este favor demostración: http://jsfiddle.net/rAdV6/20/ esto es lo que quiere bruv

cual sea la que se adapta el hombre :) también ver tanto siguiente captura de pantalla y por favor no se olvide de aceptar y hasta voto si esto ayuda :))

Editar para elaborar aún más esta solución permitirá tener múltiples selectores de fecha, con o sin años en la parte superior aparecerá en la parte superior del calendario.

Espero que esto ayude! aplausos

código jQuery

$('.DateTextBox.NoYear').datepicker({ 
      beforeShow: function (input, inst) { 
       inst.dpDiv.addClass('NoYearDatePicker'); 
      }, 
      onClose: function(dateText, inst){ 
       inst.dpDiv.removeClass('NoYearDatePicker'); 
      } 
     }); 

$('#datepicker').datepicker({ changeYear: false, dateFormat: 'dd/mm',}); 


$('#datepicker1').datepicker({ changeYear: true, dateFormat: 'dd/mm', }); 

$('#datepicker2').datepicker({ changeYear: false, dateFormat: 'dd/mm', }); 
​ 

Css

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

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all"> 

date (without year) <input type="text" id="datepicker" class="DateTextBox NoYear"> 

<br /> 
date 1: (With year) <input type="text" id="datepicker1" > 
<br /> 
date 2: (Without year) <input type="text" id="datepicker2" class="DateTextBox NoYear"> 
​ 

imagen de abajo para mostrar cómo aparece en mi lappy OSX, así :)

Answer 2

No se pudo hacer

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

restringirlo a sólo el selector de fecha le preocupa?

Answer 3

Prueba esto:

$("#myInput").datepicker(); 
$("#myInput").datepicker("option", "dateFormat", "dd/mm"); 

Como jQuery UI DatePicker documentaion,

http://docs.jquery.com/UI/Datepicker#option-dateFormat

Tiene que llamar a la función siguiente en Inicialización.

$("#myInput").datepicker({ dateFormat: "dd/mm" }); 

No funcionará si lo llamas después del método init.

Answer 4

Basado en la respuesta de Tats_innit, aquí hay una solución que resuelve algunos de sus problemas.

$(function() { 
 
    $('.dp').datepicker({ 
 
    dateFormat: 'd MM yy', 
 
    beforeShow: function(inp, inst) { 
 
     if (inp.classList.contains("Birthday")) { 
 
     inst.dpDiv.addClass('BirthdayDatePicker'); 
 
     return { 
 
      dateFormat: 'MM d', 
 
      defaultDate: new Date(1904, 0, 1), 
 
      minDate: new Date(1904, 0, 1), 
 
      maxDate: new Date(1904, 11, 31), 
 
     }; 
 
     } 
 
    }, 
 
    onClose: function(dateText, inst) { 
 
     inst.dpDiv.removeClass('BirthdayDatePicker'); 
 
    } 
 
    }); 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
Birthday: <input type='text' class='dp Birthday' placeholder='Month day'> 
 

 
<div style="height: 12px" class="spacer"></div> 
 

 
Defaults: <input type='text' class='dp' placeholder='day Month year'>

me parece que el uso de una clase en la entrada de una manera más sencilla para especificar el comportamiento que queremos salir del selector de fechas.

Si se encuentra la clase Cumpleaños, usamos el año 1904 en lugar de lo que sea el año actual porque 1904 es un año bisiesto que asegura que el 29 de febrero esté disponible. También limitamos el widget a un período de 12 meses con las opciones minDate/MaxDate. También puede incluir numberOfMonths: [ 3, 4 ] en el objeto devuelto para mostrar todo el año a la vez si lo desea.

Answer 5

solución simple para esto:

$(".daypicker").datepicker({ 
    changeYear: false, 
    dateFormat: 'MM-dd', 
}).focus(function() { 
    $(".ui-datepicker-year").hide(); 
}); 

no lo puedo afectar a otros datepickers en una misma página.

Answer 6

Sé que es una vieja pregunta, pero tal vez sea útil para alguien. Si configura la opción changeYear: false, puede ver un <span> con un valor anual, pero si establece changeYear: true, puede ver un <select>. Podemos usar esta diferencia como esto:

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

 
    $("#no-year-datepicker").datepicker({ 
 
    dateFormat: "MM d", 
 
    changeMonth: true, 
 
    changeYear: false 
 
    }); 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> 
 

 
<p>With year: <input type="text" id="year-datepicker"></p> 
 
<p>Without year: <input type="text" id="no-year-datepicker"></p>