javascript - วิธีการรับข้อมูลประเภทวันที่ใน HTML และใช้ในไฟล์ component.ts ของ Angular7?

ฉันต้องการเพิ่มวันที่/ปฏิทินในฟอร์ม Angular7 ของฉัน แต่ฉันไม่รู้ว่าจะทำอย่างไร กรุณาช่วยฉันด้วย ฉันเป็นมือใหม่และพยายามเรียนรู้โดยการสร้างฟอร์ม Angular7 แบบง่ายๆ กับ .NET Web API และ Microsoft SQL Server

1. ไฟล์ 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>

2. ผู้ใช้.cs

   namespace UserManagement3.Models { using System; using 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; }}}
   

3. ผู้ใช้.model.ts

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

4. user.component.ts

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

ฉันต้องการเพิ่มตัวเลือกวันที่/ปฏิทินในฟอร์ม CreateDate และส่งฟอร์มไปยังฐานข้อมูลใน mssm

คำตอบ #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>

คุณควรจะสามารถรับค่าของวันที่ (ในรูปแบบ string) ใน component.ts ของคุณได้

อย่างไรก็ตาม โปรดสังเกตความเข้ากันได้ของเบราว์เซอร์ Safari และ IE ไม่สนับสนุนค่าของแอตทริบิวต์นี้

อีกทางเลือกหนึ่ง คุณสามารถใช้ Angular Material Datepicker หรือ ngBootstrap Datepicker ได้ เหล่านี้เป็นไลบรารี datepicker ที่ได้รับความนิยมมากซึ่งถูกใช้งานอย่างกว้างขวางโดยนักพัฒนาที่ทำงานกับ Angular