Customization in EJ2 TypeScript Datepicker control
26 Apr 20237 minutes to read
You can customize the entire appearance of the input element and Calendar by using custom cssClass
property.
and also you can use the calendar’s renderDayCell
event to customize the appearance of the each day cell.
Below is the list of classes that provides flexible way to customize the DatePicker component.
Class Name | Description |
---|---|
e-date-wrapper | Applied to DatePicker wrapper |
e-datepicker | Applied to the DatePicker element. |
e-float-text | Applied to the floating label. |
e-date-icon | Applied to the DatePicker icon. |
e-popup-wrapper | Applied to DatePicker popup wrapper. |
e-calendar | Applied to Calendar element. |
e-header | Applied to Calendar header. |
e-title | Applied to Calendar title. |
e-icon-container | Applied to Calendar previous and next icon container. |
e-prev | Applied to Calendar previous icon. |
e-next | Applied to Calendar next icon. |
e-weekend | Applied to Calendar weekend dates. |
e-other-month | Applied to Calendar other month dates. |
e-day | Applied to each day cell of the Calendar. |
e-selected | Applied to Calendar selected dates. |
e-disabled | Applied to Calendar disabled dates. |
The following example disables the weekends of every month using renderDayCell
event. Here we have used the e-disabled
class to highlight the disabled date.
import { DatePicker, RenderDayCellEventArgs } from '@syncfusion/ej2-calendars';
// creates datepicker with placeholder.
let datepickerObject: DatePicker = new DatePicker({
// Bind the renderDayCell event to customize the each day cell.
renderDayCell: onRenderCell,
// sets the placeholder
placeholder: 'Enter date',
cssClass: 'e-custom-style'
});
datepickerObject.appendTo('#element');
function onRenderCell(args: RenderDayCellEventArgs): void {
if (args.date.getDay() == 0 || args.date.getDay() == 6) {
//sets isDisabled to true to disable the date.
args.isDisabled = true;
//To know about the disabled date customization, you can refer in "styles.css".
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Calendar 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="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-calendars/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<input id='element' />
</div>
</body>
</html>
Adding mandatory asterisk to placeholder and float label
You can add a mandatory asterisk(*)
to placeholder and float label using .e-input-group.e-control-wrapper.e-float-input .e-float-text::after class.
import { DatePicker } from '@syncfusion/ej2-calendars';
let month: number = new Date().getMonth();
let fullYear: number = new Date().getFullYear();
// creates a datepicker with min max property
let datepickerObject: DatePicker = new DatePicker({
// Sets the min.
min: new Date(fullYear, month , 9),
//Sets the max.
max: new Date(fullYear, month, 15),
// Sets the value.
value: new Date(fullYear, month , 11)
floatLabelType: 'Auto'
placeholder:"Select Date"
});
datepickerObject.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 DatePicker 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="asterisk.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-calendars/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<input id='element' type="text" />
</div>
</body>
</html>