我想在我的 angular7 表单中添加日期/日历，但我不知道如何添加。请帮忙。我是新手，正在尝试通过使用 .net web api 和 Microsoft sql server 创建一个简单的 angular7 表单来学习。
- User.component.html 文件
<html>
<form #form="ngForm" (submit)="onSubmit(form)">
<div class="form-group">
<label> USERNAME</label>
<input name="UserName" #UserName="ngModel" [(ngModel)]="UserService.formData.UserName" class="form-control">
</div>
<div class="form-group">
<label> FULLNAME</label>
<input name="FullName" #FullName="ngModel" [(ngModel)]="UserService.formData.FullName" class="form-control">
</div>
<div class="form-group">
<label> MULTIPLE ROLES</label>
<input name="MultipleRoles" #MultipleRoles="ngModel" [(ngModel)]="UserService.formData.MultiplesRoles" class="form-
control">
</div>
<div class="form-group">
<label> STATUS</label>
<input name="Status" #Status="ngModel" [(ngModel)]="UserService.formData.Status" class="form-control">
</div>
<div class="form-group">
<label> Create Date</label>
</div>
<div class="form-group">
<label> Create By </label>
<input name="CreateBy" #CreateBy="ngModel" [(ngModel)]="UserService.formData.CreateBy" class="form-control">
</div>
<div class="form-group">
<input type="button" value="SUBMIT" class="btn btn-lg btn-block">
</div>
</form>
</html>
用户.cs
命名空间 UserManagement3.Models { 使用系统； 使用 System.Collections.Generic；
public partial class User { public int Id { get; set; } public string UserName { get; set; } public string FullName { get; set; } public string MultipleRoles { get; set; } public string Status { get; set; } public Nullable<System.DateTime> CreateDate { get; set; } public string CreateBy { get; set; }}}用户.model.ts
export class User { Id: number; UserName: string; FullName: string; MultipleRoles: string; Status: string; CreateDate: string; CreateBy: string;}user.component.ts
resetForm(form?: NgForm) {
if (form != null) {
form.resetForm();
this.UserService.formData = {
Id : null,
UserName: '',
FullName: '',
MultipleRoles: '',
Status: '',
CreateDate: '',
CreateBy: '',
};
}
}
我想在 CreateDate 表单中添加日期选择器/日历。并在 mssm 中传递 db 中的表单。
最佳答案
如果您不想使用任何外部库或依赖项，您可以简单地添加另一个 <input>元素，并设置 type属性为 date .这将允许用户以日期格式输入值，或使用内置的日期选择器界面，如 documentation 中所述。 .
<input type="date">
由于您使用的是模板驱动表单(双向数据绑定(bind))，请随时对您的代码进行以下更改。
在您的 component.html 中，添加以下内容:
<div class="form-group">
<label>Create Date</label>
<input name="Status" #Status="ngModel" type="date" [(ngModel)]="UserService.formData.CreateDate" class="form-control">
</div>
您应该能够在 component.ts 上获取日期值(string 格式)。
但是，请注意 browser compatibility . Safari 和 IE 不支持该属性值。
或者，您可以使用 Angular Material Datepicker , 或 ngBootstrap Datepicker .这些是非常流行的日期选择器库，被 Angular 开发人员广泛使用。
关于javascript - 如何在 HTML 中获取输入类型 Date 并在 angular7 component.ts 文件中使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56616955/