.html

I have an inline datepicker with multidate set to true. I need users to select one or more days in the calendar which does work. How do I return the selected dates from my button? getDates as per the instructions does not return an array of the dates???

<script src=".1.1/jquery.min.js"></script>
<script src=".6.4/js/bootstrap-datepicker.js"></script>
<link href=".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>

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

I have an inline datepicker with multidate set to true. I need users to select one or more days in the calendar which does work. How do I return the selected dates from my button? getDates as per the instructions does not return an array of the dates???

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare./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>

• javascript
• jquery
• twitter-bootstrap
• datepicker

• Not an answer, but that project looks a little sketchy. They've got 465 open issues and 64 open pull requests which seems like a lot for a project of this size... – Heretic Monkey Commented Oct 26, 2016 at 19:00
• I need a bootstrap date picker where I can select a day and this was the only one I could find. Found a Jquery one but, it's a styling issue when my whole project is bootstrap. – Rob Commented Oct 26, 2016 at 19:02

2 Answers 2

The class selector $('.datepicker') returns multiple elements, and you can only apply the function to one of them. In the following code, I changed it to $('.datepicker:first') to select the first element found.

$(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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./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>

bootstrap-datepicker is throwing an error due to the jquery selector returning multiple elements. The datepicker class is used on more than one element. You should use an id to identify your datepicker instead.

Uncaught Error: Using only allowed for the collection of a single element (getDates function)

$(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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<link href="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./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>