【angular+bootstrap】angular初級的時間選擇器

近期的一個項目，是用angular來寫的，原本框架就是第一次接觸，使用相關插件的時候就感受更加沒有頭緒了，其中一個插件就是時間選擇器。比較好用時間選擇器就是bootstrap裏面的datetimepicker和daterangepicker（詳情見bootstrap裏面的時間選擇器筆記）。

 

項目須要的是一個能夠選擇時間段的時間選擇器，按照比較正規的作法，是應該用directive來作，可是對出剛剛接觸angular的我來講，藉助一些demo:https://github.com/fragaria/angular-daterangepicker能夠實現，可是項目裏面的時間選擇器是須要自定義的，當時爲了節約時間，我就把daterangepicker直接拿過來（具體能夠看：【bootstrap】時間選擇器datetimepicker和daterangepicker），操做以下：

 

HTML代碼：

1 <div class="col-md-3 timePicker myPay-picker pull-right">
2     <input type="text" name="reservation" id="timePicker0" class="form-control" />
3     <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
4 </div>

 

 

js-controller代碼:

 

 1 $('#timePicker0')
 2     .val(moment().subtract('day', 4).format('YYYY/MM/DD') + ' - ' + moment().format('YYYY/MM/DD'))
 3     .daterangepicker({
 4         opens : 'left', //日期選擇框的彈出位置
 5         format : 'YYYY/MM/DD', //控件中from和to 顯示的日期格式
 6         ranges : {
 7             '最近7日': [moment().subtract('days', 6), moment()],
 8             '最近30日': [moment().subtract('days', 29), moment()]
 9         }
10     },function(start, end, label) {
11         if (start.format('YYYY/MM/DD')
12             == new Date().format('yyyy/MM/dd')) {
13             MyLePay.getTodayOrderDetail().then(function (data) {
14                 var datas = data.data;
15                 var item = [];
16                 var data = [];
17                 var day = datas.trueSales;
18                 item.push(moment().format("MM/DD"));
19                 data.push(day
20                     / 100);
21                 $scope.item = [];
22                 $scope.data = [];
23                 $scope.item = item;
24                 $scope.data = data;
25             });
26             return;
27         }
28         var data = "startDate="
29             + start.format('YYYY/MM/DD')
30             + "&endDate="
31             + end.format('YYYY/MM/DD');
32         MyLePay.getDayTrade(data).then(function(result){
33             var financials = result.data;
34             var item = [];
35             var data = [];
36             angular.forEach(financials,
37                 function (financial, index,
38                           array) {
39                     var date = moment(financial.balanceDate);
40                     item.push(date.format("MM/DD"));
41                     data.push(financial.transferPrice
42                         / 100);
43                 });
44             if(end.format('YYYY/MM/DD')==new Date().format('yyyy/MM/dd')){
45                 item.push(moment().format("MM/DD"));
46                 data.push($scope.day.trueSales);
47             }
48             $scope.item = item;
49             $scope.data = data;
50         });
51     });