Please find below my custom directive and html
Directive:
angular.module('myModule')
.directive('myDatepicker', function () {
return {
restrict: 'E',
replace: true,
controller: DatePickerController,
controllerAs: 'vm',
scope: {
dt: '=',
datestyle: '@',
datepickermode: '@',
minmode: '@',
mindate: '=',
maxdate: '='
},
link: function (scope, $scope, $element) {
},
templateUrl: './datepicker.html'
};
})
.controller('DatePickerController', DatePickerController);
DatePickerController.$inject = ['$scope'];
function DatePickerController($scope) {
var vm = this;
if ($scope.datepickermode) {
vm.DatepickerMode = $scope.datepickermode;
} else {
vm.DatepickerMode = 'day';
}
if ($scope.minmode) {
vm.MinMode = $scope.minmode;
} else {
vm.MinMode = 'day';
}
if ($scope.mindate) {
vm.MinDate = new Date($scope.mindate);
} else {
vm.MinDate = new Date('1000/01/01');
}
if ($scope.maxdate) {
vm.MaxDate = new Date($scope.maxdate);
} else {
vm.MaxDate = new Date('9999/12/31');
}
vm.dateOptions = {
datepickerMode: vm.DatepickerMode,
minMode: vm.MinMode,
minDate: vm.MinDate,
maxDate: vm.MaxDate
};
vm.openCalendar = function () {
if (!$scope.dt) {
$scope.dt = new Date(Date.now());
}
vm.dateOptions = {
datepickerMode: vm.DatepickerMode,
minMode: vm.MinMode,
minDate: vm.MinDate,
maxDate: vm.MaxDate
};
vm.popupCalendar.opened = true;
};
vm.popupCalendar = {
opened: false
};
vm.changeValue = function () {
vm.popupCalendar.opened = true;
};
vm.prev = function () {
refreshDate(-1);
};
vm.next = function () {
refreshDate(1);
};
function refreshDate(cnt) {
var buf = new Date($scope.dt);
var bufDate = buf.getDate();
var bufMonth = buf.getMonth();
var bufYear = buf.getFullYear();
var changeDate;
switch (vm.MinMode) {
case 'day':
bufDate = bufDate + cnt;
changeDate = new Date(bufYear, bufMonth, bufDate);
break;
case 'month':
bufMonth = bufMonth + cnt;
changeDate = new Date(bufYear, bufMonth, '01');
break;
case 'year':
bufYear = bufYear + cnt;
changeDate = new Date(bufYear, 0, 1);
break;
}
if (changeDate >= vm.MinDate && changeDate <= vm.MaxDate) {
$scope.dt = changeDate;
}
}
}
Please place your respective code in datepicker.html used in the templateUrl of the directive to display the control as per your needs
My sample datepicker.html:
<a type="button" class="btn btn-default btn-black btn-sm" name="day-before" ng-click="vm.prev()"><i class="fa fa-caret-left"></i></a>
<input type="text" uib-datepicker-popup="{{datestyle}}" ng-model="dt" class="btn btn-default btn-black btn-sm datetime-change input-day"
is-open="vm.popupCalendar.opened" ng-required="true" ng-click="vm.openCalendar()"
datepicker-options="vm.dateOptions" show-button-bar="false" show-weeks="false" close-on-date-selection="true" readonly />
<a type="button" class="btn btn-default btn-black btn-sm" name="day-after" ng-click="vm.next()"><i class="fa fa-caret-right"></i></a>
My Html in the final file where i am using the contorl :
<my-datepicker dt="vm.requestDate" //bind this to your controller
datepickermode="month"
minmode="month"
datestyle="yyyy/MM"
mindate="vm.MinDate" maxdate="vm.MaxDate"/>
On the click of the previous and next arrows, month decrements and increments respectively
