自定义“fengyuanchen/datepicker”输出

Question

我正在使用 fengyuanchen/datepicker
我正在尝试导出数据（月份名称、日期名称和日期） 看起来像这样：

我找到了这些选项，但是我无法正确填充它们。

$(document).ready(function() {
$('[data-toggle="datepicker"]').datepicker();
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://fengyuanchen.github.io/datepicker/css/datepicker.css" rel="stylesheet"/>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>

<div data-toggle="datepicker" class=" docs-date input-date-picker-from">
  <div class="month" id="putMonthName">January</div>
  <div class="date">5</div>
  <div class="day" id="putDayName">Tuesday</div>
</div>

我只是想在响应的 div 中填充日期

Answer 1

您应该能够通过覆盖 pick 回调来实现这一点。

$(document).ready(function() {
    $('[data-toggle="datepicker"]').datepicker({
        autoPick: true,
        pick: function(e){
            e.preventDefault();
            var pickedDate = e.date;              
            var month = $(this).datepicker('getMonthName');
            var date = e.date.getDate();
            var day= $(this).datepicker('getDayName');
            $(".month").html(month);
            $(".date").html(date);
            $(".day").html(day);
            $(this).datepicker('hide'); 
        }
    });
  

});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://fengyuanchen.github.io/datepicker/css/datepicker.css" rel="stylesheet"/>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>

<div data-toggle="datepicker" class=" docs-date input-date-picker-from">
  <div class="month" id="putMonthName">January</div>
  <div class="date">5</div>
  <div class="day" id="putDayName">Tuesday</div>
</div>

Answer 2

使用 autoPick: false,

可以正常使用日期和月份