如何在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.&nbsp;它接受 Date 对象、可解析的日期字符串或整数。我建议使用后者。用于-1昨天和0今天。$(document).ready(function() {&nbsp; $('#start_date .input-group.date').datepicker({&nbsp; &nbsp; startView: 1,&nbsp; &nbsp; todayBtn: "linked",&nbsp; &nbsp; keyboardNavigation: false,&nbsp; &nbsp; forceParse: false,&nbsp; &nbsp; autoclose: true,&nbsp; &nbsp; format: 'yyyy-mm-dd',&nbsp; &nbsp; defaultDate: -1&nbsp; });&nbsp;&nbsp;&nbsp; $('#end_date .input-group.date').datepicker({&nbsp; &nbsp; startView: 1,&nbsp; &nbsp; todayBtn: "linked",&nbsp; &nbsp; keyboardNavigation: false,&nbsp; &nbsp; forceParse: false,&nbsp; &nbsp; autoclose: true,&nbsp; &nbsp; format: 'yyyy-mm-dd',&nbsp; &nbsp; defaultDate: 0&nbsp; });});<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">&nbsp; <div class="form-group" id="start_date">&nbsp; &nbsp; <label for="">Start Date<span style="color: red;">&nbsp;</span></label>&nbsp; &nbsp; <div class="input-group date">&nbsp; &nbsp; &nbsp; <span class="input-group-addon"><i class="fa fa-calendar"></i></span>&nbsp; &nbsp; &nbsp; <input type="text" class="form-control" required name="start_date">&nbsp; &nbsp; </div>&nbsp; </div></div><div class="col-md-2">&nbsp; <div class="form-group" id="end_date">&nbsp; &nbsp; <label for="">End Date<span style="color: red;">&nbsp;</span></label>&nbsp; &nbsp; <div class="input-group date">&nbsp; &nbsp; &nbsp; <span class="input-group-addon"><i class="fa fa-calendar"></i></span>&nbsp; &nbsp; &nbsp; <input type="text" class="form-control" required name="end_date">&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

您可以使用 minDateminDate: -1 昨天minDate: 0 今天$(document).ready(function() {&nbsp; $('#start_date .input-group.date').datepicker({&nbsp; &nbsp; startView: 1,&nbsp; &nbsp; todayBtn: "linked",&nbsp; &nbsp; keyboardNavigation: false,&nbsp; &nbsp; forceParse: false,&nbsp; &nbsp; autoclose: true,&nbsp; &nbsp; format: 'yyyy-mm-dd',&nbsp; &nbsp; minDate: -1&nbsp; });&nbsp; $('#end_date .input-group.date').datepicker({&nbsp; &nbsp; startView: 1,&nbsp; &nbsp; todayBtn: "linked",&nbsp; &nbsp; keyboardNavigation: false,&nbsp; &nbsp; forceParse: false,&nbsp; &nbsp; autoclose: true,&nbsp; &nbsp; format: 'yyyy-mm-dd',&nbsp; &nbsp; minDate:0&nbsp; });&nbsp; $('#published_date .input-group.date').datepicker({&nbsp; &nbsp; startView: 1,&nbsp; &nbsp; todayBtn: "linked",&nbsp; &nbsp; keyboardNavigation: false,&nbsp; &nbsp; forceParse: false,&nbsp; &nbsp; autoclose: true,&nbsp; &nbsp; format: 'yyyy-mm-dd'&nbsp; });});<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">&nbsp; <div class="form-group" id="start_date">&nbsp; &nbsp; <label for="">Start Date<span style="color: red;">&nbsp;</span></label>&nbsp; &nbsp; <div class="input-group date">&nbsp; &nbsp; &nbsp; <span class="input-group-addon"><i class="fa fa-calendar"></i></span>&nbsp; &nbsp; &nbsp; <input type="text" class="form-control" required name="start_date">&nbsp; &nbsp; </div>&nbsp; </div></div><div class="col-md-2">&nbsp; <div class="form-group" id="end_date">&nbsp; &nbsp; <label for="">End Date<span style="color: red;">&nbsp;</span></label>&nbsp; &nbsp; <div class="input-group date">&nbsp; &nbsp; &nbsp; <span class="input-group-addon"><i class="fa fa-calendar"></i></span>&nbsp; &nbsp; &nbsp; <input type="text" class="form-control" required name="end_date">&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 3

这是您也可以通过减去天数和月份或年份来分配的代码示例。请检查。&nbsp;var d = new Date();&nbsp; &nbsp; &nbsp;&nbsp;var currMonth = d.getMonth();&nbsp;var currYear = d.getFullYear();&nbsp; &nbsp;&nbsp;&nbsp;var currDate = d.getDate();&nbsp;var startDate = new Date(currYear, currMonth, d.getDate());&nbsp;var endDate = new Date(currYear, currMonth, currDate - 1);&nbsp;$('#start_date').datepicker('setDate', startDate);&nbsp;$('#end_date').datepicker('setDate', endDate);