基于datetimepicker封裝的dateRange指令
1.需要npm引入
npm install angular-bootstrap-datetimepicker --save
2.加载:module
angular.module('app', [ui.bootstrap.datetimepicker])3.JS:
angular.module('app').directive('dateRange', function() {
return {
restrict : 'EA',
replace: true,
scope: {
startDate: '=',
endDate: '=',
startId: '@',
endId: '@'
},
template : '<div class="date-box-vms">' +
'<div class="dropdown">' +
'<a class="dropdown-toggle" id="{{startId}}" role="button" data-toggle="dropdown" data-target="#" href="#">' +
'<div class="input-append date input-group">' +
'<span class="add-on"><i class="icon-th"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/styles/img/icon/icon_cal.png" alt=""></i></span>' +
'<input type="text" class="date-style" data-ng-model="startDate" placeholder="{{\'START_TIME\' | translate}}">' +
'</div>' +
'</a>' +
'<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">' +
'<div>' +
'<datetimepicker data-ng-model="startDate"' +
'data-datetimepicker-config="{ dropdownSelector: \'#\'+startId, renderOn: \'end-date-changed\' ,minView:\'day\',modelType: \'YYYY-MM-DD\'}"' +
'data-on-set-time="startDateOnSetTime()"' +
'data-before-render="startDateBeforeRender($view, $dates)"/>' +
'</div>' +
'<div>' +
'<button class="btn btn-default-vms" ng-click="startToday()">{{ \'BTN_TODAY\' | translate }}</button>' +
'<button class="btn btn-default-vms" ng-click="clearStartDate()">{{ \'BTN_CLEAR\' | translate }}</button>' +
'</div>' +
'</ul>' +
'</div>' +
'<span><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="styles/img/icon/xian.png" alt=""></span>' +
'<div class="dropdown">' +
'<a class="dropdown-toggle" id="{{endId}}" role="button" data-toggle="dropdown" data-target="#" href="#">' +
'<div class="input-append date input-group">' +
'<span class="add-on"><i class="icon-th"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/styles/img/icon/icon_cal.png" alt=""></i></span>' +
'<input type="text" class="date-style" data-ng-model="endDate" placeholder="{{\'END_TIME\' | translate}}">' +
'</div>' +
'</a>' +
'<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">' +
'<div>' +
'<datetimepicker data-ng-model="endDate"' +
'data-datetimepicker-config="{ dropdownSelector: \'#\'+endId, renderOn: \'start-date-changed\',minView:\'day\',modelType: \'YYYY-MM-DD\'}"' +
'data-on-set-time="endDateOnSetTime()"' +
'data-before-render="endDateBeforeRender($view, $dates, $leftDate, $upDate, $rightDate)">' +
'</div>' +
'<div>' +
'<button class="btn btn-default-vms" ng-click="endToday()">{{ \'BTN_TODAY\' | translate }}</button>' +
'<button class="btn btn-default-vms" ng-click="clearEndDate()">{{ \'BTN_CLEAR\' | translate }}</button>' +
'</div>' +
'</ul>' +
'</div>' +
'</div>',
controller : function($scope) {
//时间组件
$scope.endDateBeforeRender = endDateBeforeRender;
$scope.endDateOnSetTime = endDateOnSetTime;
$scope.startDateBeforeRender = startDateBeforeRender;
$scope.startDateOnSetTime = startDateOnSetTime;
$scope.startToday = startToday;
$scope.endToday = endToday;
$scope.clearStartDate = clearStartDate;
$scope.clearEndDate = clearEndDate;
$scope.nowDate = moment(new Date).format('YYYY-MM-DD');
$scope.endId = _.isEmpty($scope.endId)? 'endTime':$scope.endId;
$scope.startId = _.isEmpty($scope.startId)? 'startTime':$scope.startId;
function startDateOnSetTime () {
$scope.$broadcast('start-date-changed');
}
function endDateOnSetTime () {
$scope.$broadcast('end-date-changed');
}
function startDateBeforeRender ($view, $dates) {
if ($scope.endDate) {
let activeDate = moment($scope.endDate).add(1, $view).subtract(1, 'minute');
$dates.filter(function (date) {
return date.localDateValue() >= activeDate.valueOf()
}).forEach(function (date) {
date.selectable = false;
})
}
}
function endDateBeforeRender ($view, $dates) {
if ($scope.startDate) {
let activeDate = moment($scope.startDate).subtract(1, $view).add(1, 'minute');
$dates.filter(function (date) {
return date.localDateValue() <= activeDate.valueOf()
}).forEach(function (date) {
date.selectable = false;
})
}
}
function startToday (){
$scope.startDate = $scope.nowDate;
$scope.$broadcast('start-date-changed');
}
function endToday (){
$scope.endDate = $scope.nowDate;
$scope.$broadcast('end-date-changed');
}
function clearStartDate (){
$scope.startDate ='';
$scope.$broadcast('start-date-changed');
}
function clearEndDate (){
$scope.endDate ='';
$scope.$broadcast('end-date-changed');
}
}
}
});4.HTML:
<div ng-controller="myCtrl as $ctrl"> <date-range start-id="expectStart" end-id="expectEnd" start-date="$ctrl.startTime" end-date="$ctrl.endTime"></date-range> </div>
引入id是为了区分组件，否则同一组件在同一页面，会出问题。可以试一下~
同理，单个时间控件可以是这样的写：
angular.module('app').directive('dateChose', function() {
return {
restrict : 'EA',
replace: true,
scope: {
date: '=',
id:'@',
required:'='
},
template : '<div class="date-box-vms">' +
'<div class="dropdown">' +
'<a class="dropdown-toggle" id="time_{{id}}" role="button" data-toggle="dropdown" data-target="#" href="#">' +
'<div class="input-append date input-group">' +
'<span class="add-on"><i class="icon-th"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="styles/img/icon/icon_cal.png" alt=""></i></span>' +
'<input type="text" class="date-style" data-ng-model="date" ng-required="required">' +
'</div>' +
'</a>' +
'<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">' +
'<div>' +
'<datetimepicker ng-model="date"' +
'datetimepicker-config="{ dropdownSelector: \'#time_\' + id,minView:\'day\',modelType: \'YYYY-MM-DD\'}"/>' +
'</div>' +
'<div>' +
'<button class="btn btn-default-vms" ng-click="Today()">{{ \'TODAY\' | translate }}</button>' +
'<button class="btn btn-default-vms" ng-click="clearDate()">{{ \'BTN_CLEAR\' | translate }}</button>' +
'</div>' +
'</ul>' +
'</div>' +
'</div>',
controller : function($scope) {
//时间组件
$scope.Today = Today;
$scope.clearDate = clearDate;
$scope.nowDate = moment(new Date).format('YYYY-MM-DD');
function Today (){
$scope.date = $scope.nowDate;
}
function clearDate (){
$scope.date ='';
}
}
}
})<date-chose date="$ctrl.time" required="true"></date-chose>
點(diǎn)擊查看更多內(nèi)容
4人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)