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>

User.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; }}}

User.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表单中添加datepicker / calendar。并在mssm中的db中传递表单。

Answer 1

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

<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。

但是，请注意browser compatibility。 Safari和IE不支持此属性值。

或者，您可以使用Angular Material Datepicker或ngBootstrap Datepicker。这些是非常受欢迎的datepicker库，已被Angular的开发人员广泛使用。

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

1 个答案: