為什么我的最小和最大日期設置在我的日期選擇器中不起作用？

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

我調試並發現當我 select 月份時，定義了最小和最大日期。 例如：如果我選擇， Feb 2018意味着，

min date comes as :01/02/2018

max date comes as : 28/02/2018,

但更改不會在我的日期選擇日期選擇器中復制

調試圖像圖片

顯示最小日期的調試圖像圖片

這是我的小提琴

如何解決這個問題？

Answer 1

您沒有使用正確的選項：

  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,
        startDate: minDate,
        endDate: maxDate,
        format: 'dd/mm/yyyy',
        //defaultDate:minDate,
        changeMonth: false,
        changeYear: false,
      });
    }

用startDate改變minDate和用endDate改變maxDate

請參閱bootstrap-datepicker 文檔

Answer 2

您當前正在嘗試重新創建現有的日期選擇器。 相反，使用setStartDate和setEndDate方法修改當前實例。

$("#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 使用startDate和endDate作為選項，而不是minDate和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>

Answer 3

請嘗試此代碼

HTML 代碼：

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

JS代碼：

<script type="text/javascript">
   $("#txtMonth").datepicker({
   autoclose: true,
   startView: "months", 
   minViewMode: "months",
   format: 'M-yyyy',
   //defaultDate:minDate,
   changeMonth: false,
   changeYear: false,
});

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);
   minDate = minDate.toLocaleDateString('en-GB');
   var maxDate = new Date(year,month, 0);
   maxDate = maxDate.toLocaleDateString('en-GB');
   $("#txtFrom").datepicker('destroy').datepicker({
      autoclose: true,
      startDate: minDate,
      endDate: maxDate,
      format: 'dd/mm/yyyy',
      //defaultDate:minDate,
      changeMonth: false,
      changeYear: false,
   });
  $('#txtFrom').datepicker('setDate',minDate);
}
</script>

Output的代碼：