The following section explains the steps required to create a simple DatePicker component and also it demonstrates the basic usage of the DatePicker.
Install the below required dependency package in order to use the DatePicker
component in your application.
|-- @syncfusion/ej2-angular-calendars
|-- @syncfusion/ej2-angular-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-calendars
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
Angular provides the easiest way to set angular CLI projects using Angular CLI
tool.
Install the CLI application globally to your machine.
npm install -g @angular/cli
ng new syncfusion-angular-datepicker
By default, it install the CSS style base application. To setup with SCSS, pass —style=scss argument on create project.
Example code snippet.
ng new syncfusion-angular-datepicker --style=scss
Navigate to the created project folder.
cd syncfusion-angular-datepicker
All the available Essential JS 2 packages are published in npmjs.com
registry.
To install DatePicker component, use the following command.
npm install @syncfusion/ej2-angular-calendars --save
(or)
npm I @syncfusion/ej2-angular-calendars --save
The —save will instruct NPM to include the DatePicker package inside of the
dependencies
section of thepackage.json
.
Import DatePicker module into Angular application(src/app/app.module.ts) from the package @syncfusion/ej2-angular-calendars
.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the DatePickerModule for the DatePicker component
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
@NgModule({
//declaration of DatePickerModule into NgModule
imports: [ BrowserModule, DatePickerModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
The following CSS files are available in ../node_modules/@syncfusion
package folder.
This can be referenced in [src/styles.css] using following code.
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-calendars/styles/material.css';
If you want to refer the combined component styles, please make use of our
CRG
(Custom Resource Generator) in your application.
Modify the template in [src/app/app.component.ts] file to render the DatePicker component. by using <ejs-datepicker>
selector.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To Render DatePicker -->
<ejs-datepicker></ejs-datepicker>`
})
export class AppComponent { }
After completing the configuration required to render a basic DatePicker, run the following command to display the output in your default browser.
ng serve
The following example illustrates the output in your browser
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<ejs-datepicker></ejs-datepicker>`
})
export class AppComponent {
constructor() {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
DatePickerModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
To set the selected date, use the value
property.
The below example demonstrates the DatePicker with current date as selected one.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<ejs-datepicker [value]='dateValue' placeholder='Enter date'></ejs-datepicker>`
})
export class AppComponent {
public dateValue: Date = new Date();
constructor() {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
DatePickerModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
To restrict the selection of date within a specified range, use the min
and max
properties. To know more about range restriction in DatePicker, please refer this page.
The below example demonstrates the DatePicker to select a date within a range from 7 to 27.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<ejs-datepicker id="datepicker" [min]='minDate' [max]='maxDate'></ejs-datepicker>
`
})
export class AppComponent {
public month: number = new Date().getMonth();
public fullYear: number = new Date().getFullYear();
public minDate: Date = new Date(this.fullYear, this.month , 7);
public maxDate: Date = new Date(this.fullYear, this.month, 27);
constructor() {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
DatePickerModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);