Getting Started

28 Nov 20172 minutes to read

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

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

Adding JavaScript and CSS Reference

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

CSS file

• ej.web.all.min.css – includes all widgets styles (To know more about theme refer Theming in Essential JavaScript Component)

Script Files

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.

You can make use of ‘ej.web.all.min.js’ file which encapsulates all ‘ej’ web components and frameworks in single file.

• ej.web.all.min.js – includes all web widgets.

Initialize DatePicker

• Open the command prompt in the folder ember-app or the folder in which the application is created.

• Use the command ember generate route datepicker/default to create template file default.hbs in templates folder and router file default.js in routes folder. It also add the routing content in router.js.

• Use below code in default.hbs in templates folder to render the DatePicker control.

HTML

{{ ej-datepicker id="datePick"}}

• Use the below code in default.js in routes folder to bind the model to the DatePicker Control.

JAVASCRIPT

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

Running the application

• To run the application, execute below command.

JAVASCRIPT

ember serve

Browse to http://localhost:4200 to see the application and navigate to DatePicker sample. The component is rendered as like the below screenshot.

Get/Set Value

DatePicker provides an options to configure all its properties and get its value. DatePicker value can be assigned during initialization. Below code shows how to assign values at initialization.

• Use below code in default.hbs in templates folder to render the DatePicker control with value.

HTML

{{ ej-datepicker id="datePick" e-value= model.Value}}

• Use the below code in default.js in routes folder to bind the value to the DatePicker.

JAVASCRIPT

export default Ember.Route.extend({
      model() {
         return {
             Value: new Date()
         }
      }
    });