-2
angular-ui-datepicker
을 사용하여 Date Range Picker
을 구현하고 싶습니다. 그러나 이에 대한 리소스 또는 좋은 예를 찾을 수 없으므로 누구나 날짜 범위 선택기 또는 정상 날짜 선택을 제안 할 수 있습니다. 예를 들어 나에게도 도움이 될만한 날짜를 선택하십시오.날짜 범위 선택기 angle-ui-datepicker에
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;
};
확인하시기 바랍니다처럼 https://plnkr.co/edit/DRJXbxBcyqYMJiYmQImo?p=preview – Dixit