Datepicker範圍不起作用

我想創建一個日期範圍，在選擇start_date之後，end_date將只允許用戶在start_date之後選擇日期，反之亦然。這裏是一個代碼片段：Datepicker範圍不起作用

main.js 
function set_parameters() { 
    var date_start_input=$('#start_date'); 
    var date_end_input=$('#end_date'); 
    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; 
    var options_start={ 
     format: 'MM dd, yyyy', 
     container: container, 
     todayHighlight: true, 
     autoclose: true, 
     orientation: 'top left', 
     onSelect: function(selectedDate) { 
     date_end_input.datepicker("option", "maxDate", selectedDate); 
     } 
    }; 
    var options_end={ 
     format: 'MM dd, yyyy', 
     container: container, 
     todayHighlight: true, 
     autoclose: true, 
     orientation: 'top left', 
     onSelect: function(selectedDate) { 
     date_start_input.datepicker("option", "minDate", selectedDate); 
     } 
    }; 
    date_start_input.datepicker(options_start); 
    date_end_input.datepicker(options_end); 
}; 

$(document).ready(function() { 
    set_parameters(); 
}); 

index.html 
<head> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> 
</head> 
... 
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/> 
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/> 
...

我嘗試了幾個主題的解決方案，但沒有一個爲我工作。我相信最重要的事情是在日期中進行更改時設置最大和最小日期。

來源

2016-10-26 Godric

您是否嘗試過交換，你正在使用「的maxDate」和「的minDate」？ – HarlemSquirrel

它不起作用。其實，一切都適用於提取日期但最小/最大。 – Godric

。在你的代碼中的幾個誤區：

的日期選擇器別無選擇onSelect，相反，你必須聽changeDate事件
的日期選擇器既沒有minDate也不maxDate選項/方法，你必須使用setStartDate和setEndDate

這裏工作的例子：

function set_parameters() { 
 
    var date_start_input = $('#start_date'); 
 
    var date_end_input = $('#end_date'); 
 
    var container = $('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; 
 
    
 
    var options = { 
 
    format: 'MM dd, yyyy', 
 
    container: container, 
 
    todayHighlight: true, 
 
    autoclose: true, 
 
    orientation: 'top left' 
 
    }; 
 

 
    date_start_input.datepicker(options).on('changeDate', function(e){ 
 
    date_end_input.datepicker("setStartDate", e.date); 
 
    }); 
 
    date_end_input.datepicker(options).on('changeDate', function(e){ 
 
    date_start_input.datepicker("setEndDate", e.date); 
 
    }); 
 
}; 
 

 
$(document).ready(function() { 
 
    set_parameters(); 
 
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> 
 

 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> 
 

 
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/> 
 
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>

來源

2016-10-26 18:43:32 VincenzoC

它的工作原理！謝謝！ – Godric

我認爲你需要的代碼是這樣的：

<div class="container"> 
<div class='col-md-5'> 
    <div class="form-group"> 
     <div class='input-group date' id='datetimepicker6'> 
      <input type='text' class="form-control" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</div> 
<div class='col-md-5'> 
    <div class="form-group"> 
     <div class='input-group date' id='datetimepicker7'> 
      <input type='text' class="form-control" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</div> 
</div> 
<script type="text/javascript"> 
$(function() { 
    $('#datetimepicker6').datetimepicker(); 
    $('#datetimepicker7').datetimepicker({ 
     useCurrent: false //Important! See issue #1075 
    }); 
    $("#datetimepicker6").on("dp.change", function (e) { 
     $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
    }); 
    $("#datetimepicker7").on("dp.change", function (e) { 
     $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
    }); 
}); 
</script>

這不是我的代碼。我在這裏找到它：https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers。

來源

2016-10-26 16:48:48 Thanasis

不幸的是，它不起作用。 – Godric

看起來也許你只是在你的文檔中缺少一個右括號準備功能

$(document).ready(function() { 
    set_parameters(); 
}

function set_parameters() { 
 
    var date_start_input=$('#start_date'); 
 
    var date_end_input=$('#end_date'); 
 
    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; 
 
    var options_start={ 
 
     format: 'MM dd, yyyy', 
 
     container: container, 
 
     todayHighlight: true, 
 
     autoclose: true, 
 
     orientation: 'top left', 
 
     onSelect: function(selectedDate) { 
 
     date_end_input.datepicker("option", "maxDate", selectedDate); 
 
     } 
 
    }; 
 
    var options_end={ 
 
     format: 'MM dd, yyyy', 
 
     container: container, 
 
     todayHighlight: true, 
 
     autoclose: true, 
 
     orientation: 'top left', 
 
     onSelect: function(selectedDate) { 
 
     date_start_input.datepicker("option", "minDate", selectedDate); 
 
     } 
 
    }; 
 
    date_start_input.datepicker(options_start); 
 
    date_end_input.datepicker(options_end); 
 
}; 
 

 
$(document).ready(function() { 
 
    set_parameters(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 

 
<head> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> 
 
</head> 
 
... 
 
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/> 
 
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>

您也可以閱讀更多關於jQuery UI Datepicker here，如果你還不知道關於它。

來源

2016-10-26 16:53:04 HarlemSquirrel

對不起，我剛剛注意到一個錯誤。我沒有複製括號。 – Godric

Datepicker範圍不起作用

回答

相關問題