禁用angularjs（仅日期选择器而不是dateTimePicker的）具体的单日期和多日期 [英] disable specific single date and multiple dates in angularjs (only datePicker and not dateTimePicker)
本文介绍了禁用angularjs（仅日期选择器而不是dateTimePicker的）具体的单日期和多日期的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在AngularJS的日期选取器禁用特定的日期。
我使用AngularJS，引导CSS的组件（角指令）。（ui.bootstrap.datepicker）
我是使用下面的code：
datePicker.html：
＆LT;标题＆GT; Typehead＆LT; /标题＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1＆GT;
＆LT;链接rel =stylesheet属性HREF =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css/＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js\"></script>
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js\"></script>
＆LT;脚本SRC =./ UI的引导，第三方物流企业，1.2.1.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =./ datePicker.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT; ＆LT;机身NG-应用=ui.bootstrap.demo＆GT; ＆LT;风格＆GT;
。全键跨度{
背景色：暗绿;
边界半径：32PX;
颜色：黑色;
}
.partially按钮跨度{
背景色：橙色;
边界半径：32PX;
颜色：黑色;
}
＆LT; /风格＆GT;
＆LT; DIV NG控制器=DatepickerDemoCtrl＆GT;
＆LT; pre＆GT;选定的日期为：＆LT;环境监察及GT; {{DT |日期：'fullDate'}}＆LT; / EM＆GT;＆LT; / pre＆GT; ＆LT; H4＆GT;内联＆LT; / H4＆GT;
＆LT; DIV的风格=显示：inline-block的;最小高度：290px;＆GT;
＆LT; UIB-NG日期选择器模型=DT级=喏喏-SM日期选择器选项=inlineOptions＆GT;＆LT; / UIB-日期选择器＆GT;
＆LT; / DIV＆GT; ＆LT; H4＆GT;＆弹出LT; / H4＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-6＆GT;
＆LT; p =类输入组＆GT;
＆LT;输入类型=文本级=表格控UIB-日期选择器，弹出={{格式}}NG模型=DT是开=popup1.opened日期选择器选项=dateOptions NG-所需=真密文=关闭ALT-输入格式=altInputFormats/＆GT;
＆LT;跨度类=输入组BTN＆GT;
＆LT;按钮式=按钮级=BTN BTN-默认的NG点击=open1（）＆GT;＆LT; I类=glyphicon glyphicon日历＆GT;＆LT; / I＆GT;＆LT; /按钮＆GT;
＆LT; / SPAN＆GT;
＆所述; / P＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =COL-MD-6＆GT;
＆LT; p =类输入组＆GT;
＆LT;输入类型=文本级=表格控UIB-日期选择器，弹出={{格式}}NG模型=DT是开=popup3.opened日期选择器选项=dateOptions NG-所需=真密文=关闭ALT-输入格式=altInputFormats/＆GT;
＆LT;跨度类=输入组BTN＆GT;
＆LT;按钮式=按钮级=BTN BTN-默认的NG点击=open3（）＆GT;＆LT; I类=glyphicon glyphicon日历＆GT;＆LT; / I＆GT;＆LT; /按钮＆GT;
＆LT; / SPAN＆GT;
＆所述; / P＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =COL-MD-6＆GT;
＆LT; p =类输入组＆GT;
＆LT;输入类型=文本级=表格控UIB-日期选择器，弹出NG模型=DT是开=popup2.opened日期选择器选项=dateOptionsNG-所需=真密文=关闭/＆GT;
＆LT;跨度类=输入组BTN＆GT;
＆LT;按钮式=按钮级=BTN BTN-默认的NG点击=open2（）＆GT;＆LT; I类=glyphicon glyphicon日历＆GT;＆LT; / I＆GT;＆LT; /按钮＆GT;
＆LT; / SPAN＆GT;
＆所述; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-6＆GT;
＆LT;标签＆gt;格式：＆LT;跨度类=静音文本＆GT;（手动备用＆LT; EM＆GT; {{altInputFormats [0]}}＆LT; / EM＆GT;）＆LT; / SPAN＆GT;＆LT; /标签＆gt; ＆LT;选择类=表格控NG模型=格式NG选项=F对于f的格式＆GT;＆LT;选项＆GT;＆LT; /选项＆GT;＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;小时/＆GT;
＆LT;按钮式=按钮级=BTN BTN-SM BTN-INFONG点击=TODAY（）＆GT;今天＆LT; /按钮＆GT;
＆LT;按钮式=按钮级=BTN BTN-SM BTN-默认的NG点击=的setDate（2009，7，24）＆GT;＆2009-08-24 LT; /按钮＆GT;
＆LT;按钮式=按钮级=BTN BTN-SM BTN-危险NG点击=清除（）＆GT;清除＆LT; /按钮＆GT;
＆LT;按钮式=按钮级=BTN BTN-SM BTN-默认的NG点击=toggleMin（）UIB-提示=＆GT今天的限制后，闽日期＆LT; /按钮＆GT;
＆LT; / DIV＆GT; ＆LT; /身体GT;
datePicker.js：
VAR对myApp = angular.module（'ui.bootstrap.demo'，['ngAnimate'，'ui.bootstrap'，'ui.bootstrap.dateparser'，'ui.bootstrap .datepicker']）; myApp.controller（'DatepickerDemoCtrl'，函数（$范围，$ HTTP）{ $ scope.today =功能（）{
$ scope.dt =新的日期（）;
};
$ scope.today（）; $ scope.clear =功能（）{
$ scope.dt = NULL;
}; $ scope.inlineOptions = {
customClass：getDayClass，
MINDATE：新的Date（）
showWeeks：假的
}; $ scope.dateOptions = {
dateDisabled：禁用，
formatYear：'YY'，
MAXDATE：新的日期（2020，5，22）
MINDATE：新的Date（）
startingDay：1
}; //禁用周末选择
功能无效（数据）{
VAR日期= data.date，
模式= data.mode;
返回模式==='天'和;＆安培; （date.getDay（）=== 0 || date.getDay（）=== 6）;
} $ scope.toggleMin =功能（）{
$ scope.inlineOptions.minDate = $ scope.inlineOptions.minDate？空：新的Date（）;
$ scope.dateOptions.minDate = $ scope.inlineOptions.minDate;
}; $ scope.toggleMin（）; $ scope.open1 =功能（）{
$ scope.popup1.opened = TRUE;
}; $ scope.open2 =功能（）{
$ scope.popup2.opened = TRUE;
}; $ scope.open3 =功能（）{
$ scope.popup3.opened = TRUE;
}; $ scope.setDate =功能（年，月，日）{
$ scope.dt =新的日期（年，月，日）;
}; $ scope.formats = ['DD-MMMM-YYYY'，'YYYY / MM / DD'，'DD.MM.YYYY'，'shortDate'];
$ scope.format = $ scope.formats [0];
$ scope.altInputFormats = ['！M / D / YYYY！']; $ scope.popup1 = {
打开：假的
}; $ scope.popup2 = {
打开：假的
}; $ scope.popup3 = {
打开：假的
}; VAR明天=新的日期（）;
tomorrow.setDate（tomorrow.getDate（）+ 1）;
VAR afterTomorrow =新的日期（）;
afterTomorrow.setDate（tomorrow.getDate（）+ 1）;
$ scope.events = [
{
日期：明天，
状态：'全'
}，
{
日期：afterTomorrow，
状态：'部分'
}
]; 功能getDayClass（数据）{
VAR日期= data.date，
模式= data.mode;
如果（模式==='天'）{
VAR dayToCheck =新的日期（日期）.setHours（0,0,0,0）; 对于（VAR I = 0; I＆LT; $ scope.events.length;我++）{
VAR CURRENTDAY =新的日期（$ scope.events [I] .date）.setHours（0,0,0,0）; 如果（dayToCheck === CURRENTDAY）{
返回$ scope.events [I] .STATUS;
}
}
} 返回'';
} }）;
文件给我：
dateDisabled（日期模式） - 一个可选的前pression禁用基于传递日期和当前模式下不可见选项
我想漫长而艰难的使用它，但浪费了5小时就可以了。我确定的解决方案是simple.Can任何具有以下帮助：
1.How我用它来禁用单个日期
2.停用多个日期从数组过去了！
与工作的例子任何帮助将是AP preciated！
解决方案
关联的日期残疾人属性有两个参数在你的范围内这样的功能：
＆LT;输入类型=文本级=表格控UIB-日期选择器，弹出={{格式}}约会禁用=禁用（日期，模式）/＆GT; ＆LT;！ - 为清楚起见删除其他属性 - ＆GT;
这函数将被要求在日历上所有可见的日期。所以，你需要核对您希望禁用的日期通过的日期。例如，该功能在下面将禁用日期：
2016年3月14日，2016年3月15日和2016年3月16日的
$ scope.disabled =功能（日期模式）{ VAR节假日= [
新的Date（2016,2,14）
新的Date（2016,2,15）
新的Date（2016,2,16）
] VAR isHoliday = FALSE;
对于（VAR I = 0; I＆LT; holidays.length;我++）{
如果（areDatesEqual（节假日[I]，日期））{
isHoliday = TRUE;
}
} 回报（模式==='天'和;＆安培; isHoliday）;
}; 功能areDatesEqual（DATE1，DATE2）{ 返回date1.setHours（0,0,0,0）=== date2.setHours（0,0,0,0） }
更新：
要更改类特定日期的使用自定义-class属性：
＆LT;输入类型=文本级=表格控UIB-日期选择器，弹出={{格式}}约会禁用=禁用（日期，模式）定制级=dayClass（日期模式）/＆GT;
在 dayClass 函数将被用于所有可见的日期，并返回要添加到该元素的CSS类。例如，下面的功能将添加类的预约应用于约会阵列上的日期
$ scope.dayClass =功能（日期模式）{ VAR任命= [
新的Date（2016,2,3）
新的Date（2016,2,8）
新的Date（2016,2,22）
] 如果（模式==='天'）{ VAR dateToCheck =新的日期（日期）; 对于（VAR I = 0; I＆LT; appointments.length;我++）{
如果（areDatesEqual（约会[I]，dateToCheck））{
回报预约;
}
}
}
返回'';
}
然后你需要添加一些风格，这样的事情：
.appointment＆GT;按钮{
颜色：白色;
背景色：红色;
}
更新2
要执行特定日期的操作，您可以使用的 NG-变化的和以前按照同样的方法，也可能是这样的：
＆LT;输入类型=文本级=表格控UIB-日期选择器，弹出={{格式}}NG模型=DTNG-变化=dateSelected（）/＆GT; ＆LT;！ - 为清楚起见删除其他属性 - ＆GT;
在您的控制器：
$ scope.dateSelected =功能（）{VAR任命= [
新的Date（2016,2,3）
新的Date（2016,2,8）
新的Date（2016,2,22）
];VAR dateSelected =新的日期（$ scope.dt）;对于（VAR I = 0; I＆LT; appointments.length;我++）{
如果（areDatesEqual（约会[I]，dateSelected））{
的performAction（）;
}
}};功能的performAction（）{
警报（预约日期选定）;
}
下面一个完整的例子：
\r
\r\r
\r VAR对myApp = angular.module（'ui.bootstrap.demo'，[' ngAnimate'，'ui.bootstrap'，'ui.bootstrap.dateparser'，'ui.bootstrap.datepicker']）;\r
\r
\r
\r
myApp.controller（'DatepickerDemoCtrl'，函数（$范围，$ HTTP）{\r
\r
\r
\r
$ scope.today =功能（）{\r
$ scope.dt =新的日期（）;\r
};\r
$ scope.today（）;\r
\r
$ scope.clear =功能（）{\r
$ scope.dt = NULL;\r
};\r
\r
$ scope.inlineOptions = {\r
MINDATE：新的Date（）\r
showWeeks：假的\r
};\r
\r
$ scope.dateOptions = {\r
formatYear：'YY'，\r
MAXDATE：新的日期（2020，5，22）\r
MINDATE：新的Date（）\r
startingDay：1\r
};\r
\r
//禁用周末选择\r
功能disabledasda（数据）{\r
VAR日期= data.date，\r
模式= data.mode;\r
返回模式==='天'和;＆安培; （date.getDay（）=== 0 || date.getDay（）=== 6）;\r
}\r
\r
$ scope.toggleMin =功能（）{\r
$ scope.inlineOptions.minDate = $ scope.inlineOptions.minDate？空：新的Date（）;\r
$ scope.dateOptions.minDate = $ scope.inlineOptions.minDate;\r
};\r
\r
$ scope.toggleMin（）;\r
\r
$ scope.open1 =功能（）{\r
$ scope.popup1.opened = TRUE;\r
};\r
\r
\r
$ scope.setDate =功能（年，月，日）{\r
$ scope.dt =新的日期（年，月，日）;\r
};\r
\r
$ scope.formats = ['DD-MMMM-YYYY'，'YYYY / MM / DD'，'DD.MM.YYYY'，'shortDate'];\r
$ scope.format = $ scope.formats [0];\r
$ scope.altInputFormats = ['！M / D / YYYY！'];\r
\r
$ scope.popup1 = {\r
打开：假的\r
};\r
\r
\r
VAR今天=新的Date（）;\r
\r
$ scope.holidays = [\r
新的日期（today.getFullYear（），today.getMonth（），14）\r
新的日期（today.getFullYear（），today.getMonth（），15）\r
新的日期（today.getFullYear（），today.getMonth（），16）\r
]\r
\r
$ scope.appointments = [\r
新的日期（today.getFullYear（），today.getMonth（），3）\r
新的日期（today.getFullYear（），today.getMonth（），7）\r
新的日期（today.getFullYear（），today.getMonth（），20）\r
]\r
$ scope.disabled =功能（日期模式）{\r
\r
VAR isHoliday = FALSE;\r
对于（VAR I = 0; I＆LT; $ scope.holidays.length;我++）{\r
如果（areDatesEqual（$ scope.holidays [I]中，日期））{\r
isHoliday = TRUE;\r
}\r
}\r
\r
回报（模式==='天'和;＆安培; isHoliday）;\r
};\r
\r
功能areDatesEqual（DATE1，DATE2）{\r
\r
返回date1.setHours（0,0,0,0）=== date2.setHours（0,0,0,0）\r
\r
}\r
\r
$ scope.dayClass =功能（日期模式）{\r
\r
如果（模式==='天'）{\r
\r
VAR dateToCheck =新的日期（日期）;\r
\r
对于（VAR I = 0; I＆LT; $ scope.appointments.length;我++）{\r
如果（areDatesEqual（$ scope.appointments [I]，dateToCheck））{\r
回报预约;\r
}\r
}\r
}\r
返回'';\r
};\r
\r
$ scope.dateSelected =功能（）{\r
\r
\r
\r
VAR dateSelected =新的日期（$ scope.dt）;\r
\r
对于（VAR I = 0; I＆LT; $ scope.appointments.length;我++）{\r
如果（areDatesEqual（$ scope.appointments [I]，dateSelected））{\r
的performAction（）;\r
}\r
}\r
\r
};\r
\r
功能的performAction（）{\r
警报（预约日期选定）;\r
}\r
\r
\r
\r
}）; \r
＆LT; HTML和GT;\r
＆LT; HEAD＆GT;\r
＆LT;标题＆GT; Typehead＆LT; /标题＆GT;\r
＆LT;间的charset =UTF-8＆GT;\r
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1＆GT;\r
＆LT;链接rel =stylesheet属性HREF =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css/＆GT;\r
＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js\"></script>\r
＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js\"></script>\r
\r
＆LT; /头＆GT;\r
＆LT;机身NG-应用=ui.bootstrap.demo＆GT;\r
＆LT;风格＆GT;\r
。全键跨度{\r
背景色：暗绿;\r
边界半径：32PX;\r
颜色：黑色;\r
}\r
.partially按钮跨度{\r
背景色：橙色;\r
边界半径：32PX;\r
颜色：黑色;\r
}\r
.appointment＆GT;按钮{\r
颜色：白色;\r
背景色：红色;\r
}\r
\r
＆LT; /风格＆GT;\r
＆LT; DIV NG控制器=DatepickerDemoCtrl＆GT;\r
＆LT; pre＆GT;选定的日期为：＆LT;环境监察及GT; {{DT |日期：'fullDate'}}＆LT; / EM＆GT;＆LT; / pre＆GT;\r
\r
＆LT; H4＆GT;＆弹出LT; / H4＆GT;\r
＆LT; DIV CLASS =行＆GT;\r
＆LT; DIV CLASS =COL-MD-6＆GT;\r
＆LT; p =类输入组＆GT;\r
＆LT;输入类型=文本级=表格控UIB-日期选择器，弹出={{格式}}NG模型=DTNG-变化=dateSelected（）是开=popup1年开业日期选择器选项=dateOptionsNG-所需=真密文=关闭ALT-输入格式=altInputFormats日期禁用=禁用（日期模式）定制级= dayClass（日期模式）/＆GT;\r
＆LT;跨度类=输入组BTN＆GT;\r
＆LT;按钮式=按钮级=BTN BTN-默认的NG点击=open1（）＆GT;＆LT; I类=glyphicon glyphicon日历＆GT;＆LT; / I＆GT;＆LT; /按钮＆GT;\r
＆LT; / SPAN＆GT;\r
＆所述; / P＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
I want to disable specific dates in the date picker of AngularJS.
I am using AngularJS-bootstrap css for components(angular directives).(ui.bootstrap.datepicker)
i was using the following code:
datePicker.html:
<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="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="./ui-bootstrap-tpls-1.2.1.min.js"></script>
<script src="./datePicker.js"></script>
</head>
<body ng-app="ui.bootstrap.demo" >
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style>
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>Inline</h4>
<div style="display:inline-block; min-height:290px;">
<uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="inlineOptions" ></uib-datepicker>
</div>
<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" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<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 class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup3.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open3()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
</div>
</div>
<hr />
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
<button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
</div>
</body>
datePicker.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 = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: false
};
$scope.dateOptions = {
dateDisabled: disabled,
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
// Disable weekend selection
function disabled(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.open2 = function() {
$scope.popup2.opened = true;
};
$scope.open3 = function() {
$scope.popup3.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
};
$scope.popup2 = {
opened: false
};
$scope.popup3 = {
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'
}
];
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 < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
}
});
the documentation gives me : dateDisabled (date, mode) - An optional expression to disable visible options based on passing a date and current mode.
i tried long and hard to use it but wasted 5 hours on it. im sure the solution is simple.Can anyone help with the following:
1.How do i use it to disable a single date 2.Disable multiple dates passed from an array!
any help with working example would be appreciated!
解决方案
Link the date-disabled attribute to a function that takes two arguments in your scope like this:
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" date-disabled="disabled(date, mode)" /> <!-- Other attributes deleted for clarity -->
That function will be called for all the visible dates on the calendar. So, you will need to check the date passed against the dates you want to be disabled. For example, the function bellow will disable the dates: March 14, 2016, March 15, 2016 and March 16, 2016
$scope.disabled = function(date, mode){
var holidays = [
new Date(2016,2,14),
new Date(2016,2,15),
new Date(2016,2,16),
]
var isHoliday = false;
for(var i = 0; i < holidays.length ; i++) {
if(areDatesEqual(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)
}
UPDATE:
To change the class of a specific date you use the custom-class attribute:
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" date-disabled="disabled(date, mode)" custom-class="dayClass(date, mode)"/>
The dayClass function will be called for all the visible dates and return the css class you want to add to that element. For example, the function below will add the class appointment to the dates on the appointments array
$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 '';
}
Then you need to add some style, something like this:
.appointment>button {
color: white;
background-color: red;
}
UPDATE 2
To perform an action for specific dates you could use ng-change and follow the same approach as before, it could be something like this:
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" ng-change="dateSelected()" /> <!-- Other attributes deleted for clarity -->
On your controller:
$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");
}
Here a full example:
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 today = new Date();
$scope.holidays = [
new Date(today.getFullYear(),today.getMonth(),14),
new Date(today.getFullYear(),today.getMonth(),15),
new Date(today.getFullYear(),today.getMonth(),16),
]
$scope.appointments = [
new Date(today.getFullYear(),today.getMonth(),3),
new Date(today.getFullYear(),today.getMonth(),7),
new Date(today.getFullYear(),today.getMonth(),20),
]
$scope.disabled = function(date, mode){
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) {
if (mode === 'day') {
var dateToCheck = new Date(date);
for(var i = 0; i < $scope.appointments.length ; i++) {
if(areDatesEqual($scope.appointments[i], dateToCheck)){
return 'appointment';
}
}
}
return '';
};
$scope.dateSelected = function(){
var dateSelected = new Date($scope.dt);
for(var i = 0; i < $scope.appointments.length ; i++) {
if(areDatesEqual($scope.appointments[i], dateSelected)){
performAction();
}
}
};
function performAction(){
alert("Appointment date selected");
}
});
<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>
</head>
<body ng-app="ui.bootstrap.demo" >
<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>
<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>
这篇关于禁用angularjs（仅日期选择器而不是dateTimePicker的）具体的单日期和多日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
