How to create an example of javascript daterangepicker control using bootstrap theme?

This article explains how to create a Javascript DateRangePicker control using the bootstrap theme with a minimal code configuration.

Javascript DateRangePicker

The following section explains the steps required to create a simple DateRangePicker component.

Pre-requisites

You can use the CDN link for the script and style reference for loading the component.

Dependencies

Before starting this project, you need to add the DateRangePicker and its dependent packages to render the DateRangePicker component.

• ej2-base
• ej2-buttons
• ej2-inputs
• ej2-popups.
• ej2-lists
• ej2-calendars

Creating Html Index file

To create the Javascript DateRangePicker in the Bootstrap theme, follow the steps given below.

Add the Essentials JS 2 script and style references in the index.html page using CDN link.

[Index.html]

<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<link href="https://cdn.syncfusion.com/ej2/bootstrap.css" rel="stylesheet">

Now, create a default HTML5 input element in the index.html page.

[Index.html]

<div id="wrapper">
    <input id="daterangepicker" type="text">
</div>

Render the DateRangePicker component in the index.js file.

[Index.js]

var daterangepicker = new ej.calendars.DateRangePicker();
    daterangepicker.appendTo('#daterangepicker');
 

Screenshot

Setting the start and end date

The start and end dates in a range can be defined with the help of the startDate and endDate properties. The following example will demonstrate how to set the start and end dates when initializing the DateRangePicker.

[Index.js]

var daterangepicker = new ej.calendars.DateRangePicker({
    //sets the end date in the range
    startDate: new Date("11/9/2020"),
    //sets the end date in the range
    endDate: new Date("11/21/2020")
});
daterangepicker.appendTo('#daterangepicker');

Screenshot

Refer to the working sample for additional details and implementation: Sample

For more information about the DateRangePicker functionalities, refer to this UG Documentation, API Reference and Samples.