Syncfusion AI Assistant

How can I help you?

Set the placeholder in React Datepicker component

21 Feb 20262 minutes to read

The placeholder property displays a hint text in the 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 DatePicker component:

// 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'));
// 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'));