Question

我需要在不同的“ div”，“ spans”或“ p”元素中显示选定的日期值，例如下面的链接中的示例：

<button id="buttonHere">datepicker</button>

<div id="datepicker"></div>

<div id="resultdate">00/00/00</div>

<div id="resultdate_expectation">
  <span>Aug</span>
  <span>31</span>
  <span>2018</span>

</div>

https://jsfiddle.net/alonsoct/qphza/464/

如何分别显示日期值？

谢谢

Answer 1

您可以从onSelect函数中的datepicker的date属性中获取日期的各个部分：

$("#datepicker").hide();
$("#buttonHere").click(function() {
  $("#datepicker").toggle();
});
$("#datepicker").datepicker({
  onSelect: function(value, date) {
    const months = ["January", "February", "March", "April", "May", "June",
      "July", "August", "September", "October", "November", "December"
    ];
    $('#resultdate_expectation span:eq(0)').html(months[date.selectedMonth]);
    $('#resultdate_expectation span:eq(1)').html(date.selectedDay);
    $('#resultdate_expectation span:eq(2)').html(date.selectedYear);
    $("#datepicker").hide();
  }
});

jsFiddle example

Answer 2

您需要做的就是正确设置dateFormat选项：

dateFormat: "M d yy",

M-月份名称缩写

d-每月的某天（前导零）

yy-年（四位数）

查看更多：http://api.jqueryui.com/datepicker/#utility-formatDate

根据您的示例，您未指定是否要领先于零。我以为没有。

https://jsfiddle.net/Twisty/qphza/481/

$(function() {
  // Set up datepicker toggle functionality

  $("#datepicker").hide();

  $("#buttonHere").click(function() {
    $("#datepicker").toggle();
  });

  $("#datepicker").datepicker({
    dateFormat: "M d yy",
    onSelect: function(value, date) {
      $('#resultdate').html(value);
      $("#datepicker").hide();
    }
  });
});

按要求工作。希望有帮助。

在单独的元素中显示jQuery UI日期值

2 个答案: