英文:
How to prevent selection of date values beyond today's date?
问题
根据您提供的信息，在HTML代码中，您有一个日期选择器，想要从TypeScript代码中以编程方式设置日期的最小和最大值，以确保用户无法选择超出最大值或低于最小值的日期。
对于[max]属性，您希望它的值为今天的日期。
您尝试了以下方法，但仍然允许用户选择大于今天日期的日期值：
this.maxDateLimit = formatDate(new Date(), 'yyyy-MM-dd', 'en')
要解决这个问题，您可以尝试以下方法：
import { Component } from '@angular/core';
import { formatDate } from '@angular/common';
@Component({
// 省略组件的其余部分
})
export class YourComponent {
// 在组件中定义属性
minDateLimit: string;
maxDateLimit: string;
constructor() {
// 在构造函数中设置最小和最大日期限制
this.minDateLimit = 'yyyy-MM-dd'; // 设置您的最小日期
this.maxDateLimit = formatDate(new Date(), 'yyyy-MM-dd', 'en'); // 设置最大日期为今天
}
}
这将确保您的日期选择器中的[max]属性的值是今天的日期，并且用户无法选择超出此日期的日期。请根据您的需求更新minDateLimit属性以设置最小日期值。
英文:
As shown below in the HTML code, I have a date-picker. I want to set the max and min values of the date programmatically from the typescript code. I want to set the min and the max values of the date so that the user cannot select any date beyond the max
value set, and cannot select any date below the min value set.
The desired value for the [max] should be today's date.
I tried the following approach, but still, the user can select a date value greater than today's date.
this.maxDateLimit = formatDate(new Date(), 'yyyy-MM-dd', 'en')
Please let me know how to correct this.
Html:
<div id="idDateOfSprayContainer">
<clr-date-container class="clsDateContainer">
<label id="idDateOfSprayLabel">
{{ "SITE.INSECTICIDES.DATE_OF_SPRAY_LABEL" | translate }}:
</label>
<input id="idDateOfSprayValue" class="clr-control-container" clrDate type="date" placeholder="" [(ngModel)]="iDatePasser.dateOfSpray" name="dateOfSpray" (ngModelChange)="onDateOfSpraySet($event)"
value="2021-07-21" [min]="minDateLimit" [max]="maxDateLimit" [disabled] = "!siteSelectionState"/>
</clr-date-container>
</div>
答案1
得分: 3
我们总是使用一个库时，需要考虑组件的“Inputs”以及这些输入的类型。
就清晰度日期选择器而言，你可以在文档的“选项摘要”中看到这些“Inputs”（文档末尾）。
注意，“min”和“max”输入是以“yyyy-MM-dd”的方式作为字符串。
因此，检查Angular中的自定义格式选项：
this.maxDateLimit = formatDate(new Date(), 'yyyy-MM-dd', 'en-US')
注意：我使用了本地“en-US”，因为如果在Angular中默认安装了它，我们就不需要添加其他本地化了。在这种情况下，使用‘en-US’和例如添加了西班牙语‘es-ES’的情况一样无关紧要。
英文:
Always we use a library, we need take account the "Inputs" of the component and the type of this Inputs.
In the case of clarity date-picker you see the "Inputs" in "Summary of Options" of the docs (at the end of the document)
See that the "min" and "max" inputs are strings in the way "yyyy-MM-dd"
So checking the custom format option in Angular
this.maxDateLimit = formatDate(new Date(), 'yyyy-MM-dd','en-US')
NOTE: I use the local "en-US" because if the installed by defect in Angular -we needn't add any local more-. In this case it's indiferent use 'en-US' than, e.g. if we added locale-es for Spanish 'es-ES'
答案2
得分: 1
在没有先前了解Angular的情况下，我通过阅读文档和一些试错来编写了以下代码：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
angular.module("date", [])
.controller("controller", ["$scope", function($scope) {
$scope.today = function() {
return new Date().toISOString().substring(0, 10);
};
}]);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="date" ng-controller="controller">
<form>
<input type="date" max="{{today()}}" />
<input type="submit"/>
</form>
</body>
<!-- end snippet -->
今天之后的日期无法选择：
您可以通过输入后续日期，例如12/31/2050，但在提交表单时会看到错误消息：
请注意，我没有将max放在方括号中。
英文:
Withour prior knowledge of angular, I was able to come up with this by reading the documentation and some trial and error:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
angular.module("date", [])
.controller("controller", ["$scope", function($scope) {
$scope.today = function() {
return new Date().toISOString().substring(0, 10);
};
}]);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="date" ng-controller="controller">
<form>
<input type="date" max="{{today()}}" />
<input type="submit"/>
</form>
</body>
<!-- end snippet -->
Dates beyond today cannot be selected:
You can enter a later date by typing in, for example, 12/31/2050, but you will then see an error message when you submit the form:
Note that I did not put max in square brackets.
答案3
得分: 1
你应该像这样在你的情况下使用 min 和 max。
[min]="minDateLimit | date:'yyyy-MM-dd'" [max]="maxDateLimit | date:'yyyy-MM-dd'".
这是 Angular 日期管道。有关日期管道的更多信息，您可以访问 Angular 文档链接 https://angular.io/api/common/DatePipe。
日期管道将转换为我们所需的格式所绑定的值。正如其他成员所指出的，它应该仅以字符串格式存在。
在日期选择器的情况下，您可以在文档的“选项摘要”中看到“输入”（在文档末尾）。
this.minDateLimit = (formatDate(new Date("2023-06-04"), 'yyyy-MM-dd', 'en'));
this.maxDateLimit = (formatDate(new Date(), 'yyyy-MM-dd', 'en')); // new Date 意味着它将根据您的要求获取当前日期
英文:
You should use min & max like this for your case.
> [min]="minDateLimit | date:'yyyy-MM-dd'" [max]="maxDateLimit | date:'yyyy-MM-dd'".
This is the angualr Date Pipe.For more info on date pipe you can visit angualr documentation link https://angular.io/api/common/DatePipe
Date pipe will convert to the value binded to our required format.
As other member pointed out that it should be in string format only.
> In the case of clarity date-picker you see the "Inputs" in "Summary of
> Options" of the docs (at the end of the document)
this.minDateLimit = (formatDate(new Date("2023-06-04"), 'yyyy-MM-dd ', 'en'));
this.maxDateLimit = (formatDate(new Date(), 'yyyy-MM-dd ', 'en')) ;//new Date means it will get current date as per your requirment
答案4
得分: 0
从JavaScript中设置最大值按照期望的方式工作。查看工作示例
var maxDateLimit = new Date().toISOString().slice(0, 10);
document.getElementById("idDateOfSprayValue").max = maxDateLimit;
<div id="idDateOfSprayContainer">
<clr-date-container class="clsDateContainer">
<label id="idDateOfSprayLabel">
</label>
<input id="idDateOfSprayValue" class="clr-control-container" clrDate type="date" placeholder="" name="dateOfSpray"/>
</clr-date-container>
</div>
英文:
Setting the max value from javascript works as per the expectation. Checkout the working example
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var maxDateLimit = new Date().toISOString().slice(0, 10);
document.getElementById("idDateOfSprayValue").max = maxDateLimit;
<!-- language: lang-html -->
<div id="idDateOfSprayContainer">
<clr-date-container class="clsDateContainer">
<label id="idDateOfSprayLabel">
</label>
<input id="idDateOfSprayValue" class="clr-control-container" clrDate type="date" placeholder="" name="dateOfSpray"/>
</clr-date-container>
</div>
<!-- end snippet -->
答案5
得分: 0
如果您参考Clarity Design的日期选择器文档，在示例部分提到了以下指南。
> 我们建议您从日期选择器中将日期作为字符串或JavaScript日期对象访问。同时使用两者可能会导致意外行为。
也许您可以尝试在日期选择器输入中传递Date对象，或将组件文件中的所有日期变量映射为相同格式的字符串。
对于Date对象，您可以使用new Date()或Date.parse函数（它返回一个时间戳数字）。对于字符串对象，您可以使用Angular中的管道运算符，如[min]="new Date() | date:'yyyy-MM-dd'"，使用日期选择器文档中接受的占位符格式。
英文:
If you refer to the Date Picker docs from Clarity Design there mentioned the following guideline in the examples section.
> We recommend that you either access the date as a string or as a javascript date object from the date picker. Using both at the same time might cause unexpected behavior.
Maybe you can experiment passing in Date objects instead for all the Input directives in the date picker input, or map all date variables in the component file to strings of the same format.
For Date objects you can use new Date() or Date.parse function (this returns a timestamp number). For string objects you can use the pipe operator from Angular like [min]="new Date() | date:'yyyy-MM-dd'" using the accepted placeholder formats in the Date Picker docs.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论