在单独的元素中显示 jquery ui 日期值

Question

我需要在不同的 'divs'、'spans' 或 'p' 元素中显示选定的日期值，就像我在下面 link 中的示例：

<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").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 - month name short

d - day of month (no leading zero)

yy - year (four digit)

查看更多：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 日期值

Display jquery ui date value in separate elements

jquery-ui

jquery-ui-datepicker