Customization in JavaScript DatePicker control

06 Jun 2023 / 3 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.

Source

Preview

app.ts

index.html

styles.css

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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/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>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <input id='element' />
    </div>
</body>
</html>

/*Example styles*/

#container {
    visibility: hidden;
    max-width: 250px;
    margin: 0 auto;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#element {
    display: block;
}


/*custom styles*/

.e-input-group.e-date-wrapper.e-custom-style:not(.e-float-icon-left)::before, /* csslint allow: adjoining-classes*/
.e-input-group.e-date-wrapper.e-custom-style:not(.e-float-icon-left)::after /* csslint allow: adjoining-classes*/
{ /* csslint allow: adjoining-classes*/
    background: blue;
}

.e-date-wrapper.e-custom-style input.e-input::selection { /* csslint allow: adjoining-classes*/
    background: blue;
}
.e-date-wrapper.e-custom-style input.e-input::-moz-selection { /* csslint allow: adjoining-classes*/
    background: blue;
}

.e-calendar .e-content td.e-disabled .e-day, .e-calendar .e-content td.e-disabled:hover .e-day, .e-calendar .e-content td.e-disabled:focus .e-day {
    color: blue;
    font-weight: bold;
}

.e-date-wrapper.e-custom-style .e-input-group-icon.e-date-icon.e-icons, /* csslint allow: adjoining-classes*/
.e-date-wrapper.e-custom-style .e-input { /* csslint allow: adjoining-classes*/
    color: blue;
}

.e-date-wrapper.e-custom-style input.e-input::selection { /* csslint allow: adjoining-classes*/
    background: blue;
}
.e-date-wrapper.e-custom-style input.e-input::-moz-selection { /* csslint allow: adjoining-classes*/
    background: blue;
}

.e-date-wrapper.e-custom-style .e-input-group-icon.e-date-icon.e-icons.e-active {  /* csslint allow: adjoining-classes*/
    color: blue;
}

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.