Getting Started

11 Jan 20175 minutes to read

This section explains you how to render and configure TimePicker component in a ReactJS application.

Adding Scripts and Style references

Create an HTML page and refer the necessary script and CSS dependency files in your application with the help of given React Getting Started Documentation.

Example

HTML

<body>
            <input id="timepicker"/>
        </body>

Configure Properties

Value

This property specifies the list of time range to be disabled in TimePicker control.To know more about TimePicker properties please refer the API reference

HTML

ReactDOM.render(   
                <EJ.TimePicker id="timepicker" value={"10:30 PM"} >
        </EJ.TimePicker>,
        document.getElementById('dtp')
        );

DisableTimeRanges

This property specifies the list of time range to be disabled in TimePicker control.To know more about TimePicker properties please refer the API reference

HTML

var  disableTime= [{ startTime: "3:00 AM", endTime: "6:00 AM" },
                            { startTime: "1:00 PM", endTime: "3:00 PM" },
                            { startTime: "8:00 PM", endTime: "10:00 PM" }];

        ReactDOM.render(   
                <EJ.TimePicker id="timepicker"  disableTimeRanges={disableTime} >
        </EJ.TimePicker>,
        document.getElementById('dtp')
        );

In the JSX, need to declare the Timepicker properties. Refer to the following code.,

HTML

ReactDOM.render(   
                <EJ.TimePicker value={20} >
                </EJ.TimePicker>,
                document.getElementById('timepicker')
            );

With ReactJS, components can be initialized in two ways.

Using jsx Template
Without using jsx Template

Using jsx Template

You can render EJ component by using JSX template, wherein the document will be converted to its equivalent JS file.

Create an input element with an ID in the HTML file.

HTML

<body>
            <div id="timepicker"></div>
        </body>

Create a JSX file and render Timepicker component by using the below code snippet.

HTML

ReactDOM.render(   
            <EJ.TimePicker id="timepicker">
            </EJ.TimePicker>,
            document.getElementById('timepicker')
        );

Refer the JSX file created in last step in the HTML file as given below.

HTML

<body>
            <div id="timepicker"></div>

            <!-- timepicker.jsx created in previous step-->
            <script type="text/babel" src="timepicker.jsx">
            </script>   
        </body>

Now the jsx file will be compiles into its equivalent JavaScript file by means of Babel.

Without using jsx Template

The Timepicker can be created from a HTML INPUT element with the HTML id attribute set to it. Refer to the following code example.

HTML

<body>
        <input id="timepicker"/>
    </body>

JAVASCRIPT

<script>

            ReactDOM.render(
                React.createElement(EJ.Chart, {id: "timepicker"}       
                ),
                document.getElementById('timepicker')
            );      

    </script>

Execute the above code to render Timepicker component.

Note: You can find the TimePicker properties from the API reference document.