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

A quick start project that helps you 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 date in a range can be defined with the help of startDate and endDate property. The following example will demonstrate, how to set the start and end date on 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

Please find the sample for reference: https://stackblitz.com/edit/23dmwb?file=index.js

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