Getting Started

28 Nov 20172 minutes to read

This section explains briefly about how to create a DateRangePicker in your application with EmberJS.

Before we start with the DateRangePicker, please refer this page for general information regarding integrating Syncfusion widget’s.

Adding JavaScript and CSS Reference

To render the DateRangePicker control, the following list of dependencies are required.

File	Description / Usage
ej.core.min.js	Includes only the widget basic functions and Framework features. Must be referred always before using all the JS controls
ej.globalize.min.js	To support the globalization.
ej.datepicker.min.js	DatePicker plugin.
ej.timepicker.min.js	TimePicker plugin.
ej.daterangepicker.min.js	DateRangePicker plugin.
ej.scroller.min.js	It is referred when scrolling is used in the DateRangePicker.

DateRangePicker uses one or more script files, therefore refer the ej.web.all.min.js (which encapsulates all the ej controls and frameworks in a single file) in the application instead of referring all the above specified internal dependencies.

To get the real appearance of the DateRangePicker, the dependent CSS file ej.web.all.min.css (which includes styles of all the widgets) should also needs to be referred.

Control Initialization

28 Nov 20172 minutes to read

Open the command prompt in the folder ember-app or the folder in which the application is created.
Use the command ember generate route daterangepicker/default to create template default.hbs file in templates folder and router default.js file in routes folder. It also adds the routing content in router.js.
Use below code in default.hbs in templates folder to render the DateRangePicker.

HTML

Use the below code in default.js in routes folder to bind the model to the DateRangePicker.

JAVASCRIPT

export default Ember.Route.extend({
      model(){
            return {
           }
        }
    });

Running the Application

To run the application, execute below command.

JAVASCRIPT

ember server

Browse to http://localhost:4200 to see the application. And navigate to DateRangePicker sample. The component is rendered as like the below screenshot. You can make changes in the code found under app folder and the browser should auto-refresh itself while you save files.

Get/Set Value

28 Nov 20172 minutes to read

DateRangePicker provides an option to configure all its properties and to get its value. DateRangePicker value can be assigned during initialization or at run time. Below code shows how to assign the values at initialization.

Use below code in default.hbs in templates folder to render the DateRangePicker.

HTML

Use the below code in default.js in routes folder to bind the model to the DateRangePicker.

JAVASCRIPT

export default Ember.Route.extend({
            model(){
      return {
        Value: "11/1/2013 - 12/3/2019"
              }
        }
        });

Execution of above code will render the following output.