自定义 "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

您应该可以通过覆盖选择回调来实现此目的。

$(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，

自定义 "fengyuanchen/datepicker" 输出

Custom "fengyuanchen/datepicker" output

html

jquery

datepicker

jquery-plugins