Getting Started

15 Apr 20192 minutes to read

This section discloses the details on how to render and configure DateRangePicker component in an Aurelia application.

Create DateRangePicker

You can create an Aurelia application and add necessary scripts and styles with the help of the given Aurelia Getting Started Documentation.
We have already configured a template project in GitHub repository syncfusion-template-repository. Run the below set of commands to clone the repository and install the required packages for Syncfusion Aurelia application.

JAVASCRIPT

*	git clone "https://github.com/aurelia-ui-toolkits/syncfusion-template-repository" 
*	cd syncfusion-template-repository
*	npm install
*	jspm install

The below steps describes the steps to create Syncfusion Aurelia DateRangePicker component.

Create dateRangePicker folder inside src/samples/ location in sample files folder.

Create an HTML file (here dateRangePicker.html file) inside newly created folder and use the below code example to render the DateRangePicker component.

HTML

<input id="daterangepick" ej-date-range-picker/>

Create a javascript file in Aurelia application and add the Model class for binding with DateRangePicker component as given below.
Here, for example, we created the dateRangePicker.js file with the below code snippet inside src/samples/dateRangePicker folder.

JAVASCRIPT

export class DateRangePicker{

}

Configure Router

Now that, we are done with adding DateRangePicker component, let us see how to configure our Aurelia application to add additional tab for showcasing DateRangePicker component.

The Routing configuration is available inside ‘src/app.js’ file.

Add the below code to the config.map method.

JAVASCRIPT

{ route: 'dateRangePicker', name: 'dateRangePicker', moduleId: 'samples/dateRangePicker/dateRangePicker', nav: true, title: 'DateRangePicker' }

Run the application

Execute the following command to run the application

JAVASCRIPT

gulp watch

Execution of above code will render the following output.

Get/Set Value

DateRangePicker provides an options 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.

HTML

<input id="datepick" ej-date-range-picker="e-value.bind:dateValue;"  ></input>

In script section set the Model values,

JAVASCRIPT

export class DateRangePicker {
    constructor(){
        this.dateValue = '"11/1/2013 - 12/3/2019"';
    }
}

NOTE

You can assign values after initialization in DateRangePicker (it helps to get or set value at run time). Let’s consider that going to set date range at button click.