文章/答案/技术大牛

发布

社区首页 >问答首页 >选择日历日期和更新链接标签

问选择日历日期和更新链接标签
EN

Stack Overflow用户

提问于 2017-11-30 18:55:28

回答 1查看 108关注 0票数 1

我的页面上有链接标签。当我单击标签时，会弹出日历。当我单击日历上的日期时，我希望我的链接标签以这种格式更新到该特定日期：“2007年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

Stack Overflow用户

回答已采纳

发布于 2017-11-30 18:58:54

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

$(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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47580712

复制

相似问题

问选择日历日期和更新链接标签
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选择日历日期和更新链接标签EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选择日历日期和更新链接标签
EN