Skip to content

Instantly share code, notes, and snippets.

@carlok carlok/kcalendar.html
Last active Jan 11, 2017

Embed
What would you like to do?
Angular 1.5 component wrapper of Datepicker Popup (AngularUI/Bootstrap) - Demo
<!doctype html>
<html ng-app="kcalendarApp">
<head>
<link rel="stylesheet" href="./css/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="./js/jquery-2.1.3.js"></script>
<script src="./js/angular-1.5.0/angular.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/ui-bootstrap-tpls-2.4.0.min.js"></script>
</head>
<body>
<div class="container" ng-controller="kcalendarCtrl">
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-md-4">
<kcalendar-component mydateformat="dd/MM/yyyy"></kcalendar-component>
</div>
</div>
</div>
<script type="text/javascript">
angular.module('kcalendarApp', ['ui.bootstrap'])
.controller('kcalendarCtrl', function() {
})
.component('kcalendarComponent', {
/*
REFERENCE
- https://angular-ui.github.io/bootstrap/#/datepickerPopup
- https://scotch.io/tutorials/how-to-use-angular-1-5s-component-method
*/
// isolated scope binding
bindings: {
mydateformat: '@'
},
// Inline template which is binded to message variable
// in the component controller
template: '<p class="input-group"><input type="text" class="form-control" uib-datepicker-popup="{{$ctrl.format}}" ng-model="$ctrl.dt" ng-click="$ctrl.open1()" is-open="$ctrl.popup1.opened" datepicker-options="$ctrl.dateOptions" ng-required="true" close-text="Close" readonly="readonly"/></p>',
// The controller that handles our component logic
controller: function() {
this.clear = function() {
this.dt = null;
};
this.open1 = function() {
this.popup1.opened = true;
};
this.setDate = function(year, month, day) {
this.dt = new Date(year, month, day);
};
this.today = function() {
this.dt = new Date();
};
this.toggleMin = function() {
this.inlineOptions.minDate = this.inlineOptions.minDate ? null : new Date();
this.dateOptions.minDate = this.inlineOptions.minDate;
};
this.dateOptions = {
dateDisabled: disabled,
formatYear: 'yy',
maxDate: new Date(2028, 12, 31),
minDate: new Date(),
startingDay: 1
};
this.inlineOptions = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: true
};
// Disable weekend selection
function disabled(data) {
var date = data.date,
mode = data.mode;
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
}
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0, 0, 0, 0);
for (var i = 0; i < this.events.length; i++) {
var currentDay = new Date(this.events[i].date).setHours(0, 0, 0, 0);
if (dayToCheck === currentDay) {
return this.events[i].status;
}
}
}
return '';
}
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
this.events = [{
date: tomorrow,
status: 'full'
}, {
date: afterTomorrow,
status: 'partially'
}];
this.format = this.mydateformat || 'dd/MM/yyyy';
this.popup1 = {
opened: false
};
this.today();
this.toggleMin();
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.