从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 函数只接受一个整数和 return 对应的 month/day.

从事物的声音来看，您对 Javascript 比较陌生。我强烈建议您完全了解如何使用 Javascript 和 jQuery。请参阅以下资源以获取更多信息：
* JS Date and utilities
* jQuery .text()
* Bootstrap-datepicker changeDate documentation

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

Get date from bootstrap-datepicker and print separately

javascript

jquery

bootstrap-datepicker