How to Get Current Date in Angular and Bind to JavaScript DatePicker?

This article explains how to get current date in Angular 4 and bind it to DatePicker using Angular DatePicker.

Prerequisites

 Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project:

• Node.js (latest version)
• Angular 4+
• Angular CLI
• TypeScript 2.6+
• Visual Studio code for editor

Integration of DatePicker

Refer to this UG documentation to create an Angular DatePicker component. To render the DatePicker component with Angular 4 framework, run the following command instead of the documentation specified.

npm install @angular/cli@1.4

By assigning the new Date() to the value property to get the current date of the DatePicker component as mentioned in the following code example. New Date() creates a new date object with the current date and time.

[app.component.html]

<ejs-datepicker id="datepicker" placeholder='Select a date' [value]='value'></ejs-datepicker>

[app.component.ts]

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 public value = new Date();
}

The sample has been created with the previous code and attached in the following link.

Sample Link: https://github.com/SyncfusionExamples/ej2-current-date-datepicker

Run the above code, it will generate the following output in your browser.

Screenshot

Conclusion

I hope you enjoyed learning about how to get current date in Angular and bind to JavaScript  DatePicker.

You can refer to our Angular DatePicker featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our demo to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. 

You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!