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.
1 answers
solution1
2 ACCPTED 2019-06-16 07:39:44
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 , orngBootstrap Datepicker . These are very popular datepicker libraries which are widely used by developers working on Angular.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.