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

我的网页：

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