How to take input type Date in HTML and use in angular7 component.ts file?

Question

I want to add date/calendar in my angular7 form but I do not know how. Please help. I'm new and trying to learn by creating a simple angular7 form with .net web api and microsoft sql server.

User.component.html file

<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

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

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: '',
   };
  }
}

I want to add datepicker/calendar in the CreateDate form. and pass the form in db in mssm.

wentjun · Accepted Answer · 2019-06-16 07:45:27Z

2

If you do not want to make use of any external libraries or dependencies, you can simply add another <input> element, and set the type attribute as date. This will allow the user to input the values in date format, or use the built in date picker interface, as described in the documentation.

<input type="date">

Since you are using template driven forms (two-way data binding), feel free to make the following changes to your code.

On your component.html, add this:

<div class="form-group">
  <label>Create Date</label>
  <input name="Status" #Status="ngModel" type="date" [(ngModel)]="UserService.formData.CreateDate" class="form-control">
</div>

You should be able to get the date value (in string format) on your component.ts.

However, do take note of browser compatibility. Safari and IE do not support this attribute value.

Alternatively, you can make use of the Angular Material Datepicker, or ngBootstrap Datepicker. These are very popular datepicker libraries which are widely used by developers working on Angular.

edited Jun 16, 2019 at 7:45

answered Jun 16, 2019 at 7:39

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abdul Azfar Over a year ago

thank you sir. I didn't know in ts file it is taken as string eventhough in mssm is date type and in html is date type.

wentjun Over a year ago

You're welcome! But as I mentioned on my answer, you have to be aware that this input type="date" won't work in Safari!

Collectives™ on Stack Overflow

How to take input type Date in HTML and use in angular7 component.ts file?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related