2011-08-10 230 views
5

¿Cómo desactivo las fechas antes de hoy en jQuery datepicker SIN usar minDate: 0?cómo deshabilitar las fechas antes de hoy en jQuery datepicker

Me gustaría habilitar la navegación del calendario como es habitual antes de hoy, mientras me aseguro de que el usuario NO elija fechas antes de hoy.

(es decir, decir la fecha de hoy es 11Aug11 y me gustaría todas las fechas anteriores a este usuario con discapacidad, pero todavía permite ir a meses anteriores, años, etc.)

+6

Desde una perspectiva UX, ¿por qué quieres que sean capaces de ver * * los valores sin ser capaz de seleccionar * * los valores? – zzzzBov

+0

Gracias chicos, estoy de acuerdo que parece redundante, pero estoy construyendo un sitio web que permite al cliente organizar reuniones/eventos. Podría ser más conveniente para el cliente poder echar un vistazo atrás a las fechas anteriores en el mismo calendario por si acaso. – user864600

Respuesta

6

Aunque estoy de acuerdo en que es un comportamiento extraño, es posible que pueda simularlo usando el evento onSelect del datepicker.

$(document).ready(function() { 
    $('#Date').datepicker({ 
     onSelect: function(dateText, inst) { 
      //Get today's date at midnight 
      var today = new Date(); 
      today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear()); 
      //Get the selected date (also at midnight) 
      var selDate = Date.parse(dateText); 

      if(selDate < today) { 
       //If the selected date was before today, continue to show the datepicker 
       $('#Date').val(''); 
       $(inst).datepicker('show'); 
      } 
     } 
    }); 
}); 

Básicamente, se controlará el evento onSelect.

Cuando se selecciona una fecha, verifique si es anterior a la fecha de hoy.

Si es es, entonces de inmediato show datepicker nuevamente y borre la casilla de entrada que se le atribuye.


Actualizado Ejemplo de código es ahora completamente funcional. Aquí hay un jsfiddle para demostrar.

1

No parece ser configurable. En line 1434 of jquery.ui.datepicker.js, si se especifica maxDate, establece una variable maxDraw y dibuja hasta el mes de esa fecha, sin tener en cuenta ninguna otra marca.

Pero también estoy de acuerdo con zzzzBov. ¿Por qué debería el usuario ver valores que no puede seleccionar?

3

Espero que esto todavía sea útil para alguien. Mi solución es colocar controles de las fechas individuales como esto:

$("#StartDate").datepicker({ dateFormat: 'yy-mm-dd', beforeShowDay: NotBeforeToday}); 



function NotBeforeToday(date) 
{ 
    var now = new Date();//this gets the current date and time 
    if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() > now.getDate()) 
     return [true]; 
    if (date.getFullYear() >= now.getFullYear() && date.getMonth() > now.getMonth()) 
     return [true]; 
    if (date.getFullYear() > now.getFullYear()) 
     return [true]; 
    return [false]; 
} 

me resulta sencillo y elegante

1

su lugar se puede escribir una función en sus Js presentar así-

$(function() { 

      var date = new Date(); 
      var currentMonth = date.getMonth(); 
      var currentDate = date.getDate(); 
      var currentYear = date.getFullYear(); 

      if($("#dateToSelect").length > 0){ 
       $("#dateToSelect").datepicker({ 
       maxDate: new Date(currentYear, currentMonth, currentDate) 
      }); 
      } 
}) 

Aquí "dateToSelect" es la identificación del campo donde se muestra la fecha. La verificación de la longitud de la fecha aquí no es obligatoria.

1

solución más simple podría ....

<script type="text/javascript">$('#date').datepicker({ minDate: 0 });</script> 
Cuestiones relacionadas