This section briefly explains how to create a simple TimePicker component, and configure its available functionalities in Angular by using quickstart seed repository.
Install the below required dependency package in order to use the TimePicker
component in your application.
|-- @syncfusion/ej2-angular-calendars
|-- @syncfusion/ej2-angular-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-calendars
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-lists
|-- @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-timepicker
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-timepicker --style=scss
Navigate to the created project folder.
cd syncfusion-angular-timepicker
All the available Essential JS 2 packages are published in npmjs.com
registry.
To install TimePicker 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 TimePicker package inside of the
dependencies
section of thepackage.json
.
Import TimePicker 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 TimePickerModule for the TimePicker component
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
@NgModule({
//declaration of TimePickerModule into NgModule
imports: [ BrowserModule, TimePickerModule ],
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 TimePicker component.
Add the Angular TimePicker by using <ejs-timepicker>
selector in template
section of the app.component.ts file.
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
//enable ripple style
enableRipple(true);
@Component({
selector: 'app-root',
template: `<!-- To Render TimePicker -->
<ejs-timepicker></ejs-timepicker>`
})
export class AppComponent { }
After completing the configuration required to render a basic TimePicker, 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';
import { enableRipple } from '@syncfusion/ej2-base';
//enable ripple style
enableRipple(true);
@Component({
selector: 'app-root',
template: `<ejs-timepicker placeholder='Select a time' ></ejs-timepicker>`
})
export class AppComponent {
constructor() {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TimePickerModule
],
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);
The following example demonstrates how to set the value, min and max time on initializing
the TimePicker. The TimePicker allows you to select the time value within a range from 7:00 AM
to 4:00 PM
.
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
//enable ripple style
enableRipple(true);
@Component({
selector: 'app-root',
template: `
<ejs-timepicker [value]='dateValue' [min]='minValue' [max]='maxValue'></ejs-timepicker>
`
})
export class AppComponent {
public month: number = new Date().getMonth();
public fullYear: number = new Date().getFullYear();
public date: number = new Date().getDate();
public dateValue: Date = new Date(this.fullYear, this.month , this.date, 10, 0, 0);
public minValue: Date = new Date(this.fullYear, this.month , this.date, 7, 0, 0);
public maxValue: Date = new Date(this.fullYear, this.month, this.date, 16, 0 ,0);
constructor() {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TimePickerModule
],
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);
Time formats is a way of representing the time value in different string format in textbox and popup
list. By default, the TimePicker’s format is based on the culture. You can also customize the format by using the
format
property. To know more about the time format standards, refer to the
`Date and Time Format section.
The following example demonstrates the TimePicker component in 24 hours format with 60 minutes
interval. The time interval is set to
60 minutes by using the step
property.
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
//enable ripple style
enableRipple(true);
@Component({
selector: 'app-root',
template: `
<ejs-timepicker [placeholder]='watermark' [format]='formatString' [step]='interval' ></ejs-timepicker>
`
})
export class AppComponent {
public watermark: string = 'Select a time';
// sets the format property to display the time value in 24 hours format.
public formatString: string = 'HH:mm';
public interval: number = 60;
constructor() {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TimePickerModule
],
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);
Once the format property is defined, it will be applicable to all the cultures.