【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      });

 

 

查看更多关于【angular+bootstrap】angular初级的时间选择器的详细内容...