2016-07-28 158 views
0

我正在使用3日期選擇器更改每個日期選擇器我需要更改所有日期選擇器。對於例如如果我在8月10日選擇第一個日期選擇器,則應該在所有日期選擇器中將其更改爲8月1日。如果我在第二日期選擇器中更改8月10日,則應該在8月10日之前更改所有日期選擇器。在啓動日期選擇器上的所有日期選擇器的更改更改日期

這裏是我的代碼:

<input name="start" class="date_picker form-control" id='from_one' type="text" /> 
<input class="date_picker form-control" id='from_two' name="start" type="text" /> 
<input class="date_picker form-control" name="end" type="text" id='from_three'/> 

$('.date_picker').datepicker({ 
    setDate: new Date(), 
    format: 'dd/mm/yyyy', 
    todayHighlight: true, 
    autoclose: true, 
    startDate: '-0m', 
    minDate: 0, 
    onSelect: function(text, dt) {  
    var secondDate = new Date($(".date_picker").datepicker("getDate")); 
    var date2 = new Date(secondDate.getTime()); 
    date2.setDate(date2.getDate()); 
    $("#from_one").datepicker("setDate", date2); 
    $("#from_two").datepicker("setDate", date2); 
    $("#from_three").datepicker("setDate", date2); 
    } 
}); 

它的工作,但在第2日期選擇器的變化需要1日期選取

這裏的價值是我的演示fiddle

+1

無法理解的,如果第一個日期選擇器選擇日期8月1日thene第2日期選擇器日期會是什麼? 在前例中解釋。 –

+0

使用此選擇函數進行更改:onSelect:function(text){(「#from_one」)。datepicker(「setDate」,text); $(「#from_two」)。datepicker(「setDate」,text); $(「#from_three」)。datepicker(「setDate」,text); } – Qsprec

回答

0

從我的理解你想完成,這應該適合你。

$('.date_picker').datepicker({ 
 
    setDate: new Date(), 
 
    format: 'dd/mm/yyyy', 
 
    todayHighlight: true, 
 
    autoclose: true, 
 
    startDate: '-0m', 
 
    minDate: 0, 
 
    onSelect: function(text, dt) { 
 
    var selectedPicker = this; 
 
    var datepickers = $(".date_picker"); 
 
    var secondDate = $(this).datepicker("getDate"); 
 
    var date2 = new Date(secondDate.getTime()); 
 
    date2.setDate(date2.getDate() + 1); 
 

 
    $.each(datepickers, function(index, value) { 
 
     if (value !== selectedPicker) { 
 
     $(value).datepicker("setDate", date2); 
 
     } 
 
    }) 
 
    } 
 
});
<link href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
 

 
<input name="start" class="date_picker form-control" id='from_one' data-date-format="dd/mm/yyyy" type="text" /> 
 
<input class="date_picker form-control" id='from_two' name="start" type="text" data-date-format="dd/mm/yyyy" /> 
 
<input class="date_picker form-control" name="end" type="text" id='from_three' />

+0

這就是我期待的感謝 –

相關問題