Customization in EJ2 JavaScript Daterangepicker control
26 Apr 20239 minutes to read
The DateRangePicker is available for UI customization that can be achieved by using available properties and events in the component.
Day cell format
The DateRangePicker is available for UI customization based on your application requirements. It can be achieved by using renderDayCell
event that provides an option to customize each day cell on rendering.
The following example disables the weekends of every month by using renderDayCell
event.
var daterangepicker = new ej.calendars.DateRangePicker({
placeholder: 'Select a range',
renderDayCell: onRenderCell,
});
daterangepicker.appendTo('#element');
function onRenderCell(args) {
if (args.date.getDay() == 0 || args.date.getDay() == 6) {
//sets isDisabled to true to disable the date.
args.isDisabled = true;
}
}
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 DateRangePicker control</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-calendars/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<input id="element" type="text">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Preset Ranges
DateRangePicker provides an option to set the predefined ranges via presets
property with the corresponding label. This property will accept the values in the order of label, start date (date object), end date (date object), and append these ranges to the presets pop-up for quick selection. In the following sample, you can easily choose the frequently used range options from the list of ranges.
let today = new Date();
var currentYear = today.getFullYear();
var currentMonth = today.getMonth();
var currentDay = today.getDate();
var daterangepicker = new ej.calendars.DateRangePicker({
placeholder: 'Select a range',
presets: [
{ label: 'Today', start: new Date(), end: new Date() },
{ label: 'This Month', start: new Date(new Date().setDate(1)), end: new Date() },
{ label: 'Last Month', start: new Date(new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1)), end: new Date() },
{ label: 'Last Year', start: new Date(new Date().getFullYear() - 1, 0, 1), end: new Date() },
]
});
daterangepicker.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 DateRangePicker control</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-calendars/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<input id="element" type="text">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
First day of week
Start day in a week will differ based on the culture, but you can also customize this based on the application needs. For this, you have to make use of firstDayOfWeek
property. By default, first day of a week in en-US is Sunday. In the following example it is customized to Monday with the help of this property.
var daterangepicker = new ej.calendars.DateRangePicker({
placeholder: 'Select a range',
firstDayOfWeek:1
});
daterangepicker.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 DateRangePicker control</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-calendars/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<input id="element" type="text">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>