Angular指令与Jquery结合

jQuery.fn.extend({
  
  weekToInt : function(week){
   if(week === ‘Mon‘){
    return 1; 
   }else if(week === ‘Tue‘){
    return 2;
   }else if(week === ‘Wed‘){
    return 3; 
   }else if(week === ‘Thu‘){
    return 4; 
   }else if(week === ‘Fri‘){
    return 5;
   }else if(week === ‘Sat‘){
    return 6;
   }else if(week == ‘Sun‘){
    return 7; 
   }
   return 0; 
  },    
  fromDate : function(date){  
   var rs = {}; 
   var ds = date.toString().split(" ");  
   rs.week = this.weekToInt(ds[0]);   
   rs.day = ds[2];
   rs.year = ds[3];
   rs.month = date.getMonth() + 1;
   rs.hour = date.getHours();
   rs.minutes = date.getMinutes();
   rs.seconds = date.getSeconds();  
   return rs; 
  },
  
  nextDay  : function(date){
   var vals = date.valueOf();
   var day = 24 * 60 * 60 * 1000;
   return new Date(vals + day);
  },
  
  previousDay  : function(date){
   var vals = date.valueOf();
   var day = 24 * 60 * 60 * 1000;
   return new Date(vals - day);
  },
  
  firstDayOfMonth : function(date){
   var ds = this.fromDate(date);
   return new Date(Date.parse(ds.year + "-" + ds.month + "-01"));   
  },
  
  getProp  : function(config, prop, def){
   if(config != undefined && config != null && config[prop] != undefined && config[prop] != null){
    return config[prop]; 
   }
   return def;
  }, 
   
  datepicker : function(config){   
      
   /*加入显示单元*/
   var $this = this;
   var div = document.createElement("div");
   var table = document.createElement("table");  
   var tbody = document.createElement("tbody");
   var isHover = false;
   var row = 6;
   var col = 7;
   
   $(div).append(table).appendTo($(this).parent()).css({
    position   : ‘absolute‘,
    display   : $this.getProp(config, ‘display‘, ‘none‘),
    top    : $this.position().top + parseInt($this.css(‘height‘)) + 7,
    left   : $this.position().left
   }).mouseleave(function(){
    isHover = false;
    setTimeout(function(){
     if(!isHover){      
      $(div).css(‘display‘, ‘none‘);      
     }     
    }, 1000);
   }).mouseover(function(){
    isHover = true; 
   }); 
     
   $(table).css({
    width    : $this.getProp(config, ‘width‘, ‘300px‘),
    height   : $this.getProp(config, ‘height‘, ‘200px‘),    
    textAlign  : $this.getProp(config, ‘textAlign‘, ‘center‘),
    backgroundColor : $this.getProp(config, ‘backgroundColor‘, ‘#FFF‘),
    font   : $this.getProp(config, ‘font‘, ‘11px 微软雅黑‘),
    color    : $this.getProp(config, ‘color‘, ‘#000‘)    
   }).attr({
    cellspacing  : ‘0‘,
    cellpadding  : ‘0‘ 
   }).append($(tbody).css({
    width    : ‘100%‘,
    height   : ‘100%‘ 
   }));
     
       
   for(var i = 0; i < row; i++){
    var tr = document.createElement("tr");
    for(var j = 0; j <  col; j++){
     var tag = j;
     if(j == 0){
      tag = col; 
      
     }   
     var td = document.createElement("td");
     var hidden = document.createElement("input");
     var span = document.createElement("span");
     
     $(hidden).attr({
      name  : ‘weekTag‘,
      type  : ‘hidden‘
     }).val(tag);
     $(td).append(hidden).live(‘click‘, function(){
      $this.val($(this).find(‘span‘).eq(0).html());
      
     }).css({
      width   :  parseInt(parseInt($(table).css(‘width‘)) / col ) - 1 + ‘px‘,
      height  :  parseInt(parseInt($(table).css(‘height‘)) / row) - 1 + ‘px‘,
      borderLeft :  $this.getProp(config, ‘border‘,‘1px solid‘),
      borderTop :  $this.getProp(config, ‘border‘,‘1px solid‘),
      borderColor :  $this.getProp(config, ‘borderColor‘, ‘#0EF‘),      
      cursor  :  $this.getProp(config, ‘cursor‘, ‘pointer‘)    
     }).mouseover(function(){
      var fontSize = parseInt($(this).css("fontSize"));
      $(this).css({
       //fontSize  : (fontSize + 6) + ‘px‘
      });
     }).mouseleave(function(){      
      var fontSize = parseInt($(this).css("fontSize"));
      $(this).css({
       //fontSize  : (fontSize - 6) + ‘px‘
      });
     }).append($(span).addClass("_day"));     
     
     if(i == (row - 1)){
      $(td).css({
       borderBottom : $this.getProp(config, ‘border‘,‘1px solid‘),
       borderColor  : $this.getProp(config, ‘borderColor‘,‘#0EF‘)      
      });
     }
     if(j == (col - 1)){
      $(td).css({
       borderRight  : $this.getProp(config, ‘border‘,‘1px solid‘),
       borderColor  : $this.getProp(config, ‘borderColor‘,‘#0EF‘)
      });
     }     
     $(tr).append(td);
    } 
    $(tbody).append(tr);      
   } 
   
   
   
   //修改日期
   var modifyDatePicker = function(date){
    var first = $this.firstDayOfMonth(date);
    var firstDate = $this.fromDate($this.firstDayOfMonth(date)); 
    var next = $this.nextDay(first);
    var nextDate = $this.fromDate(next);
    var isFoundFirst = false;
    var $trs = $(tbody).find("tr");
    for(var i = 0; i < $trs.length ; i++ ){
     var $tr  = $($trs[i]);
     var $tds = $tr.find("td");
     for(var j = 0 ; j < $tds.length; j++){
      var $td = $($tds[j]);
      var weekTag = $td.find("input[name=weekTag]").eq(0).val();
      var span = $td.find(‘._day‘).eq(0); 
      if(!isFoundFirst ){
       if(parseInt(firstDate.week) == parseInt(weekTag)){        
        $(span).html(firstDate.day);
        isFoundFirst = true;
       }
      }else{
       if(nextDate.month != firstDate.month){
        $(span).css({
         color : ‘gray‘
        });
       }
       $(span).html(nextDate.day);
       next = $this.nextDay(next);
       nextDate = $this.fromDate(next);
      }      
     }     
    }    
   };
   
   modifyDatePicker(new Date());
   
   /*处理事件*/
   this.live(‘click‘, function(){
    var display = $(div).css("display");
    if(display == ‘block‘){
     display = ‘none‘; 
    }else{
     display = ‘block‘;
    };
    $(div).css({
     display  :  display    
    });
         
   }).attr({
    readonly : $this.getProp(config, ‘readonly‘, ‘false‘)    
   }).css({
    cursor  : ‘pointer‘ 
   }).val("1989-09-11");
  } 
 });
 
 var md = angular.module("myApp",[]);
 
 md.directive(‘ngDate‘, function(){
  
  return {
   
   restrict : ‘A‘,   
   compile  : function(element,attributes){
    $(element).datepicker({
     borderColor : ‘#0AE‘,
     readonly : false
     
    });    
   }   
  }  
 }).controller("mainController", function($scope){
  
  $scope.user = {};
  $scope.user.userName = ‘bond‘;
  $scope.user.age = 24;
  $scope.user.birthday = ‘1989-8-12‘;
  
 });