时间戳

首页 > 解决方案 > 禁用周末和以前的日期 - AngularJS

angularjs - 禁用周末和以前的日期 - AngularJS

问题描述

我正在使用以下代码插入日期选择器文本框。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>    
<script>    
function MainController($scope) {    
$scope.date = new Date();    
}    
</script>    


<body ng-app>    
<div ng-controller="MainController">    
<input type="date" ng-model="date" value="{{ date | date: 'yyyy/MM/dd' }}" />    
</body>

Angular JS 日历

在此处输入图像描述

我想如果以下可以实现；

A. 禁用周末选择

B. 禁用以前的日期（从昨天开始）

C. 禁用包括今天在内的 4 天（例如，如果今天是 12 点，那么应该禁用从 12 到 17 的时间 - 包括已经禁用的周末）

我已经使用 JQuery Datepicker 完成了此操作，但无法使用 AngularJS 完成此操作。请帮忙。

附上 Jquery Datepicker 的截图。

在此处输入图像描述

标签： angularjs

解决方案

在这里，您依赖于浏览器的实现<input>，这不是很强大。使用它，您不能灰显特定日期，只能灰显范围使用min和max属性（这使您的 B 目标可以实现）。

AJS 社区有几种解决方案，包括：

  • ui-date，显然是您习惯的 jQuery 选择器的复制粘贴（尽管阅读警告，他们不会将其作为最佳解决方案出售）
  • UI Bootstrap 的日期选择器似乎更强大，并由ui-date's page 引用-但我看不出您如何使用其选项实现 A 和 C 目标
  • 经证明md-datepicker，它允许您用md-min-dateand实现 B md-max-date，并用 实现 A、B 和 C md-date-filter；演示在这里（我个人最喜欢的，以防它不够明显^^）

推荐阅读