How to set the placeholder in React DatePicker

04 Sep 20261 minute to read

The placeholder property displays a hint text in the React DatePicker input field when it is empty. This helps guide users on the expected date format or input requirement.

The following example demonstrates how to set a custom placeholder in the React DatePicker component:

index.jsx

// import the datepickercomponent
import { DatePickerComponent } 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 (
        // specifies the tag for render the DatePicker component
        <DatePickerComponent placeholder="Choose a date"/>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

// import the datepickercomponent
import { DatePickerComponent } 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 (
            // specifies the tag for render the DatePicker component
            <DatePickerComponent  placeholder="Choose a date"/>
        );
     }
 }

ReactDOM.render(<App />, document.getElementById('element'));