Caleran – Date Range Picker

Introduction

The Caleran Date Range Picker is a powerful and flexible JavaScript library that allows users to easily select a date range. It is a popular choice among developers due to its simplicity, customization options, and ease of use. In this tutorial, we will go through a step-by-step guide on how to use the Caleran Date Range Picker in your web application.

Step 1: Include the Caleran Date Range Picker Library

To use the Caleran Date Range Picker, you need to include the library in your HTML file. You can do this by adding the following script tag in the head section of your HTML file:

<script src="https://cdn.jsdelivr.net/npm/caleran-date-range-picker@1.2.0/dist/caleran-date-range-picker.min.js"></script>

Alternatively, you can download the library from the Caleran website and include it in your project manually.

Step 2: Create a Date Range Picker Instance

To create a Date Range Picker instance, you need to create a container element in your HTML file where the picker will be rendered. You can do this by adding a div element with a unique ID:

<div id="date-range-picker"></div>

Then, you can create a Date Range Picker instance by calling the CaleranDateRangePicker constructor and passing the container element as an argument:

var dateRangePicker = new CaleranDateRangePicker(document.getElementById('date-range-picker'));

Step 3: Configure the Date Range Picker

The Caleran Date Range Picker provides several options that you can configure to customize its behavior. Some of the most common options include:

• startDate: The starting date of the date range picker.
• endDate: The ending date of the date range picker.
• minDate: The minimum date that can be selected.
• maxDate: The maximum date that can be selected.
• showCurrentDate: A boolean value that determines whether the current date is displayed in the picker.

You can configure these options by passing an object with the desired values to the CaleranDateRangePicker constructor:

var dateRangePicker = new CaleranDateRangePicker(document.getElementById('date-range-picker'), {
  startDate: new Date('2022-01-01'),
  endDate: new Date('2022-01-31'),
  minDate: new Date('2022-01-01'),
  maxDate: new Date('2022-02-28'),
  showCurrentDate: true
});

Step 4: Render the Date Range Picker

Once you have configured the Date Range Picker instance, you can render it by calling the render method:

dateRangePicker.render();

This will render the Date Range Picker in the container element.

Step 5: Handle Date Range Selection

When the user selects a date range, the Date Range Picker will trigger a select event. You can handle this event by adding an event listener to the select event:

dateRangePicker.on('select', function(event) {
  var startDate = event.startDate;
  var endDate = event.endDate;
  // Handle the selected date range
});

In this example, the event listener will be triggered whenever the user selects a new date range. The startDate and endDate properties of the event object will contain the selected start and end dates, respectively.

Conclusion

In this tutorial, we have gone through the steps to use the Caleran Date Range Picker in your web application. We have covered how to include the library, create a Date Range Picker instance, configure the options, render the picker, and handle date range selection. With these steps, you should be able to easily integrate the Caleran Date Range Picker into your project.