How to clear DateRangePicker value in JavaScript?

2 mins read

This article outlines the steps to achieve this using JavaScript. The DateRangePicker component is a versatile tool for selecting a range of dates in web applications. However, there may be instances where you need to clear the selected date range programmatically.

Steps to Clear DateRangePicker Value

Access the DateRangePicker Instance: First, ensure you have a reference to the DateRangePicker instance. This can typically be done by using the ID of the DateRangePicker element.
```
var dateRangePicker = document.getElementById('dateRangePicker').ej2_instances[0];
```
Clear the Value: Use the value property of the DateRangePicker instance to set it to null or an empty array, depending on the implementation.
```
dateRangePicker.value = null; // or dateRangePicker.value = [];
```
Refresh the Component: After clearing the value, it may be necessary to refresh the DateRangePicker to reflect the changes in the UI.
```
dateRangePicker.dataBind();
```

Example Code

Here is a complete example demonstrating how to clear the DateRangePicker value:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DateRangePicker Example</title>
    <link href="https://cdn.syncfusion.com/ej2/19.1.55/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/19.1.55/dist/ej2.min.js"></script>
</head>
<body>
    <input type="text" id="dateRangePicker" />
    <button id="clearButton">Clear Date Range</button>

    <script>
        var dateRangePicker = new ej.calendars.DateRangePicker({
            placeholder: 'Select a range',
            format: 'MM/dd/yyyy'
        });
        dateRangePicker.appendTo('#dateRangePicker');

        document.getElementById('clearButton').onclick = function() {
            dateRangePicker.value = null; // Clear the value
            dateRangePicker.dataBind(); // Refresh the component
        };
    </script>
</body>
</html>

Conclusion

We hope you enjoyed learning how to clear DateRangePicker value in JavaScript.

You can refer to our JavaScript Datarangepicker feature tour page to learn about its other groundbreaking feature representations and documentation to quickly get started with configuration specifications. You can also explore our JavaScript DateRagePicker example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to clear DateRangePicker value in JavaScript?

Steps to Clear DateRangePicker Value

Example Code

Conclusion

Access denied