禁用日历加载时的所有日期，并在angularjs中启用特定日期(仅datePicker而不是dateTimePicker) [英] disable all dates on load of calendar and enable specific dates in angularjs (only datePicker and not dateTimePicker)
本文介绍了禁用日历加载时的所有日期，并在angularjs中启用特定日期(仅datePicker而不是dateTimePicker)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
siteDatePicker.html:
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="{{format}}" ng-model="dt" ng-change="dateSelected()"is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" date-disabled="disabled(date, mode)" custom-class="dayClass(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>
siteDatePicker.js:
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.holidays=[];
$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),
]
var isHoliday = false;
for(var i = 0; i < $scope.holidays.length ; i++) {
if(areDatesEqual($scope.holidays[i], date)){
isHoliday = true;
}
}
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.holidays.push(new Date(2016,2,14));
$scope.disabled(date,mode);
}
});
以上是我尝试过的...我尝试在假期数组中推送新日期，其中日期被禁用...它是在performaction函数中完成的.....
above is what i tried...i tried pushing new dates in in holidays array where dates are disabled...its done in the performaction function.....
首先，我想首先加载所有日期都被禁用的日历，然后我必须启用我选择的特定日期....
firstly i want to load the calendar with all dates disabled at first and than i have to be able to enabled specific dates of my choice....
在加载日历并启用了特定日期之后，我想在单击任何启用日期后启用更多日期.
secondly after tha calendar has loaded and the specific dates have been enabled, i want to enable more dates on click of any of the enabled dates.
示例:加载日历后，所有日期均被禁用加载日历后启用27-03-2016点击2016年3月27日，即可启用2016年3月28日
example: all dates are disabled when calendar is loaded 27-03-2016 is enabled when calendar is loaded on click of 27-03-2016, it enables 28-03-2016
请注意:我想禁用所有日期，而不是禁用日期选择器.
please note: i want to disables ALL DATES and not to disable datepicker.
任何帮助将不胜感激！
推荐答案
这是有需要的人的完整答案:(我想感谢@Sergio Marron的所有帮助)
here is the complete answer for those in need: (id like to thank @Sergio Marron for all his help)
siteDatePicker.js:
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 = false;
for(var i = 0; i < $scope.holidays.length ; i++) {
if(areDatesEqual($scope.holidays[i], date)){
isHoliday = true;
}
}
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:
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="{{format}}" ng-model="dt" ng-change="dateSelected()"is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" date-disabled="disabled(date, mode)" custom-class="dayClass(date, mode)" max-date="dtmax" min-date="dtmax"/>
<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>
向所有帮助之手...谢谢！特别提及avesh Naik和Nazeef Shaikh！
to all the helping hands...thank you! special mention to avesh Naik and Nazeef Shaikh!
这篇关于禁用日历加载时的所有日期，并在angularjs中启用特定日期(仅datePicker而不是dateTimePicker)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
