Javascript 问题以加载js代码
我正在开发angularjs应用程序。我想显示dateRange选择器,以便用户可以从单个日期选择器中选择dateRange开始和结束日期。 加载日期选择器时遇到问题。请找到演示 在控制台中,当我单击“选择日期”字段时,不会显示任何错误。datepicker不会显示 js代码:Javascript 问题以加载js代码,javascript,jquery,angularjs,daterangepicker,Javascript,Jquery,Angularjs,Daterangepicker,我正在开发angularjs应用程序。我想显示dateRange选择器,以便用户可以从单个日期选择器中选择dateRange开始和结束日期。 加载日期选择器时遇到问题。请找到演示 在控制台中,当我单击“选择日期”字段时,不会显示任何错误。datepicker不会显示 js代码: var cb = function(start, end, label) { console.log(start.toISOString(), end.toISOString(), label); $('
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">
我将参考您提供的代码片段,因为这里提供的代码有点不清楚。您只需将标记移动到输入元素之后的标记之前。问题是javascript加载得太早,没有可绑定的输入,执行后不知道有任何输入。在输入之后移动它意味着代码将在输入初始化之后执行,以便能够绑定到它
以下是您的示例:但在实时或我的应用程序中,我在一个jsp文件中有所有导入,代码内容在另一个文件中。我将只导入在代码内容文件中有所有导入的jsp文件。我不能在我有内容的jsp中包含脚本标记。希望你明白我的意思。然后你需要在文档就绪状态下运行脚本。document.addEventListenerDomainContentLoaded,functionevent{//您的脚本..};如果我在同一个页面中有多个日期选择器,并且我想重用相同的js功能,那么如何实现它呢。请看这个例子。请给出建议。您不应该在html中的更多元素上使用相同的id。只需重新编写datepicker,以从className而不是id进行初始化。您现在从$rangepicker进行初始化,将其更改为$.rangepicker,同时将id更改为类,它应该可以工作。我在这里看不到angular的轨迹。顺便问一下,您是否将此代码包装到document ready事件中$document.readyfunction{$'reportrange'。在'show.daterangepicker'上,函数{alertshow事件已激发;console.logshow事件已激发;};};
$('#reportrange').on('show.daterangepicker', function() {
alert("show event fired");
console.log("show event fired");
});