GettingStarted

27 Dec 20162 minutes to read

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

Create DateTimePicker

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 DateTimePicker component.

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

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

HTML

<input id="datetimepick" ej-date-time-picker/>

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

JAVASCRIPT

export class DateTimePicker{

}

Configure Router

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

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

Add the below code to the config.map method.

JAVASCRIPT

{ route: 'datetimepicker', name: 'datetimepicker', moduleId: 'samples/datetimepicker/datetimepicker', nav: true, title: 'Datetimepicker' }

Run the application

Execute the following command to run the application

JAVASCRIPT

gulp watch

Execution of above code will render the following output.

Two way binding

DateTimePicker value can be bound to the model values to synchronize the date and time values between view and model.
Check Below code example to know about two way binding

HTML

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

In script section set the Model values,

JAVASCRIPT

export class DateTimePicker {
    constructor(){
        this.selectedDate = new Date("11/23/2016 4:00 PM");
    }
}

The following screenshot illustrates the output of above code.

Configuring the DateTimePicker properties

DateTimePicker component have options to render the calendar with min and max date specified.

HTML

<input id="datetimepick" ej-date-time-picker="e-min-date-time.bind: minDatetime; e-max-date-time.bind: maxDatetime;" />

Set the required variable values in corresponding script file like below,

export class DatePickAPI {
constructor() {
this.minDatetime = new Date(“11/1/2016 10:00 AM”);
this.maxDatetime = new Date(“11/27/2016 10:00 PM”);
}
}

Execution of above code will render the following output.