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

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

＆＃13;

＆＃13;

$(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'); 
        }
    });
  

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用 autoPick：false，

可以正常工作日和月