ejemplos - jquery datetime picker set minDate dynamic

jquery datetimepicker example

Question

Chicos, estoy usando un datetimepicker de trentrichardson.com.

Tengo un formulario con dos campos de entrada: desde y hasta y quiero poder establecer dinámicamente una fecha mínima en mi campo "a" igual al valor de mi campo "desde"

Sé que debo usar una opción 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 ); 
} } 

Answer 1

Esto funciono para mi

<input type="date" name="cname" value=""  min="<?php echo date("Y-m-d") ?>"/>

Answer 2

Hay un example en trentrichardson.com. Están utilizando "onSelect". Para mi no está funcionando perfert. Cuando se configura minDate o MaxDate, el componente de tiempo se establece en 0 y solo queda la fecha. Y tuve que resolver algunos problemas de localización.

Answer 3

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

Usando la función que sugirió, el componente de tiempo se ignora la primera vez que se muestra el selector de datos. Si cierra el selector de datos y vuelve a abrirlo, el componente de tiempo reaparece misteriosamente. No estoy muy seguro de lo que está causando esto, pero se puede arreglar con un poco de pirateo:

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);
}

Answer 4

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

Así que los fusioné a todos e hice mi propio. Usé moment.js como se mencionó anteriormente, solo descárguelo e inclúyalo en su 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 mejor manera de hacerlo, pero no pude encontrarlo. Así que espero que esto ayude a alguien en el futuro.

Answer 5

Puede restringir el rango del selector de fecha .

Pero desea establecer este rango en la creación del selector de fecha en el "desde". Te hice una demostración que parece funcionar bien, en la medida en que entiendo la pregunta.

Answer 6

Si tiene dos cuadros de texto con las ID correspondientes from y to y desea que la fecha minDate de a sea la fecha seleccionada from entonces, 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();

Answer 7

puede establecer y obtener minDate dinámicamente con el configurador y el captador:

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

explicado aquí