Search results

Customization in React DateTimePicker component

24 May 2022 / 2 minutes to read

The DateTimePicker is available for UI customization that can be achieved by using available properties and events in the component.

Day and Time Cell format

The DateTimePicker 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.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
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'));
Copied to clipboard
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'));

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.

Source
Preview
index.jsx
asterisk.css
index.tsx
Copied to clipboard
// 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'));
Copied to clipboard
#element {
    max-width: 250px;
    margin: 0 auto;
}

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

.e-input-group.e-control-wrapper.e-float-input .e-float-text::after {
    content: '*';
    color: red;
}
Copied to clipboard
// 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'));

See Also