単純なWebアプリケーションで日付範囲選択ツールが機能しない

Question

単純なWebアプリケーションにthisのような日付範囲選択ツールを追加しようとしています。 私はちょうどhtmlファイル、CSSファイル、およびjavascriptファイルを持っています。

私のファイルでは、jsfiddleのようなものがありますが、私は同じ依存関係を持っていますが、私のアプリケーションではこれは動作しません。私のHTMLファイルに

、私が持っている：

<div class="row"> 
    <div class="col-md-4 col-md-offset-2 demo"> 
    <h4>Your Date Range Picker</h4> 
    <input type="text" id="config-demo" class="form-control"> 
    </div> 
</div> 

とJavaScriptファイルに

、私が持っている：

$(document).ready(function(){ 
    var date_input=$('input[name="date"]'); //our date input has the name "date" 
    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; 
    var options={ 
    format: 'mm/dd/yyyy', 
    container: container, 
    todayHighlight: true, 
    autoclose: true, 
    }; 
    date_input.datepicker(options); 
}) 

$('#config-demo').daterangepicker({ 
"locale": { 
    "format": "MM/DD/YYYY", 
    "separator": " - ", 
    "applyLabel": "Apply", 
    "cancelLabel": "Cancel", 
    "fromLabel": "From", 
    "toLabel": "To", 
    "customRangeLabel": "Custom", 
    "daysOfWeek": [ 
     "Su", 
     "Mo", 
     "Tu", 
     "We", 
     "Th", 
     "Fr", 
     "Sa" 
    ], 
    "monthNames": [ 
     "January", 
     "February", 
     "March", 
     "April", 
     "May", 
     "June", 
     "July", 
     "August", 
     "September", 
     "October", 
     "November", 
     "December" 
    ], 
    "firstDay": 1 
}, 
"linkedCalendars": false, 
"startDate": "09/26/2015", 
"endDate": "10/02/2015", 
"opens": "center" 
}, function(start, end, label) { 
    console.log("New date range selected: " + start.format('MM-DD-YYYY') + " to " + end.format('MM-DD-YYYY') + " (predefined range: " + label + ")"); 
}); 

あなたはそれが動作しない理由のアイデアを持っていますか？

Answer 1

ファンクションの外に$('#config-demo').daterangepickerが呼び出されている可能性があります。これはおそらく、idが "config-demo"のdivをDOMに追加する前に選択しようとしていることを意味します。

$('#config-demo').daterangepickerコールを$(document).ready()機能の内側に移動してください。