经常在一些项目里面需要使用datePicker来选择日期,常规的做法有两个一个是使用bootstrap ui指令,另一个是使用jquery ui的插件,下面这个是jquery插件的方法。
1、加载库
<script src="jqueryui.js"></script>
<script src="angularjs.js"></script>
<link href="jqueryui.css">
2、加载库
<div ng-controller="DatepickerDemoCtrl">
<input id="jqdatepicker" class="form-control col-sm-3" jqdatepicker ng-model="search.Date"/>
</div>
angular
.module("app")
.controller("DatepickerDemoCtrl",["$scope",function($scope){
}])
.directive("jqdatepicker",function(){
return {
restrict:'EA',
require:"?^",
link:function(scope,element,attr,ngModelCon){
$(element).datepicker({
inline: true,
showButtonPanel:true,
currentText:'Today',
closeText:'Clear',
dateFormat: 'yy-mm-dd',
onSelect: function (date) {
scope.$apply(function () {
ngCon.$setViewValue(date);
})
}
})
$.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);
};
}
}
})
为什么加<code>$.datepicker._gotoToday</code>,我也不清楚,加上之后,插件才可以运行正常,正常使用里面的功能。
http://stackoverflow.com/questions/18144142/jquery-ui-datepicker-with-angularjs
http://blog.csdn.net/u010379324/article/details/46729971
下面是一篇文章,和stackoverflow的讲解。