2010-10-29 16 views
16

Estoy usando un jQuery datepicker para seleccionar la fecha de nacimiento de un solicitante, pero la edad del solicitante debe estar restringida a valores entre 21 y 100 años.Problema con la barra desplegable de año en jQuery datepicker

Para facilitar la selección, he activado los cuadros desplegables de mes y año, y estando en el Reino Unido lo he localizado.

<script type="text/javascript"> 
$(function() { 
    $(".dp1").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'd MM yy', minDate: '-100y', maxDate: '-21y' }); 
}); 

El código ASP.NET MVC2 VB.NET para el cuadro de texto es el siguiente:

<%: Html.TextBox("", If(DirectCast(Model, DateTime) = DateTime.MinValue, String.Empty, ViewData.TemplateInfo.FormattedModelValue), New With {.class = "dp1"})%> 

Eso es al bien, pero el menú desplegable años sólo se muestra un rango limitado de valores y sin barra de desplazamiento para indicar que la lista de años es más larga, pero el tamaño del control deslizante de la barra de desplazamiento no da ninguna pista visual de todo el rango:

alt text

Si hace clic en el valor superior y luego dejar que el cierre desplegable, la próxima vez que lo abra, más valores aparecen:

alt text

Este es un comportamiento no evidente y sólo topamos con él por accidente. ¿Hay alguna forma de hacer que la barra de desplazamiento aparezca en todo momento y con un tamaño de control deslizante inversamente proporcional al rango? Y si no, ¿qué otros métodos de selección de fechas que se remontan a un siglo (en realidad 99 años estarían bien) se recomiendan?

Para que conste que estoy usando:

  • jquery-1.4.1

Gracias jquery-ui-1.8.5

  • Crispin

  • Respuesta

    23

    Try también establece la opción yearRange (que establecerá el rango de años en el cuadro desplegable de año). Puede configurarlo como yearRange: "-100: -21". Tenga en cuenta que establecer yearRange solo no afecta las fechas reales que el usuario puede elegir (aún necesita establecer minDate y maxDate).

    3

    Lo siguiente establecerá el rango de año de 1970 al año actual y también se ocupará del problema de desplazamiento.

    .datepicker({yearRange: "1970:+nn"});

    +0

    El mejor lugar para aprender sobre jqueryui selector de fechas: [link] (http://api.jqueryui.com/datepicker/) –

    Cuestiones relacionadas