1
ermöglichen spezifische Daten in AngularJS picker ui Bootstrap
var myApp= angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ui.bootstrap.dateparser', 'ui.bootstrap.datepicker']);
myApp.controller('DatepickerDemoCtrl', function($scope, $http) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function() {
$scope.dt = null;
};
$scope.inlineOptions = {
minDate: new Date(),
showWeeks: false
};
$scope.dateOptions = {
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
// Disable weekend selection
function disabledasda(data) {
var date = data.date,
mode = data.mode;
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
}
$scope.toggleMin = function() {
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
};
$scope.toggleMin();
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.setDate = function(year, month, day) {
$scope.dt = new Date(year, month, day);
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.popup1 = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
$scope.disabled = function(date, mode){
$scope.holidays = [
new Date(2016,2,14),
new Date(2016,2,15),
new Date(2016,2,16),
\t \t \t \t new Date()
]
var isHoliday = true;
for(var i = 0; i < $scope.holidays.length ; i++) {
if(areDatesEqual($scope.holidays[i], date)){
isHoliday = false;
}
}
return (mode === 'day' && isHoliday);
};
\t \t \t
\t \t \t
function areDatesEqual(date1, date2) {
return date1.setHours(0,0,0,0) === date2.setHours(0,0,0,0)
}
$scope.dayClass = function(date, mode) {
var appointments = [
new Date(2016,2,3),
new Date(2016,2,8),
new Date(2016,2,22),
]
if (mode === 'day') {
var dateToCheck = new Date(date);
for(var i = 0; i < appointments.length ; i++) {
if(areDatesEqual(appointments[i], dateToCheck)){
return 'appointment';
}
}
}
return '';
};
$scope.dateSelected = function(){
var appointments = [
new Date(2016,2,3),
new Date(2016,2,8),
new Date(2016,2,22),
];
var dateSelected = new Date($scope.dt);
for(var i = 0; i < appointments.length ; i++) {
if(areDatesEqual(appointments[i], dateSelected)){
performAction();
}
}
};
function performAction(){
alert("Appointment date selected");
}
$scope.dtmax = new Date();
}); .full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
.appointment>button {
color: white;
background-color: red;
}<head>
<title>datePicker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<script src="./datePicker.js"></script>
</head>
<body ng-app="ui.bootstrap.demo" >
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{dateformat}}" ng-model="dt" ng-change="dateSelected()"is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" custom-class="dayClass(date, mode)" max-date="dtmax" min-date="dtmax" date-disabled="disabled(date, mode)"/>
<span class="input-group-btn">
\t \t \t
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</body>siteDatePicker.js:
var myApp= angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ui.bootstrap.dateparser', 'ui.bootstrap.datepicker']);
myApp.controller('DatepickerDemoCtrl', function($scope, $http) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function() {
$scope.dt = null;
};
$scope.inlineOptions = {
minDate: new Date(),
showWeeks: false
};
$scope.dateOptions = {
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
// Disable weekend selection
function disabledasda(data) {
var date = data.date,
mode = data.mode;
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
}
$scope.toggleMin = function() {
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
};
$scope.toggleMin();
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.setDate = function(year, month, day) {
$scope.dt = new Date(year, month, day);
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.popup1 = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
$scope.disabled = function(date, mode){
$scope.holidays = [
new Date(2016,2,14),
new Date(2016,2,15),
new Date(2016,2,16),
new Date()
]
var isHoliday = true;
for(var i = 0; i < $scope.holidays.length ; i++) {
if(areDatesEqual($scope.holidays[i], date)){
isHoliday = false;
}
}
return (mode === 'day' && isHoliday);
};
function areDatesEqual(date1, date2) {
return date1.setHours(0,0,0,0) === date2.setHours(0,0,0,0)
}
$scope.dayClass = function(date, mode) {
var appointments = [
new Date(2016,2,3),
new Date(2016,2,8),
new Date(2016,2,22),
]
if (mode === 'day') {
var dateToCheck = new Date(date);
for(var i = 0; i < appointments.length ; i++) {
if(areDatesEqual(appointments[i], dateToCheck)){
return 'appointment';
}
}
}
return '';
};
$scope.dateSelected = function(){
var appointments = [
new Date(2016,2,3),
new Date(2016,2,8),
new Date(2016,2,22),
];
var dateSelected = new Date($scope.dt);
for(var i = 0; i < appointments.length ; i++) {
if(areDatesEqual(appointments[i], dateSelected)){
performAction();
}
}
};
function performAction(){
alert("Appointment date selected");
}
$scope.dtmax = new Date();
});
siteDatePicker.html:
<html>
<head>
<title>Typehead</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<script src="./siteDatePicker.js"></script>
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
.appointment>button {
color: white;
background-color: red;
}
</style>
</head>
<body ng-app="ui.bootstrap.demo" >
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{dateformat}}" ng-model="dt" ng-change="dateSelected()"is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" custom-class="dayClass(date, mode)" max-date="dtmax" min-date="dtmax" date-disabled="disabled(date, mode)"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</body>
</html>
die oben führt Folgendes aus: 1) deaktiviert alle Daten im Kalender 2) versucht, die Daten zu aktivieren, die ich in Ferien-Array in siteDatePicker.js
freigegeben habe, was passiert ist, dass die Daten nicht aktiviert werden, weil ich max-date und min-date-Direktiven denke (Eingabe-Tag in HTML-Seite überprüfen) Die Daten können nicht aktiviert werden, da diese Daten, die ich zur Verfügung stelle, in dieser minimalen bis maximalen Reichweite liegen!
Was kann ich tun, um diese Daten zu aktivieren? jede Hilfe wäre willkommen!