Angularjs中使用layDate日期控件示例
layDate 控件地址：http://laydate.layui.com/
前情：原來(lái)系統(tǒng)中使用的日期控件是UI bootstrap（地址：https://angular-ui.github.io/bootstrap/）里的。后來(lái)因?yàn)楦鞣N原因，要換掉UI bootstrap中的日期控件，改用layDate日期控件。
解決思路：將layDate的初始化及相關(guān)代碼定義在指令里。
問(wèn)題關(guān)鍵點(diǎn)：layDate操作的是Html元素的,怎么實(shí)現(xiàn)雙向綁定，同步Angularjs模板值和Html的元素值。
指令具體代碼:
/**
* 使用示例
* <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={};
// 初始化參數(shù)
_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 || '');
};
// 監(jiān)聽(tīng)元素上的事件
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的基本目標(biāo)實(shí)現(xiàn)了。但是，日期組件難免會(huì)有日期選擇范圍限制的要求,比如日期可選的最大值，最小值?，F(xiàn)對(duì)指令做優(yōu)化以滿(mǎn)足要求：
app.directive('defLaydate', function() {
return {
require: '?ngModel',
restrict: 'A',
scope: {
ngModel: '=',
maxDate:'@',
minDate:'@'
},
link: function(scope, element, attr, ngModel) {
var _date = null,_config={};
// 初始化參數(shù)
_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);
// 監(jiān)聽(tīng)日期最大值
if(attr.hasOwnProperty('maxDate')){
attr.$observe('maxDate', function (val) {
_config.max = val;
})
}
// 監(jiān)聽(tīng)日期最小值
if(attr.hasOwnProperty('minDate')){
attr.$observe('minDate', function (val) {
_config.min = val;
})
}
// 模型值同步到視圖上
ngModel.$render = function() {
element.val(ngModel.$viewValue || '');
};
// 監(jiān)聽(tīng)元素上的事件
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屬性按需添加。
這樣的指令一般情況下已經(jīng)可以滿(mǎn)足使用，但是在結(jié)合ngDialog使用時(shí)出現(xiàn)了問(wèn)題：layDate在初始化中g(shù)etElementById 獲取元素時(shí)，彈窗中的html內(nèi)容還沒(méi)有持到頁(yè)面的結(jié)點(diǎn)樹(shù)中，故而報(bào)錯(cuò)。
于是希望指令的link代碼可以在彈窗渲染后再執(zhí)行，查找資料后，在指令中引入了$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={};
// 渲染模板完成后執(zhí)行
$timeout(function(){
// 初始化參數(shù)
_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);
// 監(jiān)聽(tīng)日期最大值
if(attr.hasOwnProperty('maxDate')){
attr.$observe('maxDate', function (val) {
_config.max = val;
})
}
// 監(jiān)聽(tīng)日期最小值
if(attr.hasOwnProperty('minDate')){
attr.$observe('minDate', function (val) {
_config.min = val;
})
}
// 模型值同步到視圖上
ngModel.$render = function() {
element.val(ngModel.$viewValue || '');
};
// 監(jiān)聽(tīng)元素上的事件
element.on('blur keyup change', function() {
scope.$apply(setViewValue);
});
setViewValue();
// 更新模型上的視圖值
function setViewValue() {
var val = element.val();
ngModel.$setViewValue(val);
}
},0);
}
};
})
OK，問(wèn)題解決。解決問(wèn)題的過(guò)程伴隨著查資料的過(guò)程，是一步步完善的。也希望大家在遇到同樣的問(wèn)題時(shí)少走彎路
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- layDate插件設(shè)置開(kāi)始和結(jié)束時(shí)間
- layDate日期控件使用方法詳解
- laydate時(shí)間日歷插件使用方法詳解
- vue使用laydate時(shí)間插件的方法
- 詳解easyui基于 layui.laydate日期擴(kuò)展組件
- 關(guān)于laydate.js加載laydate.css路徑錯(cuò)誤問(wèn)題解決
- Angular4.0中引入laydate.js日期插件的方法教程
- laydate日歷控件使用方法詳解
- laydate 顯示結(jié)束時(shí)間不小于開(kāi)始時(shí)間的實(shí)例
- Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法
- laydate.js日期時(shí)間選擇插件
- bootstrap laydate日期組件使用詳解
- Laydate時(shí)間組件在火狐瀏覽器下有多時(shí)間輸入框時(shí)只能給第一個(gè)輸入框賦值的解決方法
- laydate如何根據(jù)開(kāi)始時(shí)間或者結(jié)束時(shí)間限制范圍
相關(guān)文章
angular 服務(wù)的單例模式(依賴(lài)注入模式下)詳解
這篇文章主要介紹了angular 服務(wù)的單例模式(依賴(lài)注入模式下)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法
這篇文章主要介紹了AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了AngularJS自定義指令實(shí)現(xiàn)復(fù)制功能的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
Angular使用$http.jsonp發(fā)送跨站請(qǐng)求的方法
這篇文章主要介紹了Angular使用$http.jsonp發(fā)送跨站請(qǐng)求的方法,結(jié)合實(shí)例形式分析了$http.jsonp發(fā)送跨站請(qǐng)求遇到的問(wèn)題與相應(yīng)的解決方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03
Angular應(yīng)用prerender預(yù)渲染提高頁(yè)面加載速度
這篇文章主要介紹了Angular應(yīng)用prerender預(yù)渲染提高頁(yè)面加載速度,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
AngularJS入門(mén)教程之ng-class 指令用法
本文主要介紹AngularJS ng-class 指令,這里幫大家整理了ng-class資料和示例代碼,學(xué)習(xí)AngularJS指令的同學(xué)可以參考下2016-08-08
AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法,結(jié)合實(shí)例形式分析了AngularJS動(dòng)態(tài)生成元素與事件綁定相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
這篇文章主要幫助大家學(xué)習(xí)使用AngularJS文件上傳控件angular-file-upload，感興趣的小伙伴們可以參考一下2016-02-02
淺談Angular.js中使用$watch監(jiān)聽(tīng)模型變化
當(dāng)angular數(shù)據(jù)模型發(fā)生變化時(shí)，我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。本篇文章主要介紹了Angular.js中使用$watch監(jiān)聽(tīng)模型變化，有興趣的可以了解一下2017-01-01
這篇文章主要為大家詳細(xì)介紹了AngularJS 避繁就簡(jiǎn)的路由的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-07