如何在jQuery中將開始日期的默認值設置為昨天，將結束日期設置為今天

Question

我想將 start_date 和 end_date 字段的默認值分別顯示為昨天和今天。

這是我的代碼：

$(document).ready(function () {

  $('#start_date .input-group.date').datepicker({
      startView: 1,
      todayBtn: "linked",
      keyboardNavigation: false,
      forceParse: false,
      autoclose: true,
      format: 'yyyy-mm-dd'
      default:today
  });
  $('#end_date .input-group.date').datepicker({
      startView: 1,
      todayBtn: "linked",
      keyboardNavigation: false,
      forceParse: false,
      autoclose: true,
      format: 'yyyy-mm-dd'
  });

  $('#published_date .input-group.date').datepicker({
      startView: 1,
      todayBtn: "linked",
      keyboardNavigation: false,
      forceParse: false,
      autoclose: true,
      format: 'yyyy-mm-dd'
  });

});

我的 HTML：

<div class="col-md-2">
  <div class="form-group" id="start_date">
    <label for="">Start Date<span style="color: red;">&nbsp;</span></label>
    <div class="input-group date">
      <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
      <input  type="text" class="form-control" required name="start_date">
    </div>
  </div>
</div>
<div class="col-md-2">
  <div class="form-group" id="end_date">
    <label for="">End Date<span style="color: red;">&nbsp;</span></label>
    <div class="input-group date">
      <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
      <input  type="text" class="form-control" required name="end_date">
    </div>
  </div>
</div>

Answer 1

正確的屬性是defaultDate 。 它接受一個 Date 對象、一個可解析的日期字符串或一個整數。 我建議使用后者。 昨天使用-1 ，今天使用0 。

 $(document).ready(function() { $('#start_date .input-group.date').datepicker({ startView: 1, todayBtn: "linked", keyboardNavigation: false, forceParse: false, autoclose: true, format: 'yyyy-mm-dd', defaultDate: -1 }); $('#end_date .input-group.date').datepicker({ startView: 1, todayBtn: "linked", keyboardNavigation: false, forceParse: false, autoclose: true, format: 'yyyy-mm-dd', defaultDate: 0 }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> <div class="col-md-2"> <div class="form-group" id="start_date"> <label for="">Start Date<span style="color: red;">&nbsp;</span></label> <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input type="text" class="form-control" required name="start_date"> </div> </div> </div> <div class="col-md-2"> <div class="form-group" id="end_date"> <label for="">End Date<span style="color: red;">&nbsp;</span></label> <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input type="text" class="form-control" required name="end_date"> </div> </div> </div>

Answer 2

您可以使用minDate

minDate: -1為昨天

minDate: 0今天

 $(document).ready(function() { $('#start_date .input-group.date').datepicker({ startView: 1, todayBtn: "linked", keyboardNavigation: false, forceParse: false, autoclose: true, format: 'yyyy-mm-dd', minDate: -1 }); $('#end_date .input-group.date').datepicker({ startView: 1, todayBtn: "linked", keyboardNavigation: false, forceParse: false, autoclose: true, format: 'yyyy-mm-dd', minDate:0 }); $('#published_date .input-group.date').datepicker({ startView: 1, todayBtn: "linked", keyboardNavigation: false, forceParse: false, autoclose: true, format: 'yyyy-mm-dd' }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="col-md-2"> <div class="form-group" id="start_date"> <label for="">Start Date<span style="color: red;">&nbsp;</span></label> <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input type="text" class="form-control" required name="start_date"> </div> </div> </div> <div class="col-md-2"> <div class="form-group" id="end_date"> <label for="">End Date<span style="color: red;">&nbsp;</span></label> <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input type="text" class="form-control" required name="end_date"> </div> </div> </div>

Answer 3

這是您可以通過扣除天數和月份或年份來分配的代碼示例。 請檢查。

 var d = new Date();     
 var currMonth = d.getMonth();
 var currYear = d.getFullYear();    
 var currDate = d.getDate();

 var startDate = new Date(currYear, currMonth, d.getDate());

 var endDate = new Date(currYear, currMonth, currDate - 1);

 $('#start_date').datepicker('setDate', startDate);
 $('#end_date').datepicker('setDate', endDate);