ブートストラップ日付ピッカーは、選択した日

Question

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

私がtrueに設定されてmultidateインライン日付ピッカーを持っているため、すべての日付を返しmultidate。私は、動作するカレンダーで1日以上を選択する必要があります。ボタンから選択した日付を返すにはどうすればよいですか？指示に従って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

ブートストラップ日付ピッカーは、複数の要素を返すjQueryのセレクタに起因するエラーを投げています。 datepickerクラスは、複数の要素で使用されます。代わりにあなたの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>