Question

我正在尝试创建一个日期范围，在选择start_date之后，end_date只允许用户在start_date之后选择日期，反之亦然。这是一段代码：

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;"/>
...

我尝试了几个主题的解决方案，但它们都没有为我工作。我认为最重要的事情是在日期更改时设置最大和最小日期。

Answer 1

您的代码中存在一些错误：

datepicker没有选项onSelect，而是您必须收听changeDate事件
datepicker既没有minDate也没有maxDate选项/方法，您必须使用setStartDate和setEndDate

这是一个工作示例：

＆＃13;

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

＆＃13;

<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;"/>

＆＃13;

Answer 2

我认为您需要的代码是：

<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。

Answer 3

看起来你可能只是在文档就绪函数中错过了一个右括号

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

＆＃13;

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

＆＃13;

<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;"/>

＆＃13;

如果您还不了解jQuery UI Datepicker here，还可以阅读有关https://jsfiddle.net/zgs73ret/的更多信息。

Datepicker范围不起作用

3 个答案: