Question

我正在开发angularjs应用程序。我无法加载脚本以在我的本地工作区的“选择日期”字段中显示日历。

我尝试了以下两种方式。

 document.addEventListener("DOMContentLoaded", function(event) {
    alert("in addEventListener");
    //js code to display daterangepicker.
 });

加载页面时，会显示警告“in 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 demo here中正常工作，但在我的本地工作区中却没有。我努力想出问题，但没有运气。

我可以编写用于在角度控制器方法中显示daterangepicker的js代码，这样我就可以点击后端代码并获取minDate和maxDate的范围。请指教。请找到演示代码here

通过angularController显示datePicker

0 个答案: