This section explains you the steps required to create a simple TimePicker and demonstrate the basic usage of the TimePicker component.
The below list of dependencies are required to use the TimePicker
component in your application.
|-- @syncfusion/ej2-react-calendars
|-- @syncfusion/ej2-react-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-calendars
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
You can use create-react-app
to setup the applications.
To install create-react-app
run the following command.
npm install -g create-react-app
React
sample use following commands.create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
All the available Essential JS 2 packages are published in npmjs.com
public registry.
You can choose the component that you want to install. For this application, we are going to use TimePicker
component.
To install TimePicker component, use the following command
npm install @syncfusion/ej2-react-calendars –save
To render the TimePicker component, need to import TimePicker and its dependent component’s styles as given below in App.css
.
@import "../node_modules/@syncfusion/ej2-base/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-react-calendars/styles/material.css";
Note: If you want to refer the combined component styles, please make use of our CRG
(Custom Resource Generator) in your application.
TimePickerComponent
from ej2-react-calendars
package in App.tsx
.[src/App.tsx]
import { enableRipple } from '@syncfusion/ej2-base';
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import './App.css';
// enable ripple effect
enableRipple(true);
export default class App extends React.Component<{}, {}> {
public render() {
return <TimePickerComponent id="time" />
}
};
Now run the npm start
command in the console, it will run your application and open the browser window.
npm start
The following examples shows the basic TimePicker component.
// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
export default class App extends React.Component<{}, {}> {
public render() {
return <TimePickerComponent id="timepicker" placeholder="Select a Time" />
}
};
ReactDOM.render(<App />, document.getElementById('timer'));
Now, the TimePicker renders with default culture as American English
(‘en-US’). For a different culture, refer to the
Globalization
section.
The following example demonstrates how to set the value, min and max time on initializing
the TimePicker. Here the TimePicker allows you to select the time value within a range from 7:00 AM
to 4:00 PM
.
// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
export default class App extends React.Component<{}, {}> {
// initialize the value, min and max time
private time: Date = (new Date('8/3/2017 10:00 AM'));
private minTime: Date = (new Date('8/3/2017 7:00 AM'));
private maxTime: Date = (new Date('8/3/2017 4:00 PM'));
public render() {
return <TimePickerComponent id="timepicker" value={this.time} min={this.minTime} max={this.maxTime} />
}
};
ReactDOM.render(<App />, document.getElementById('timer'));
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 the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
export default class App extends React.Component<{}, {}> {
private time: Date = (new Date('8/3/2017 10:00'));
public render() {
return <TimePickerComponent id="timepicker" value={this.time} step={60} format={'HH:mm'} />
}
};
ReactDOM.render(<App />, document.getElementById('timer'));
Once the time format property is defined, it will be applicable to all the cultures.