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. Pl

Solution 1:

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

Working plunker with changes

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
}

Here is my updated plunker