javascript - 将日期选择器应用于同一网页的多个实例

Question

我正在使用 Angular Bootstrap 日期范围选择器。在单个页面中，我需要在多个位置使用它，每个日期选择器都启用了自己的最小和最大日期范围。请找到代码演示 here

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() {
    console.log("show event fired");
});
$('#reportrange').on('hide.daterangepicker', function() {
    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代码:

Select SIM Date Range : <input id="reportrange" class="simDateRange">
<br><br><br>

Select Phone Date Range: <input id="reportrange" class="phoneDateRange">

我想重复使用相同的 js 代码在我的网页的多个位置显示日期范围选择器，我需要为每个日期范围设置最小和最大日期范围。任何建议都会有所帮助。

Answer 1

通常在 Angular 中我们使用 directives 来重用元素。在 v1.6 中，我们也使用组件。但根据您的要求

工作 plunker有变化

只需在 index.html 中提及输入的唯一 ng-model 名称即可获取它们的值并且要有不同的开始日期，您必须提及不同的 ID/类，并有一个函数来构造 optionSet1 并将其传递给具有类名的函数，然后在该函数中设置

function constructOptions(minDate, maxDate){
   // this is just an idea
   // here construct the optionSet
   // then call cb with desired element
}

function cb(element){
    // logic
}

这是我的更新 plunker