날짜 범위 선택기 angle-ui-datepicker에

Question

angular-ui-datepicker을 사용하여 Date Range Picker을 구현하고 싶습니다. 그러나 이에 대한 리소스 또는 좋은 예를 찾을 수 없으므로 누구나 날짜 범위 선택기 또는 정상 날짜 선택을 제안 할 수 있습니다. 예를 들어 나에게도 도움이 될만한 날짜를 선택하십시오.

: 나는이 웹 사이트에 물어 못할 질문의 유형을 알고 있지만 내가

을 물어와 나는 많은 예를 아무것도하지만, 일을하려고 너무 붙어있어 제대로 여기

내가 이미 시도 내 코드입니다

Html 코드 : 여기

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

그리고는 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

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

같은를 HTML 코드와 JS 코드 내가 이것에 대한 plunker을 만든 Urvi_204 @

 //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; 
     }