問題加載js代碼

我正在處理angularjs應用程序。我想顯示dateRange選擇器，以便用戶可以從單個日期選擇器中選擇dateRange（開始日期和結束日期）。面臨加載日期選擇器的問題。請發現演示here 問題加載js代碼

在控制檯中沒有錯誤顯示，當我點擊選擇日期字段datepicker不顯示。

JS代碼：

var cb = function(start, end, label) { 
    console.log(start.toISOString(), end.toISOString(), label); 
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
    console.log("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]"); 
} 

var optionSet1 = { 
    startDate: moment().subtract(1, 'days'), 
    endDate: moment().subtract(1, 'days'), 
    minDate: '08/01/2014', 
    maxDate: '12/31/2017', 
    dateLimit: { 
     days: 60 
    }, 
    showDropdowns: true, 
    showWeekNumbers: true, 
    timePicker: false, 
    timePickerIncrement: 1, 
    timePicker12Hour: true, 
    ranges: { 
     'Today': [moment(), moment()], 
     'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
     'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
     'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
     'This Month': [moment().startOf('month'), moment().endOf('month')], 
     'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
    }, 
    opens: 'left', 
    buttonClasses: ['btn btn-default'], 
    applyClass: 'btn-small btn-primary', 
    cancelClass: 'btn-small', 
    format: 'MM/DD/YYYY', 
    separator: ' to ', 
    locale: { 
     applyLabel: 'Submit', 
     cancelLabel: 'Clear', 
     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 
    } 
}; 

$('#reportrange span').html(moment().subtract(1, 'days').format('MMMM D, YYYY') + ' - ' + moment().subtract(1, 'days').format('MMMM D, YYYY')); 

$('#reportrange').daterangepicker(optionSet1, cb); 

$('#reportrange').on('show.daterangepicker', function() { 
    alert("show event fired"); 
    console.log("show event fired"); 
}); 
$('#reportrange').on('hide.daterangepicker', function() { 
    alert("hide event fired"); 
    console.log("hide event fired"); 
}); 
$('#reportrange').on('apply.daterangepicker', function(ev, picker) { 
    console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY')); 
}); 
$('#reportrange').on('cancel.daterangepicker', function(ev, picker) { 
    console.log("cancel event fired"); 
});

的html代碼：

Choose Date : <input id="reportrange">

我有，以跟蹤問題艱難的時間，我需要導入的文件？我跟了這link。任何建議，將helpful.Its不加載/觸發以下事件：

$('#reportrange').on('show.daterangepicker', function() { 
      alert("show event fired"); 
      console.log("show event fired"); 
     });

來源

2017-05-22 participantjava

我看不到軌跡的角度在這裏。順便說一下，你是否將這些代碼包裝在文檔就緒事件中？（'show.daterangepicker'，function（）{ '$（document）.ready（function（）{$（'＃reportrange'）。 console.log（「show事件觸發「）; }）;}）;' – quirimmo

我將把代碼剪斷你提供爲這裏提供的代碼是有點不清楚。您應該在輸入元素後面（在</body>標記之前）移動<script type="text/javascript" src="app.js"></script>標記。問題在於你的javascript過早加載，沒有輸入來綁定（它不知道執行後有什麼輸入）。在輸入後移動它意味着代碼將在輸入初始化後執行，以便能夠綁定到它。

這裏是你的榜樣：fixed code snipped

來源

2017-05-22 20:52:39

但實時或在我的應用程序中，我有一個jsp文件中的所有導入，代碼內容在另一個文件中。我將只導入jsp文件，它具有所有代碼內容文件中的導入。我無法在包含內容的jsp中包含腳本標記。希望你明白了我的觀點。 – participantjava

然後，您需要在文檔就緒狀態下運行腳本。 'document.addEventListener（「DOMContentLoaded」，function（event）{ // your script .... }）;' –

如果我在同一頁面有多個日期選擇器，我想重複使用相同的js功能，我怎麼能實現這一目標。請參閱示例http://plnkr.co/edit/ypgBGi10vVPe89Nq6rP7?p=preview。請指教。 – participantjava

問題加載js代碼

回答

相關問題