シナリオ
非常に単純な daterangepicker インスタンス:
<div class="section">
<label for="drp">date-range-picker</label>
<input type="text" id="drp" />
<script>
(function(){
$('#drp').daterangepicker({
presetRanges: [
{ text: 'Last 30 days',
dateStart: function () { return Date.parse('today').add({day: -30}) },
dateEnd: function () { return Date.parse('today').add({day: -1}); }
},
{ text: 'Previous month'
, dateStart: function () { return Date.today().add({month:-1}).moveToFirstDayOfMonth()}
, dateEnd: function () { return Date.today().add({month:-1}).moveToLastDayOfMonth(); }
},
{ text: 'Current month'
, dateStart: function () { return Date.today().moveToFirstDayOfMonth()}
, dateEnd: function () { return Date.today().add({day:-1}); }
}
],
presets: {dateRange: 'Select range'},
rangeStartTitle: 'Start date', rangeEndTitle: 'End date', doneButtonText: 'Done', prevLinkText: 'Prev', nextLinkText: 'Next',
rangeSplitter: ' - ', dateFormat: "dd/mm/yy", closeOnSelect: true
});
})();
</script>
</div>
内容:
<script type="text/javascript" language ="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" language ="javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" language ="javascript" src="client/date.js"></script>
<script type="text/javascript" language ="javascript" src="client/daterangepicker/daterangepicker.jQuery.js"></script>
質問
ローカル環境では、すべてが正しく機能します。本番環境では、プリセットを選択した後に次のエラーが発生します。
Uncaught TypeError: Cannot call method 'getDate' of null @daterangepicker.jQuery.js:162
次のステートメントが実行されると、エラーが発生します。
var range_end = rp.find('.range-end'); [...] var rangeB = fDate( range_end.datepicker('getDate') );
私は怒っています。.range-end
daterangepicker は、 class 要素で datepicker を初期化していないようです。しかし、私は何が間違っているのか理解できません。
(Chrome)コンソールに他にエラーはありません。
参考文献