Date Range Picker in angular-ui-datepicker

Question

I want to implement Date Range Picker in angularjs by using angular-ui-datepickerbut I can't find the resource or good example for this so can anyone suggest me for date range picker or normal select From Date to select To date example also helpful for me so please suggest me! I know this type of question I cant ask on this website but I m stuck so I ask

and i try many example but nothing work properly

Here is my code snippet that i try already:

Html Code:

<div class="row form-group" style="margin-left: 15px;" ng-if="table.custompicker">
    <div class="crm-form-container">
        <div class="col-sm-4">
            <div class="input-group">
                <span class="input-group-addon" uib-tooltip="From Date" uib-tooltip-trigger="focus" uib-tooltip-placement="top"><i class="fa fa-hand-o-right" aria-hidden="true"></i></span>
                <input id="datepicker_update" class="form-control" type="text" uib-datepicker-popup="{{table.format}}"
                       ng-model="AvailableDate" ng-value="table.price_list.date_update"
                       is-open="table.dt_picker[3]" min-date="dpick.minDate" max-date="'2019-12-22'" 
                       datepicker-options="table.dateOptions3" date-disabled="table.disabled(date, mode)"
                       close-text="Close" placeholder="From Date" name="select_date" ng-change="ChangeExpiryMinDate(AvailableDate)" datepicker-mode="'day'" required=""/>
                <span class="input-group-btn">
                    <button class="btn btn-info" type="button" ng-click="table.open_dt_picker(3)">
                        <em class="fa fa-calendar"></em>
                    </button>
                </span>
            </div>
            <span class="text-danger" ng-show="table.validateInput('select_date', 'required')">{{'revalidationmsg.REQUIREDMSG'|translate}}</span>

        </div>
        <div class="col-sm-4">
            <div class="input-group">
                <span class="input-group-addon" uib-tooltip="From Date" uib-tooltip-trigger="focus" uib-tooltip-placement="top"><i class="fa fa-hand-o-right" aria-hidden="true"></i></span>
                <input id="datepicker_update" class="form-control" type="text" uib-datepicker-popup="{{table.format}}"
                       ng-model="ExpireDate" ng-value="table.price_list.date_update"
                       is-open="table.dt_picker[4]" min-date="dpick.minDate" max-date="'2019-12-22'" 
                       datepicker-options="table.dateOptions4" date-disabled="table.disabled(date, mode)"
                       close-text="Close" placeholder="To Date" name="select_date" datepicker-mode="'day'" required=""/>
                <span class="input-group-btn">
                    <button class="btn btn-info" type="button" ng-click="table.open_dt_picker(4)">
                        <em class="fa fa-calendar"></em>
                    </button>
                </span>
            </div>
            <span class="text-danger" ng-show="table.validateInput('select_date', 'required')">{{'revalidationmsg.REQUIREDMSG'|translate}}</span>

        </div>
        <div class="col-sm-4">
            <button class="btn btn-success btn-xs" type="button"  value="SAVE" ng-click="table.generateReport(table.select)" uib-tooltip="" uib-tooltip-trigger="focus" uib-tooltip-placement="top">Generate Report</button>
            <button class="btn btn-default btn-xs" type="button" ng-click="" uib-tooltip="" uib-tooltip-trigger="focus" uib-tooltip-placement="top">Cancel</button>
        </div>
    </div>
</div>

And Here is JS :

vm.dt_picker = [];
vm.dt = [];
vm.open_dt_picker = function (index) {
    vm.dt_picker[index] = true;
};
$scope.dateOptions3 = {
    formatYear: 'yy',
    startingDay: 1,
    showWeeks: false,
    minMode: 'week',
    //minDate: today,
    //maxDate: new Date(2030, 5, 22)
};
$scope.dateOptions4 = {
    formatYear: 'yy',
    startingDay: 1,
    showWeeks: false,
    minMode: 'week',
    //minDate: today,
    //maxDate: new Date(2030, 5, 22)

};
vm.formats = ['dd-MMMM-yyyy', 'yyyy-MM-dd', 'yyyy', 'shortDate', 'MM-yyyy'];
vm.format = vm.formats[1];
vm.opencustompicker = function () {
    vm.custompicker = true;
};

Answer 1

Your Html Code like

       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
            <label>Start Date</label>
            <div class="input-group" >
                <input ng-readonly="true" type="text" class="form-control " id="startdate" name="startdate" uib-datepicker-popup="MM/dd/yyyy"
                       ng-model="fromDate" is-open="startDateStatus"
                       show-button-bar="true" data-ng-click="toggleStartDate($event)" 
                       placeholder="Select From Date"                                           
                       datepicker-options="options"
                       close-text="Close" />
                <span class="input-group-addon add-on link_cursor" data-ng-click="toggleStartDate($event)">
                    <i class="glyphicon glyphicon-calendar"></i>
                </span>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <label>End Date</label>
            <div class="input-group">
                <input ng-readonly="true" type="text" class="form-control " id="enddate" name="enddate" uib-datepicker-popup="MM/dd/yyyy"
                       ng-model="toDate" is-open="endDateStatus"
                       show-button-bar="true" data-ng-click="toggleEndDate($event)"                                                                                                                         
                       placeholder="Select To Date"
                       datepicker-options="options2"                                          
                       close-text="Close" />
                <span class="input-group-addon add-on link_cursor" data-ng-click="toggleEndDate($event)">
                    <i class="glyphicon glyphicon-calendar"></i>
                </span>
            </div>
        </div>

And Your Js Code like

        //toggle start date popup
        function toggleStartDate($event) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.startDateStatus = true;
        }

        //toggle end date popup
        function toggleEndDate($event) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.endDateStatus = true;
        }