在開發中經常需要用的日期的選擇,這裡介紹一下 angular-daterangepicker的用法 第一步:使用bower安裝 bower install angular-daterangepicker --save 第二步:在html中引入
<script src="bower_components/angular-daterangepicker/js/angular-daterangepicker.min.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/moment/moment.js"></script>
複製程式碼
<link href="bower_components/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
複製程式碼
第三步:宣告依賴
App = angular.module('app', ['daterangepicker']);
複製程式碼
第四步:在controller中初始化
exampleApp.controller('TestCtrl', function ($scope) {
$scope.datePicker.date = {startDate: null, endDate: null};
}
複製程式碼
第五步:在html中新增屬性即可
<div ng-controller="TestCtrl">
<input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker.date" />
</div>
複製程式碼