bootstrap-datetimepicker.js 記錄

 

angular1.5+bootstrap-datetimepicker；

bower 安裝 eonasdan-bootstrap-datetimepicker；

自動安裝關聯jq，moment

angular
.module('app')
.directive('dateTimePicker', ['regularService','toastr',datetimepicker]);

 

(function() {
  'use strict';

  angular
    .module('app')
    .directive('dateTimePicker', ['regularService','toastr',datetimepicker]);
  function datetimepicker(regularService,toastr) {
    var directive = {
      restrict: 'AEC',
      template: '<div class='input-group date' id='datetimepicker'>  
        <input type='text'  class="form-control" ng-disabled="disabled" ng-model="timeValue"  />  
        <span class="input-group-addon">  
        <span class="glyphicon glyphicon-calendar"></span>  
        </span>  
</div>',
      scope: {
          timeDisabled: '=',//是否禁用
          timeValue:"=",//時間返回值
          minDate:"=",//最小值
          maxDate:"=",//最大值
          format:"=",//時間格式
          watchDate:"=",//選擇後回調函數
          pickerObj:"=",//dateTimePicker對象
          warningReg:"@",//警告校驗
          errorReg:"@",//報錯校驗
          warningval:"@",//警告提醒
          errorval:"@",//報錯提醒

      },
      controller: datetimepickerController,
      link: function(scope,element,attr){
    
        var value=false
        //鼠標移開校驗
        /*element.find('input').focus(function(event) {
            $(this).removeClass("inputWarning")
            $(this).removeClass("inputError")
        });*/
       // element.find('input').unbind("blur")
        element.find('input').blur(function(event) {
            if(scope.errorReg){
               
               var reg=regularService.reg[scope.errorReg];
               if(scope.errorReg=='nullValue'){
                     if(reg.test($(this).val())){
                        
                            toastr.error(scope.errorval)
                        
                      
                      $(this).addClass("inputError")
                      
                      return 
                    }
               }else{
                    if(!reg.test(element.val())){
                            toastr.error(scope.errorval)
                            
                        $(this).addClass("inputError")
                       
                        return 
                    }
               }
              // $(this).removeClass("inputWarning")
            $(this).removeClass("inputError")
            
            }
           if(scope.warningReg){
               var reg=regularService.reg[scope.warningReg];
               if(scope.warningReg=='nullValue'){
                   if(reg.test($(this).val())){

                           toastr.warning(scope.warningval)
                        
                    
                    $(this).addClass("inputWarning")
                    
                    return
                  }
               }else{
                  if(!reg.test($(this).val())){
                           toastr.warning(scope.warningval)
                             
                      $(this).addClass("inputWarning")
                  
                     return
                  }
               }
               $(this).removeClass("inputWarning")
           }

        });
        
        if(scope.pickerObj){
          scope.pickerObj=element.children("#datetimepicker").datetimepicker({
              format: scope.format||'YYYY-MM-DD',//'YYYY-MM-DD HH:mm',  
              locale: moment.locale('zh-cn'), 
              showTodayButton:true,
              sideBySide:false,
              minDate:scope.minDate,
              maxDate:scope.maxDate,
              useCurrent: false,
              //debug:true,
              //todayHighlight:true,
             // validateOnBlur:false,
           
          }).on('dp.change', function (e) {  

              var result = new moment(e.date).format(scope.format||'YYYY-MM-DD');  
              var oldDate=new moment(e.oldDate).format(scope.format||'YYYY-MM-DD'); 

              scope.timeValue= result;  
             /* if(!value){
                scope.timeValue=''
                e.date=false
               // scope.pickerObj.data('DateTimePicker').defaultDate("")
              }*/
              if(result==oldDate) {
                return
              }
              scope.$apply();
              if(scope.watchDate){
                  scope.watchDate(e)
              } 
              
               

          });  
      }else{
        element.children("#datetimepicker").datetimepicker({
            format: scope.format||'YYYY-MM-DD',//'YYYY-MM-DD HH:mm',  
            locale: moment.locale('zh-cn'), 
            showTodayButton:true,
            sideBySide:false,
            minDate:scope.minDate,
            maxDate:scope.maxDate,
        }).on('dp.change', function (e) {  
            var result = new moment(e.date).format(scope.format||'YYYY-MM-DD');  
            scope.timeValue= result;  
            scope.$apply(); 
            if(scope.watchDate){
                scope.watchDate(e)
            } 
            

        });
      }
        

      },
    };

    return directive;
    function datetimepickerController($scope,regularService) {
      $scope.$watch('timeValue',function(v){
        if(v=="Invalid date"){
            $scope.timeValue=""
        }
      })

    
      
    }
  }

})();

　　日期到時分

<date-time-picker disabled="false" format="'YYYY-MM-DD HH:mm'" time-value="timeValue"></date-time-picker>

　　日期關聯最小值最大值

<date-time-picker disabled="false" format="'YYYY-MM-DD'" time-value="dateOne"  watch-date="watchDate1" picker-obj="picker1"></date-time-picker>

<date-time-picker disabled="false" format="'YYYY-MM-DD'" time-value="dateTwo" picker-obj="picker2" watch-date="watchDate2"></date-time-picker>
     

　watchDate監聽時間變化，修改pickerObj，時間最大值最小值；

日期校驗，失去焦點校驗

<date-time-picker errorval="開始時間不能爲空" error-reg="nullValue"  disabled="false" format="'YYYY-MM-DD'" time-value=""></date-time-picker>

　　errorReg,校驗正則nullValue爲非空，errorVal,提醒框彈出提醒內容  minDate最小值，maxDate最大值；

(function(){
    'use strict';
    angular
    .module('app')
     .factory('regularService',regularService);
   function regularService(){
       var reg={
        nullValue:/^\s*$/,//非空
        number:/^[0-9]*$/,//數字
        email:/(^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+)|(^$)/,//郵箱(能夠爲空)
        phone:/(^1\d{10}$)|(^$)/,//手機號碼（能夠爲空）
        fourNumber:/^\d{4}$/,//四位數字
       }
       var formService= {
          reg:reg,
       
          /*error: error,
          sort: sort,
          remove: remove,
          btns: btns,
          bundle: bundle,
          add: add*/
        };

       return formService;

   }


})(window,document);

遇到問題：

locale: moment.locale('zh-cn'), 並不能改變日期彈窗框的語言，
moment.js 637行直接修改源碼爲中文

時間彈框一打開就自動選中當前日期，想去掉
useCurrent: false,//不選中當前時間

時間設置了最大值後最後一天第一次選擇選不了，
緣由，時間判斷是否超出時間範圍是以0點爲臨界點，可是每次第一次選擇時間，都會自帶 時分 這樣選擇最後一天，時間就超出臨界點，可是選擇其餘日期再去選最後一天，時分就清除了。
bootstrap-datetimepicker.js

1041行對時間格式進行判斷清除時分；

1  selectDay: function (e) {
2                     if(options.format.indexOf('mm')>-1){
3                         var day = viewDate.clone();
4                     }else{
5                         var day = viewDate.clone().startOf('d')
6                     }