javascript - 从 bootstrap-datepicker 获取日期并单独打印

Question

我正在使用 Bootstrap 日期选择器。我想获取日期值(20-Sep-19)并将其打印在三个不同的 div 中(这样我就可以对它们进行不同的样式设置)。

<div class="input-group date">
  <input type="hidden" id="date-input" value="20-Sep-19" class="form-control">
  <div id="div1">20 </div>
  <div id="div2">Sep'19</div>
  <div id="div3">Wednesday</div>
</div>

$(function(){
  $('.input-group.date').datepicker({
  format: 'dd-M-yy',
  todayHighlight: true,
  autoclose: true});
});

我尝试了一些 jquery 但不起作用。

$(document).on("change", "#date-input", function () {
  var date = new Date($('#date-input').val());
  day = date.getDate();
  month = date.getMonth() + 1;
  year = date.getFullYear();
  alert([day, month, year].join('/'));

});

任何人都知道如何实现这一点。提前致谢。

Answer 1

查看this fiddle以便快速实现。

您的 Javascript 将需要解析从 datepicker 元素的 dateChange 事件发回的数据

picker.on("changeDate", function(e) {
        div1.text(e.date.getDate());

        var month = getMonthName(e.date.getMonth());
        var year = ("" + e.date.getYear()).substr(1, 3);
                div2.text(month + " '" + year);

        div3.text(getDayOfWeek(e.date.getDay()));
    });

getMonthName 和 getDayOfWeek 函数仅接受一个整数并返回相应的月/日。

从表面上看，您对 Javascript 还比较陌生。我强烈建议您充分了解如何使用 Javascript 和 jQuery。请参阅以下资源以了解更多信息:
* JS Date and utilities
* jQuery .text()
* Bootstrap-datepicker changeDate documentation