使用 Datepicker 选择日期然后显示日期减去一天答案

【问题标题】：Using Datepicker to Select Date then Display Date Minus One Day使用 Datepicker 选择日期然后显示日期减去一天
【发布时间】：2020-03-16 01:55:13
【问题描述】：

我正在尝试使用 Datepicker 选择一个日期，然后显示该日期减去一天。

例如，在下面的代码中，我希望用户能够选择“2020 年 3 月 15 日星期日”，但我希望在单击按钮。

我很难找到/找出答案。任何帮助将不胜感激！

$(function() {
  $("#datepicker").datepicker({
    dateFormat: "DD, MM d, yy",
    minDate: 0,
  });
});

function showDate() {

  var dateOptions = {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric"
  };
  var selectedDate = $("#datepicker").datepicker("getDate");
  var currentLanguage = $("#language option:selected").val();
  var dateClass = document.getElementsByClassName("date");
  for (var i = 0; i < dateClass.length; i++) {
    dateClass[i].innerHTML = selectedDate.toLocaleDateString(currentLanguage, dateOptions);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table>
  <tr>
    <td>Please select the event date.</td>
    <td>&nbsp;&nbsp;<input type="text" id="datepicker" size="30" autocomplete="off"></td>
  </tr>
</table>

<button onclick="showDate()">Show Date/button</button>

<p>Please send the notice on <span class="date"></span>.</p>

【问题讨论】：

您是否希望在不添加其他库的情况下这样做？ MomentJS 可以通过date.subtract(1, "days"); 让这一切变得异常简单
很好的建议@ShaunE.Tobias！看起来 Scaramouche 在下面使用了它。

标签： javascript jquery datepicker

【解决方案1】：

通常我总是很欣赏普通的 JS 方法，但在日期/时间处理方面，我真的不能推荐 moment.js，就像 Shaun said 一样。

在这种情况下，subtract(1, 'd') 将完成这项工作，.format('LL') 将打印一个区域设置感知的用户友好输出。

$(function() {
  $("#datepicker").datepicker({
    dateFormat: "DD, MM d, yy",
    minDate: 0,
  });
});

function showDate() {

  var dateOptions = {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric"
  };
  var selectedDate = $("#datepicker").datepicker("getDate");
  var currentLanguage = $("#language option:selected").val();
  var dateClass = document.getElementsByClassName("date");
  for (var i = 0; i < dateClass.length; i++) {
    dateClass[i].innerHTML = moment(selectedDate).subtract(1, 'd').format('LL');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table>
  <tr>
    <td>Please select the event date.</td>
    <td>&nbsp;&nbsp;<input type="text" id="datepicker" size="30" autocomplete="off"></td>
  </tr>
</table>

<button onclick="showDate()">Show Date/button</button>

<p>Please send the notice on <span class="date"></span>.</p>

【讨论】：

像魅力一样工作！非常感谢 Scaramouche！

【解决方案2】：

添加这一行

  var dt = new Date(selectedDate);

dt.setDate( dt.getDate() - 1 );

and replace this:

dateClass[i].innerHTML = dt.toLocaleDateString(currentLanguage, dateOptions);

    function showDate() {

      var dateOptions = {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric"
      };
      var selectedDate = $("#datepicker").datepicker("getDate");
      var dt = new Date(selectedDate);
             dt.setDate( dt.getDate() - 1 );
      var currentLanguage = $("#language option:selected").val();
      var dateClass = document.getElementsByClassName("date");
      for (var i = 0; i < dateClass.length; i++) {
        dateClass[i].innerHTML = dt.toLocaleDateString(currentLanguage, dateOptions);
      }
    }

【讨论】：

很好的解决方案！