bootstrap-datepicker multidate 返回选定日期的所有日期

Question

http://bootstrap-datepicker.readthedocs.io/en/latest/markup.html

我有一个内联日期选择器，其中多日期设置为 true。我需要用户在日历中选择有效的一天或多天。如何从我的按钮返回选定的日期？ getDates 按照说明不返回日期数组？？？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<div class="datepicker" data-date-format="mm/dd/yyyy"></div>
    <button type="button" class="btn btn-primary btn_save">Save</button>
    
        <script>
            $(document).ready(function () {
                $('.datepicker').datepicker({
                    format: 'mm/dd/yyyy',
                    multidate: true,
                    daysOfWeekDisabled: [0, 6],
                    clearBtn: true,
                    todayHighlight: true,
                    daysOfWeekHighlighted: [1, 2, 3, 4, 5]
                });
    
                $('.datepicker').on("changeDate", function () {
                    var the_dates = $('.datepicker').datepicker('getDates');
                    //this does not work
                    console.log(the_dates)
                });
    
                $(document).on('click', ".btn_save", function (e) {
                    var the_dates = $('.datepicker').datepicker('getDates');
                    //this does not work
                    console.log(the_dates)
                });
    
            });
    
        </script>

Answer 1

类选择器$('.datepicker')返回多个元素，你只能对其中一个应用函数。在以下代码中，我将其更改为 $('.datepicker:first') 以选择找到的第一个元素。

$(document).ready(function () {
  $('.datepicker').datepicker({
    format: 'mm/dd/yyyy',
    multidate: true,
    daysOfWeekDisabled: [0, 6],
    clearBtn: true,
    todayHighlight: true,
    daysOfWeekHighlighted: [1, 2, 3, 4, 5]
  });
          
  $('.datepicker').on('changeDate', function(evt) {
    console.log(evt.date);
  });
          
  $('.btn').on('click', function() {
    var the_date = $('.datepicker:first').datepicker('getDates');
    console.log(the_date);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>

<div class="datepicker" data-date-format="mm/dd/yyyy"></div>
<button type="button" class="btn btn-primary btn_save">Save</button>

Answer 2

bootstrap-datepicker 由于 jquery 选择器返回多个元素而引发错误。 datepicker 类用于多个元素。您应该使用 id 来标识您的日期选择器。

未捕获的错误：仅允许使用单个元素的集合（getDates 函数）

$(document).ready(function () {
    $('#test').datepicker({
        format: 'mm/dd/yyyy',
        multidate: true,
        daysOfWeekDisabled: [0, 6],
        clearBtn: true,
        todayHighlight: true,
        daysOfWeekHighlighted: [1, 2, 3, 4, 5]
    });

    $('#test').on("changeDate", function () {
        var the_dates = $('#test').datepicker('getDates');
        //this does not work
        console.log(the_dates)
    });

    $(document).on('click', ".btn_save", function (e) {
        var the_dates = $('#test').datepicker('getDates');
        //this does not work
        console.log(the_dates)
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>


<div id="test" class="datepicker" data-date-format="mm/dd/yyyy"></div>
<button type="button" class="btn btn-primary btn_save">Save</button>