JQuery UI DatePicker От и До

Question

я somethinng, как показано ниже, и хотел убедиться, что от дата не должна путепровод на дату, которая не выбирается (даже после изменения даты), и наоборот.

От:<input type="text" id="xx_from" value="<?php echo $date_from; ?>" />

To:<input type="text" id="xx_to" value="<?php echo $date_to; ?>" />

$j("#xx_from").datepicker({ 
     dateFormat: 'yy-mm-dd', 
     maxDate: $j("#xx_to").val(), 
     onSelect: function(){ 
     $j("#xx_to").datepicker("refresh"); 
     } 
    }); 

    $j("#xx_to").datepicker({ 
     dateFormat: 'yy-mm-dd', 
     minDate: $j("#xx_from").val(), 
     onSelect: function(){ 
     $j("#xx_from").datepicker("refresh"); 
     } 
    }); 

Answer 1

если вы видите documentation. Вы можете решить свой вопрос. Вам просто нужно установить minDate и maxDate в datepciker. Вот код

$(function() { 
    $("#from").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 3, 
     onClose: function(selectedDate) { 
     $("#to").datepicker("option", "minDate", selectedDate); 
     } 
    }); 
    $("#to").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 3, 
     onClose: function(selectedDate) { 
     $("#from").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 
    }); 

Js Fiddle Demo

Answer 2

Вы должны установить мин и макс дату в конфиги из DatePicker при обновлении его в выбранном слушателем.

Answer 3

Попробуйте ниже, вам нужно вызвать функцию, чтобы установить минимальную дату и максимальную дату, когда вы выбираете дату начала и окончания.

DEMO HERE

// To set mindate in enddate 
function customRange(input) 
{ 
return { 
     minDate: (input.id == "end_date" ? $("#start_date").datepicker("getDate") : new Date()) 
     }; 
} 

// To set maxdate in startdate 
function customRangeStart(input) 
{ 
return { 
     maxDate:(input.id == "start_date" ? $("#end_date").datepicker("getDate") : null) 
     }; 
} 

$(document).ready(function() { 

    $('#start_date').datepicker(
    { 
     beforeShow: customRangeStart, 
     maxDate: null, 
     dateFormat: "yy-mm-dd", 
     changeYear: true 
    }); 

    $('#end_date').datepicker(
    { 
     beforeShow: customRange, 
     dateFormat: "yy-mm-dd", 
     changeYear: true 
    }); 
});