HelpBot Assistant

How can I help you?

Customization in React Datetimepicker component

21 Feb 20268 minutes to read

The DateTimePicker component offers extensive UI customization through properties and events that enable flexible design adaptation to specific application needs.

Day and Time Cell Format

The renderDayCell event provides an option to customize the appearance of each day cell during rendering. This allows for applying custom styles or disabling specific dates based on application logic.

The following example demonstrates disabling weekends in every month using the renderDayCell event:

[Class-component]

import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    onRenderCell(args) {
        if (args.date.getDay() === 0 || args.date.getDay() === 6) {
            // sets isDisabled to true to disable the date.
            args.isDisabled = true;
        }
    }
    render() {
        return <DateTimePickerComponent id="datetimepicker" renderDayCell={this.onRenderCell} placeholder="Select a date and time"/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
import { DateTimePickerComponent, RenderDayCellEventArgs } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {

    public onRenderCell(args: RenderDayCellEventArgs): void {
        if ((args.date as Date).getDay() === 0 || (args.date as Date).getDay() === 6) {
            // sets isDisabled to true to disable the date.
            args.isDisabled = true;
        }
     }

    public render() {
        return <DateTimePickerComponent id="datetimepicker" renderDayCell={this.onRenderCell} placeholder="Select a date and time"/>
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    function onRenderCell(args) {
        if (args.date.getDay() === 0 || args.date.getDay() === 6) {
            // sets isDisabled to true to disable the date.
            args.isDisabled = true;
        }
    }
    return <DateTimePickerComponent id="datetimepicker" renderDayCell={onRenderCell} placeholder="Select a date and time"/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));
import { DateTimePickerComponent, RenderDayCellEventArgs } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App(){
    function onRenderCell(args: RenderDayCellEventArgs): void {
        if ((args.date as Date).getDay() === 0 || (args.date as Date).getDay() === 6) {
            // sets isDisabled to true to disable the date.
            args.isDisabled = true;
        }
     }

    return <DateTimePickerComponent id="datetimepicker" renderDayCell={onRenderCell} placeholder="Select a date and time"/>
};
ReactDOM.render(<App />, document.getElementById('element'));

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.

[Class-component]

// import the datetimepickercomponent
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    render() {
        return <DateTimePickerComponent id="datetimepicker" floatLabelType="Auto" placeholder="Select a date and time"/>;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
// import the datetimepickercomponent
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    public render() {
        return <DateTimePickerComponent id="datetimepicker"  floatLabelType="Auto" placeholder="Select a date and time"/>;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

// import the datetimepickercomponent
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    return <DateTimePickerComponent id="datetimepicker" floatLabelType="Auto" placeholder="Select a date and time"/>;
}
ReactDOM.render(<App />, document.getElementById('element'));
// import the datetimepickercomponent
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    return <DateTimePickerComponent id="datetimepicker"  floatLabelType="Auto" placeholder="Select a date and time"/>;
}
ReactDOM.render(<App />, document.getElementById('element'));

See Also