如何在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);