javascript - 为什么我的最小和最大日期设置在我的日期选择器中不起作用？

Question

我之前问过一个问题来设置一个日期选择器的日期，以考虑另一个日期选择器的月/年变化。我没有得到确切的答案，但不知何故，我设法通过引用各种堆栈溢出答案来将最小和最大日期设置为日期选择器。但是最小和最大日期设置无法正常工作。

月份和年份选择日期选择器：

 <label> Month</label>
 <div class="input-group date">
    <input type="text" class="form-control pull-right" id="txtMonth" onchange="MonthDatePick();">
    <div class="input-group-addon">
        <i class="fa fa-calendar"></i>
    </div>
</div>

我选择的月份日期选择日期选择器：

<div class="col-lg-3">
    <label> From</label>
    <div class="input-group date">
        <input type="text" class="form-control pull-right" id="txtFrom">
        <div class="input-group-addon">
            <i class="fa fa-calendar"></i>
        </div>
    </div>
</div>

脚本：

function MonthDatePick() {
  var month = $('#txtMonth').datepicker('getDate').getMonth() + 1;//('getMonth');            
var year = $('#txtMonth').datepicker('getDate').getFullYear();//('getFullYear');   
var minDate = new Date(year, month-1, 1);
 var maxDate = new Date(year,month, 0);
$("#txtFrom").datepicker({
    autoclose: true,
    minDate: minDate,
    maxDate: maxDate,
    format: 'dd/mm/yyyy',
    //defaultDate:minDate,
    changeMonth: false,
    changeYear: false,
});
}

我调试并发现当我选择月份时，定义了最小和最大日期。例如：如果我选择，Feb 2018意味着，

min date comes as :01/02/2018

max date comes as : 28/02/2018,

但更改不会在我的日期选择日期选择器中复制

调试图像图片

显示最小日期的调试图像图片

这是 我的小提琴

如何解决这个问题？

标签： javascriptdatedatepickerbootstrap-datepicker

Answer 1

您当前正在尝试重新创建现有的日期选择器。setStartDate相反，使用andsetEndDate方法修改当前实例。

$("#txtClaimFrom").datepicker("setStartDate", minDate);
$("#txtClaimFrom").datepicker("setEndDate", maxDate);

$(document).ready(function() {
  $('#txtClaimMonth').datepicker({
    autoclose: true,
    format: "MM yyyy",
    viewMode: "months",
    minViewMode: "months",
  });
  $('#txtClaimFrom').datepicker({
    autoclose: true,
    format: 'dd/mm/yyyy'
  })
});

function MonthDatePick() {
  var month = $('#txtClaimMonth').datepicker('getDate').getMonth() + 1; //('getMonth');            
  var year = $('#txtClaimMonth').datepicker('getDate').getFullYear(); //('getFullYear');   
  var minDate = new Date(year, month - 1, 1);
  var maxDate = new Date(year, month, 0);
  $("#txtClaimFrom").datepicker("setStartDate", minDate);
  $("#txtClaimFrom").datepicker("setEndDate", maxDate);
}

.col-lg-3 { margin-bottom: 180px; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<div class="col-lg-3">
  <label>Claim Month</label>
  <div class="input-group date">
    <input type="text" class="form-control pull-right" id="txtClaimMonth" onchange="MonthDatePick();">
    <div class="input-group-addon bg-purple">
      <i class="fa fa-calendar"></i>
    </div>
  </div>
</div>
<div class="col-lg-3">
  <label>Claim From</label>
  <div class="input-group date">
    <input type="text" class="form-control pull-right" id="txtClaimFrom">
    <div class="input-group-addon bg-purple">
      <i class="fa fa-calendar"></i>
    </div>
  </div>
</div>

---

或者，您可以remove使用当前的日期选择器并从头开始重新初始化它。请注意，Bootstrap Datepicker 使用startDateandendDate作为选项，而不是minDateand maxDate。

$("#txtClaimFrom").datepicker("remove");
$("#txtClaimFrom").datepicker({
  autoclose: true,
  startDate: minDate,
  endDate: maxDate,
  format: 'dd/mm/yyyy',
  changeMonth: false,
  changeYear: false,
});

$(document).ready(function() {
  $('#txtClaimMonth').datepicker({
    autoclose: true,
    format: "MM yyyy",
    viewMode: "months",
    minViewMode: "months",
  });
  $('#txtClaimFrom').datepicker({
    autoclose: true,
    format: 'dd/mm/yyyy'
  })
});

function MonthDatePick() {
  var month = $('#txtClaimMonth').datepicker('getDate').getMonth() + 1; //('getMonth');            
  var year = $('#txtClaimMonth').datepicker('getDate').getFullYear(); //('getFullYear');   
  var minDate = new Date(year, month - 1, 1);
  var maxDate = new Date(year, month, 0);
  $("#txtClaimFrom").datepicker("remove");
  $("#txtClaimFrom").datepicker({
    autoclose: true,
    startDate: minDate,
    endDate: maxDate,
    format: 'dd/mm/yyyy',
    changeMonth: false,
    changeYear: false,
  });
}

.col-lg-3 {
  margin-bottom: 180px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<div class="col-lg-3">
  <label>Claim Month</label>
  <div class="input-group date">
    <input type="text" class="form-control pull-right" id="txtClaimMonth" onchange="MonthDatePick();">
    <div class="input-group-addon bg-purple">
      <i class="fa fa-calendar"></i>
    </div>
  </div>
</div>
<div class="col-lg-3">
  <label>Claim From</label>
  <div class="input-group date">
    <input type="text" class="form-control pull-right" id="txtClaimFrom">
    <div class="input-group-addon bg-purple">
      <i class="fa fa-calendar"></i>
    </div>
  </div>
</div>