AngularJS 与Jquery Datepicker集成

本人因为使用angularJS开发一个小网站，网站上需要用到一个日期选择器，通过各种百度，各种尝试后发现，还是Jquery Datapicker 的使用最方便。下面来给未百度或未领悟出来的童鞋来一个教程，如何将AngularJS 与Jquery Datepicker集成，能在输入款内选择日期。

1.下载Jquery Datapicker 包。

这里有一个官方示例：http://jqueryui.com/datepicker/ 。

还有一个DIY 自己的DatePicker UI 的网址： http://jqueryui.com/themeroller/ 。 

都是官方的，内容可靠！

Tips: 下载过来之后是一个压缩包，由于它是在CSS文件中定义的 UI 图片地址，所以你的图片的地址也应该从该CSS文件的地址计算起。

总共需要包含三个js文件，jquery.js jquery-ui.js  jquery.DatePicker.js 和相关的css文件和图片。

2.使用你的Datepicker

在成功的引入包之后，你需要声明一个AngularJS的指令directive。注意，如果你的该指令是希望公用的，那么介意建一个公共的模块内声明该指令.

angular.module('ds.shared').directive('mydatapicker',function(){return {restrict:'EA',require: 'ngModel',link: function(scope,ele,attrs,ctrl){$(ele).datepicker({dateFormat:'yy-mm-dd',onSelect:function(dp){scope.$apply(function(){ctrl.$setViewValue(dp);});}});}}});

$(ele).datepicker( ) 是jquery的datepicker 声明，声明好了之后只要点击输入框就能弹出日期选择框了。

这个里面的scope.$apply可以在非AngualrJS的代码内调用AngularJS的数据检查。这样可以让视图中的数据绑定回AngularJS的Model中去。

之后在你的html文件中加入该指令的名字。

注意：指令名称只有小写字母，没有大写字母。如果你声明的指令名称中有大写字母，那么在html文件中，仍然会被转换成小写字母。

<div class="form-group"><input class="form-control"placeholder="{{'CLICK_FOR_TIME'|translate}}"<span style="color:#ff0000;">mydatapicker</span>readonly="readonly" ng-model="search.Date"                                                                                                       ></div>

3.扩展你的Datapicker

如果你的项目仅仅是做到这个地步呢 ，估计你老板会直接让你Say Goobye。所以，我们仍然要进行扩展，增加一个Today输入今天日期的按钮和一个Clear清除当前输入的按钮。

首先，在你的指令中增加三个字段。showButtonPanel、currentText、closeText。

看到这里你一定很好奇，为什么清除按钮的名字叫closeText。 这里给大家解释一下，因为DataPicker自带了Today按钮，所以Today的功能是存在的，不需要修改，但是它并没有Clear清除按钮，却自带了一个close关闭按钮。所以无奈之下，我们只好改造一下Close按钮。

$(ele).datepicker({showButtonPanel:true,currentText:'Today',closeText:'Clear',dateFormat:'yy-mm-dd',onSelect:function(dp){scope.$apply(function(){ctrl.$setViewValue(dp);});}});

添加完这个之后，你可以试运行一下，是不是成功地将Today和Clear按钮都显示了呢？

但是点击Today和Clear都没有预期的功能。我们先来改造一下Today的功能。

在directive内增加如下代码。

$.datepicker._gotoToday = function (id) { var target = $(id); var inst = this._getInst(target[0]); if (this._get(inst, 'gotoCurrent') && inst.currentDay) { inst.selectedDay = inst.currentDay; inst.drawMonth = inst.selectedMonth = inst.currentMonth; inst.drawYear = inst.selectedYear = inst.currentYear; } else { var date = new Date(); inst.selectedDay = date.getDate(); inst.drawMonth = inst.selectedMonth = date.getMonth(); inst.drawYear = inst.selectedYear = date.getFullYear(); this._setDateDatepicker(target, date); this._selectDate(id, this._getDateDatepicker(target)); } this._notifyChange(inst); this._adjustDate(target); };

这代码大家不需要去理解为什么，因为这是从Jquery的jquery-ui.js内拷贝出来现有的代码，只是增加了这一段声明。

下面需要对Clear进行改造。改造之前，我们先要了解一下它这个datapicker的执行代码流程。

这个是打开datepicker的buttonpanel 的html代码，从这里我们可以看到处理逻辑不一致的主要是在 data-handler 这个属性里。

那么现在我们进入到jquery-ui.js 这个文件中去。

可以找到一个名叫 _attachHandlers 的函数

这里头有today的处理逻辑，也有名叫hide的处理逻辑。我将原来关闭日期选择器的逻辑注释掉，加入了datepicker中有，但是没有使用的clearDate函数。

最后，在原先的directive中，加入如下代码：

$.datepicker._clearDate= function(id) {var target = $(id);this._selectDate(target, "");};

到这里为止，已经实现了Today,Clear两个功能，希望大家能够成功得实现。