如何在 HTML 中获取输入类型 Date 并在 angular7 component.ts 文件中使用？

Question

我想在我的 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 { using System; 使用 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; }}}

用户模型.ts

 export class User { Id: number; UserName: string; FullName: string; MultipleRoles: string; Status: string; CreateDate: string; CreateBy: string;}

用户组件.ts

resetForm(form?: NgForm) {
 if (form != null) {
 form.resetForm();
 this.UserService.formData = {
   Id : null,
   UserName: '',
   FullName: '',
   MultipleRoles: '',
   Status: '',
   CreateDate: '',
   CreateBy: '',
   };
  }
}

我想在 CreateDate 表单中添加日期选择器/日历。 并在 mssm 中传递 db 中的表单。

Answer 1

如果不想使用任何外部库或依赖项，只需添加另一个<input>元素，并将type属性设置为date 。 这将允许用户以日期格式输入值，或使用内置日期选择器界面，如文档中所述。

<input type="date">

由于您正在使用模板驱动的表单（双向数据绑定），请随意对您的代码进行以下更改。

在您的 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格式）。

但是，请注意浏览器兼容性。 Safari 和 IE 不支持此属性值。

或者，您可以使用Angular Material Datepicker或ngBootstrap Datepicker 。 这些是非常流行的日期选择器库，被 Angular 的开发人员广泛使用。

如何在 HTML 中获取输入类型 Date 并在 angular7 component.ts 文件中使用？

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-06-16 07:39:44

如何在 HTML 中获取输入类型 Date 并在 angular7 component.ts 文件中使用？

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-06-16 07:39:44

解决方案1
2 已采纳 2019-06-16 07:39:44