Отображать значение даты jquery ui в отдельных элементах - PullRequest
Новая
       8

Отображать значение даты jquery ui в отдельных элементах

0 голосов
/ 05 октября 2018

Мне нужно показать выбранное значение даты в разных элементах 'divs', '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/

Как я могу показать значение даты отдельно?

Спасибо

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Все, что вам нужно, это правильно установить параметр dateFormat: 

dateFormat: "M d yy",

M - короткое название месяца

d - день месяца (без начального нуля)

гг - год (четыре цифры)

Подробнее: 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();
    }
  });
});

Работает в соответствии с просьбой.Надеюсь, это поможет.

0 голосов
/ 05 октября 2018

Части даты можно получить из атрибута даты DatePicker в функции 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, пример

...