layDate日期控件如何在Angularjs中使用？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
指令具體代碼:
/**
* 使用示例
* <input def-laydate type="text" id="id1" ng-model="startTime"/>
*/
app
.directive('defLaydate', function() {
return {
require: '?ngModel',
restrict: 'A',
scope: {
ngModel: '='
},
link: function(scope, element, attr, ngModel) {
var _date = null,_config={};
// 初始化參數
_config = {
elem: '#' + attr.id,
format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD',
max:attr.hasOwnProperty('maxDate')?attr.maxDate:'',
min:attr.hasOwnProperty('minDate')?attr.minDate:'',
choose: function(data) {
scope.$apply(setViewValue);
},
clear:function(){
ngModel.$setViewValue(null);
}
};
// 初始化
_date= laydate(_config);
// 模型值同步到視圖上
ngModel.$render = function() {
element.val(ngModel.$viewValue || '');
};
// 監聽元素上的事件
element.on('blur keyup change', function() {
scope.$apply(setViewValue);
});
setViewValue();
// 更新模型上的視圖值
function setViewValue() {
var val = element.val();
ngModel.$setViewValue(val);
}
}
}
})---以上代碼使用示例為 <input def-laydate type="text" id="id1" ng-model="startTime"/>
注意：1.指令只能用做元素屬性。2.元素必須要有唯一id屬性。
到此為止，在Angularjs里使用laydate的基本目標實現了。但是，日期組件難免會有日期選擇范圍限制的要求,比如日期可選的最大值，最小值?，F對指令做優化以滿足要求：
app.directive('defLaydate', function() {
return {
require: '?ngModel',
restrict: 'A',
scope: {
ngModel: '=',
maxDate:'@',
minDate:'@'
},
link: function(scope, element, attr, ngModel) {
var _date = null,_config={};
// 初始化參數
_config = {
elem: '#' + attr.id,
format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD',
max:attr.hasOwnProperty('maxDate')?attr.maxDate:'',
min:attr.hasOwnProperty('minDate')?attr.minDate:'',
choose: function(data) {
scope.$apply(setViewValue);
},
clear:function(){
ngModel.$setViewValue(null);
}
};
// 初始化
_date= laydate(_config);
// 監聽日期最大值
if(attr.hasOwnProperty('maxDate')){
attr.$observe('maxDate', function (val) {
_config.max = val;
})
}
// 監聽日期最小值
if(attr.hasOwnProperty('minDate')){
attr.$observe('minDate', function (val) {
_config.min = val;
})
}
// 模型值同步到視圖上
ngModel.$render = function() {
element.val(ngModel.$viewValue || '');
};
// 監聽元素上的事件
element.on('blur keyup change', function() {
scope.$apply(setViewValue);
});
setViewValue();
// 更新模型上的視圖值
function setViewValue() {
var val = element.val();
ngModel.$setViewValue(val);
}
}
}
})---以上代碼使用示例為 <input def-laydate type="text" id="id1" ng-model="startTime" max-date="{{model.max}}" min-date="{{model.min}}"/> min-date,max-date屬性按需添加。
這樣的指令一般情況下已經可以滿足使用，但是在結合ngDialog使用時出現了問題：layDate在初始化中getElementById 獲取元素時，彈窗中的html內容還沒有持到頁面的結點樹中，故而報錯。
于是希望指令的link代碼可以在彈窗渲染后再執行，查找資料后，在指令中引入了$timeout:
app.directive('ngcLayDate', function($timeout) {
return {
require: '?ngModel',
restrict: 'A',
scope: {
ngModel: '=',
maxDate:'@',
minDate:'@'
},
link: function(scope, element, attr, ngModel) {
var _date = null,_config={};
// 渲染模板完成后執行
$timeout(function(){
// 初始化參數
_config = {
elem: '#' + attr.id,
format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD',
max:attr.hasOwnProperty('maxDate')?attr.maxDate:'',
min:attr.hasOwnProperty('minDate')?attr.minDate:'',
choose: function(data) {
scope.$apply(setViewValue);
},
clear:function(){
ngModel.$setViewValue(null);
}
};
// 初始化
_date= laydate(_config);
// 監聽日期最大值
if(attr.hasOwnProperty('maxDate')){
attr.$observe('maxDate', function (val) {
_config.max = val;
})
}
// 監聽日期最小值
if(attr.hasOwnProperty('minDate')){
attr.$observe('minDate', function (val) {
_config.min = val;
})
}
// 模型值同步到視圖上
ngModel.$render = function() {
element.val(ngModel.$viewValue || '');
};
// 監聽元素上的事件
element.on('blur keyup change', function() {
scope.$apply(setViewValue);
});
setViewValue();
// 更新模型上的視圖值
function setViewValue() {
var val = element.val();
ngModel.$setViewValue(val);
}
},0);
}
};
})看完上述內容，你們掌握layDate日期控件如何在Angularjs中使用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
