选择日历日期并更新链接标签答案

【问题标题】：Select Calendar Date and Update Link Label选择日历日期并更新链接标签
【发布时间】：2018-05-14 19:27:19
【问题描述】：

我的页面上有一个链接标签。当我单击标签时，会弹出一个日历。当我单击日历上的某个日期时，我希望我的链接标签以这种格式“2017 年 1 月 30 日”更新到该特定日期

问题是因为局部变量var dateText =...，我的标签永远不会更新但格式正确。

如果我评论或删除日期格式部分，我的标签会更新为正确的日期，但不包含我要查找的格式。

单击日历上的特定日期时，如何使用所需格式更新链接标签？

$(document).ready(function() {

  $("#dp").datepicker({
    onSelect: function(dateText, inst) {

      var dateText = new Date().toLocaleString('en-GB', {
        day: 'numeric',
        month: 'short',
        year: 'numeric'
      }).split(' ').join(' ');

      $("#datep").html(dateText);
    },
    beforeShow: function(event, ui) {
      var $link = $("#datep");
      ui.dpDiv.offset({
        top: $link.offset().top + 10,
        left: $link.offset().left + 10
      });
    }
  });

  $("#datep").click(function() {
    $("#dp").datepicker("show");
  });
});

<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/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<a href="#" id="datep">Date Picker Link Label</a>
<input type="hidden" id="dp" />
<div></div>

【问题讨论】：

标签： javascript jquery html date calendar

【解决方案1】：

您正在呼叫new Date().toLocaleString(...，它使用当前日期。您所缺少的只是将 dateText 参数传递给 Date 构造函数：

$(document).ready(function() {

  $("#dp").datepicker({
    onSelect: function(dateText, inst) {

      var dateText = new Date(dateText).toLocaleString('en-GB', {
        day: 'numeric',
        month: 'short',
        year: 'numeric'
      }).split(' ').join(' ');

      $("#datep").html(dateText);
    },
    beforeShow: function(event, ui) {
      var $link = $("#datep");
      ui.dpDiv.offset({
        top: $link.offset().top + 10,
        left: $link.offset().left + 10
      });
    }
  });

  $("#datep").click(function() {
    $("#dp").datepicker("show");
  });
});

<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/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<a href="#" id="datep">Date Picker Link Label</a>
<input type="hidden" id="dp" />
<div></div>

【讨论】：