【angular+bootstrap】angular初级的时间选择器

近期的一个项目，是用angular来写的，本来框架就是第一次接触，使用相关插件的时候就感觉更加没有头绪了，其中一个插件就是时间选择器。比较好用时间选择器就是bootstrap里面的datetimepicker和daterangepicker（详情见bootstrap里面的时间选择器笔记）。

 

项目需要的是一个可以选择时间段的时间选择器，按照比较正规的做法，是应该用directive来做，但是对出刚刚接触angular的我来说，借助一些demo:https://github.com/fragaria/angular-daterangepicker可以实现，但是项目里面的时间选择器是需要自定义的，当时为了节约时间，我就把daterangepicker直接拿过来（具体可以看：【bootstrap】时间选择器datetimepicker和daterangepicker），操作如下：

 

HTML代码：

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

 

js-controller代码:

 $('#timePicker0')
     .val(moment().subtract('day', 4).format('YYYY/MM/DD') + ' - ' + moment().format('YYYY/MM/DD'))
     .daterangepicker({
         opens : 'left', //日期选择框的弹出位置
         format : 'YYYY/MM/DD', //控件中from和to 显示的日期格式
         ranges : {
             '最近7日': [moment().subtract('days', 6), moment()],
             '最近30日': [moment().subtract('days', 29), moment()]
         }
     },function(start, end, label) {
         if (start.format('YYYY/MM/DD')
             == new Date().format('yyyy/MM/dd')) {
             MyLePay.getTodayOrderDetail().then(function (data) {
                 var datas = data.data;
                 var item = [];
                 var data = [];
                 var day = datas.trueSales;
                 item.push(moment().format("MM/DD"));
                 data.push(day
                     / 100);
                 $scope.item = [];
                 $scope.data = [];
                 $scope.item = item;
                 $scope.data = data;
             });
             return;
         }
         var data = "startDate="
             + start.format('YYYY/MM/DD')
             + "&endDate="
             + end.format('YYYY/MM/DD');
         MyLePay.getDayTrade(data).then(function(result){
             var financials = result.data;
             var item = [];
             var data = [];
             angular.forEach(financials,
                 function (financial, index,
                           array) {
                     var date = moment(financial.balanceDate);
                     item.push(date.format("MM/DD"));
                     data.push(financial.transferPrice
                         / 100);
                 });
             if(end.format('YYYY/MM/DD')==new Date().format('yyyy/MM/dd')){
                 item.push(moment().format("MM/DD"));
                 data.push($scope.day.trueSales);
             }
             $scope.item = item;
             $scope.data = data;
         });
     });