We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Integrate Essential JavaScript 2 components in Django framework

Platform: JavaScript - EJ 2 |
Control: DatePicker |
Published Date: August 13, 2018 |
Last Revised Date: August 16, 2018

This section explains how to create an application in Django and integrate Essential JavaScript 2 components.


What is the Django Framework? 


Django is a high-level Python Web framework that assists in building and maintaining quality web applications. It is a free and open source web framework. Django’s primary goal is to ease the creation of complex and database-driven websites. It is also used to set up a development environment and create your own web applications quickly and easily. Refer to the following link for more information about the Django framework: https://docs.djangoproject.com




Before creating the application in Django, we need to have the below prerequisites installed on our machine.


Steps for creating a project in the Django framework


Once the prerequisites are configured, follow the below steps to create a project in the Django framework.

  1. Create a new project using the below command.



  1. From the command line, run the following command to navigate to the project directory.



  1. Now, create a folder named “templates” in the root directory of “mysite.” Create a basic HTML file with a meaningful name within the “templates” folder as shown in the following image.



  1. Open index.html and add the below code snippet to render the basic Hello World sample.



  1. Now, add the settings.py file to the mysite folder. This file contains all the settings/configuration for our application. From here, you will need to configure the created “templates” folder directory. Refer to this link to know more about the settings.py file: https://docs.djangoproject.com/en/2.1/topics/settings/.



  1. Create a view file by adding views.py to the mysite folder as shown below. The view file consists a logic of our application. To learn more about the views.py file, refer to the following link: https://docs.djangoproject.com/en/2.1/topics/http/views/.



  1. Add the below code snippet to view.py in order to reference the index.html file. Here, the view file returns the mentioned HTML page response.



  1. Once the settings and views have been configured, we can map the default routing of the application. The following code sample shows how to add the default route to the url.py file by referring the homepage URL. To learn more about url.py, refer to the following link: https://docs.djangoproject.com/en/2.1/topics/http/urls/.



  1. Run the application using the below command. Here, manage.py is a command line utility for administrative tasks. Using this utility to interact with our application. To learn more about manage.py, refer to the following link: https://docs.djangoproject.com/en/2.1/ref/django-admin/.



  1. Refer to the following link to see the output.


Deploying the Essential JavaScript 2 Components in the Django Framework


The project has been successfully configured. Follow the below steps to deploy the Essential JavaScript 2 component in the application.


  1. Open the index.html file in the “templates” folder and reference the Essential Syncfusion CSS stylesheets and script files.



  1. Add the below code snippet in the index.html file to render the date picker component.



  1. Run the sample and see the date picker component in the output page.


Sample: Download Link


You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile