将datepicker应用于同一网页的多个实例 [英] applying datepicker to multiple instances of the same webpage

问题描述

我正在使用角度引导日期范围选择器.在单个页面中，我需要在多个地方使用它，并且每个日期选择器都启用了自己的最小和最大日期范围.请在此处

I am using angular bootstrap date range picker. In a single page i need to use it in multiple places with each date picker having its own minimum and maximum date range enabled. Please find the code demo 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代码在网页的多个位置显示日期范围选择器，并且我需要为每个日期范围设置最小和最大日期范围.任何建议都会有所帮助.

I want to reuse the same js code to show daterange picker in multiple places of my webpage and i need to set minimum and maximum date range for each date range.Any suggestions would be helpful.

推荐答案

通常在角度上，我们使用directives重用元素.在v1.6中，我们还使用组件.但是根据您的要求

Generally in angular we use directives to reuse elements. With v1.6 we use components also. But as per your requirement

通过更改工作 plunker

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

Just mention unique ng-model names of inputs in index.html to get their values and to have different start dates, you must mention different ids/classes and have a single function to construct optionSet1 and pass this to the function with class name then set in that function

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

function cb(element){
    // logic
}

这是我的更新 朋克车

这篇关于将datepicker应用于同一网页的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！