Jquery datepicker减去天数答案

【问题标题】：Jquery datepicker subtract daysJquery datepicker减去天数
【发布时间】：2021-01-10 07:33:16
【问题描述】：

我正在使用 jquery datepicker link，因为我需要从当前日期减去 7 天。我尝试了一些代码，但它不起作用，即天数没有减去仍然显示当前日期本身。这是我尝试过的代码。任何帮助都是可观的。

// datepicker
var $startDate = $('.start-date');
var $endDate = $('.end-date');

$startDate.datepicker({autoHide: true,format: 'yyyy-mm-dd'});    
$startDate.datepicker("setDate", moment().subtract(7,'d').format('yyyy-mm-dd'));

$endDate.datepicker({
    autoHide: true,
    startDate: $startDate.datepicker('getDate'),
    format: 'yyyy-mm-dd'
});
$endDate.datepicker('setDate', moment().format('yyyy-mm-dd'));
$startDate.on('change', function () {
    $endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
});
// datepicker

【问题讨论】：

请提供此日期选择器的最小工作示例。
@AlwaysHelping 我已经用演示小提琴更新了这个问题。

标签： javascript jquery datepicker

【解决方案1】：

根据 setDate 这个 datePicker 文档 - 您没有正确使用 momentJS 格式日期函数。您需要将convert 的日期从YYYY-MM-DD 转换为日期对象，例如：Wed Sep 17 2020 00:00:00 GMT+1000 (Australian Eastern Standard Time)

为此，您可以使用 momentJS 的 toDate() 功能 - 您的 code 现在正在按预期工作。

$startDate.datepicker("setDate", moment().subtract(7, 'd').toDate());

或者您也可以使用native Javascript new Date 方法，如下所示：

$startDate.datepicker("setDate", new Date(moment().subtract(7, 'd')));

您也可以只使用下面这样的原生 JavaScript 日期函数而不是使用矩库

var sub7Days = new Date();
sub7Days.setDate(sub7Days.getDate() - 7);
$startDate.datepicker("setDate", sub7Days);

现场工作演示：

$(function() {
  // datepicker
  var $startDate = $('.start-date');
  var $endDate = $('.end-date');

  $startDate.datepicker({
    autoHide: true,
    format: 'yyyy-mm-dd'
  });
  $startDate.datepicker("setDate", moment().subtract(7, 'd').toDate());

  $endDate.datepicker({
    autoHide: true,
    startDate: $startDate.datepicker('getDate'),
    format: 'yyyy-mm-dd'
  });
  $endDate.datepicker('setDate', moment().toDate());

  $startDate.on('change', function() {
    $endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
  });
});

<link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>

<div class="col-md-3">
  <input type="text" class="form-control start-date" id="datefrom" placeholder="Date From">
</div>
<div class="col-md-3">
  <input type="text" class="form-control end-date" id="dateto" placeholder="Date To">
</div>

【讨论】：

@soorajspillai 欢迎您 - 很高兴帮助 Sooraj。我还添加了另一种方法，您也可以简单地使用 javascript 而不是使用矩库。编码愉快。

【解决方案2】：

$(function() {
          // datepicker
    var $startDate = $('.start-date');
    var $endDate = $('.end-date');

    $startDate.datepicker({autoHide: true,format: 'yyyy-mm-dd'});  
    console.log(moment().subtract(7,'days').format('yyyy-mm-D'));
    $startDate.datepicker("setDate", moment().subtract(7,'d').format('yyyy-mm-D'));
    
    $endDate.datepicker({
        autoHide: true,
        startDate: $startDate.datepicker('getDate'),
        format: 'yyyy-mm-dd'
    });
    $endDate.datepicker('setDate', moment().format('yyyy-mm-D'));
    $startDate.on('change', function () {
        $endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
    });
    // datepicker
    });

<link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
<div class="col-md-3">
                                <input type="text" class="form-control start-date" id="datefrom" placeholder="Date From">
                        </div>
                        <div class="col-md-3">
                                <input type="text" class="form-control end-date" id="dateto" placeholder="Date To">
                        </div>

将moment().subtract(7,'d').format('yyyy-mm-dd') 更改为moment().subtract(7,'d').format('yyyy-mm-D')

【讨论】：