Javascript 通过angularController显示数据选择器
我正在使用angularjs应用程序。我无法加载脚本以在本地工作区的“选择日期”字段中显示日历 我尝试了以下两种方法Javascript 通过angularController显示数据选择器,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我正在使用angularjs应用程序。我无法加载脚本以在本地工作区的“选择日期”字段中显示日历 我尝试了以下两种方法 document.addEventListener("DOMContentLoaded", function(event) { alert("in addEventListener"); //js code to display daterangepicker. }); 加载页面时,将显示警报“在addEventListener中”,但选择日期文本字段中不显
document.addEventListener("DOMContentLoaded", function(event) {
alert("in addEventListener");
//js code to display daterangepicker.
});
加载页面时,将显示警报“在addEventListener中”,但选择日期文本字段中不显示日期范围选择器
另一种方法如下,当页面加载警报语句“document.ready function”显示,但daterangepicker未显示在输入字段中时
$(document).ready(function() {
alert("document.ready function");
//js code to display daterangepicker.
});
显示daterangepicker的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:
<input id="reportrange">
该代码在plunker演示中运行良好,但在我的本地工作区中运行不正常。我努力想找出这个问题,但没有成功
我是否可以编写js代码,用于在angular controller方法中显示daterangepicker,这样我就可以点击后端代码并获取minDate和maxDate的范围。请给我一些建议。
请查找演示代码为什么要在AngularJS应用程序中使用所有这些jQuery?我在这里没有看到任何特定于AngularJS的内容。@BenBeck-请查看链接。dateRangePicker将显示在我的angularjs应用程序中。当然,做你正在做的事情并不好。如果您能详细说明一下控制台中可能出现的错误。或者你在页面源中看到的任何东西nice@participantjava,为什么不使用jQuery,这样就不会将jQuery混合到AngularJS应用程序中呢。问题是,正如我在文章中所说,我必须在加载页面时加载dateRangePicker,我需要将min和maxDates动态地从后端传递到dateRangePicker函数,以便它能够在该范围之间启用日期。然而,我在尝试将daterangepicker代码与angularjs集成时遇到了一些问题。我确信这会让人困惑,但问题是我想显示dateRangePicker从后端动态检索minDate和maxDate..因此尝试在plnkr.co/edit/TCI4W7gpdCcMEGbcJnEX?p=preview中显示代码