2011-03-21 15 views
22

Muchachos estoy usando un datetimepicker por trentrichardson.com.jquery selector de fecha y hora minDate dynamic

Tengo un formulario con dos campos de entrada: de y a y quiero ser capaz de establecer dinámicamente un MinDate a mi campo "a" igual al valor de mi campo "de".

Sé que debería usar una opción de beforShow pero no sé cómo implementar la función.

$('.from,.to').datetimepicker({ 

    beforeShow: customRange 

}); 

EDITADO/SOLUCIÓN

function customRange(input) { 
if (input.id == 'to') {  
var x=$('#from').datepicker("getDate"); 
$(".to").datepicker("option", "minDate",x); 
} 
else if (input.id == 'from') {  
var x=$('#to').datepicker("getDate"); 
$(".from").datepicker("option", "maxDate",x); 
} } 

Respuesta

22

puede establecer y obtener MinDate dinámicamente con setter y getter:

//getter 
var minDate = $(".selector").datepicker("option", "minDate"); 
//setter 
$(".selector").datepicker("option", "minDate", new Date(2007, 1 - 1, 1)); 

explained here

+0

necesito que el campo de entrada "a" sea al menos igual a cualquier valor de fecha dentro del campo "de" – luca

+0

Para hacer eso, consulte mi respuesta: http://stackoverflow.com/a/20010398/2246679 – Tanvir

3

Puede restrict the datepicker range.

Pero desea establecer este rango en la creación del selector de fecha en "desde". I made you a demo que parece funcionar bien por lo que yo entiendo la pregunta.

+0

Hola @ andyb, gracias por tu código. Pero después de seleccionar la fecha "de" y "a" una vez, vuelva para volver a seleccionar "a partir de" la fecha ". Luego, la fecha" a "no se puede actualizar según la fecha" a partir de "recién seleccionada. ¿Tiene alguna solución? ? –

+0

@Elena No veo este problema con la demostración. Después de establecer ambas fechas, luego cambiar el "desde" para estar más atrás o después de "a", entonces la apertura del selector de fecha "a" muestra más fechas en el pasado o se establece en la fecha "a partir de". ¿Puede explicar el problema o si puede crear una demostración y luego hacer una nueva pregunta? – andyb

+0

hola, en su demostración funciona perfectamente. Pero cuando inserté estas líneas en mi selector de mes de jquery (parte de la fecha "hasta" seleccionar). Entonces ocurre un problema como lo describí en la primera parte. Veo que publiqué el código en este enlace: http: //stackoverflow.com/questions/33411152/django-jquery-month-picker-the-to-date-not-always-updated-as-later-than-from. Gracias por adelantado. –

0

Hay un example en trentrichardson.com. Están usando "onSelect". Para mí no está funcionando perfecto. Al establecer minDate o MaxDate, el componente de hora se establece en 0 y solo queda la fecha. Y tuve que resolver algunos problemas de localización.

2

Luca: Una pequeña adición a su respuesta ...

Uso de la función que sugirió el componente de tiempo se ignora la primera vez que se muestra el datetimepicker. Si cierra el selector de fecha y hora y lo vuelve a abrir, el componente de tiempo vuelve a aparecer misteriosamente. No estoy muy seguro de lo que está causando esto, pero se puede solucionar con un poco de un truco:

function setMinMaxDate (element) 
{ 
    // Store current date - setting max/min date seems to destroy time component 
    var val = $(element).val(); 

    if (element.id == 'endDate') 
    {  
     var x=$('#startDate').datetimepicker("getDate"); 
     $(element).datetimepicker("option", "minDate",x); 
    } 
    else if (element.id == 'startDate') 
    {  
     var x=$('#endDate').datetimepicker("getDate"); 
     $(element).datetimepicker("option", "maxDate",x); 
    } 

    // Restore date 
    $(element).val(val); 
} 
13

Si tiene dos cuadros de texto con IDs correspondientes from y to y desea que el minDate de to estar la fecha seleccionada de from continuación, haga lo siguiente:

$("#from").datepicker({ 
    minDate: 0, // to disable past dates (skip if not needed) 
    onClose: function(selectedDate) { 
     // Set the minDate of 'to' as the selectedDate of 'from' 
     $("#to").datepicker("option", "minDate", selectedDate); 
    } 
}); 

$("#to").datepicker(); 
+0

¿Eso funciona con dateTIMEPicker también? – JosephK

0

Ninguna de las respuestas anteriores me ayudó en absoluto. O no funcionó o produjo algún tipo de error.

Así que fusioné todas y formé la mía. Usé moment.js como se menciona arriba, solo descárgalo e inclúyelo en tu página.

$("#start_date").datetimepicker({ 
    format: 'Y-m-d H:00:00', 
    onChangeDateTime: function(dp, $input){ 
     var dt2 = $('#end_date'); 
     var minDate = $('#start_date').val(); 
     var currentDate = new Date(); 
     var targetDate = moment(minDate).toDate(); 
     var dateDifference = currentDate - targetDate; 
     var minLimitDate = moment(dateDifference).format('YYYY/MM/DD'); 
     var endDate = moment(dt2.val()).toDate(); 
     if((currentDate - endDate) >= (currentDate - targetDate)) 
      dt2.datetimepicker({ 
       'value': minDate 
      }); 
     dt2.datetimepicker({ 
      'minDate': '-'+minLimitDate 
     }); 
    } 
}); 
$("#end_date").datetimepicker({ 
    format: 'Y-m-d H:00:00' 
}); 

Estoy seguro de que hay una forma mejor de hacerlo pero no pude encontrarlo. Así que espero que esto ayude a alguien en el futuro.

Cuestiones relacionadas