Set the placeholder in React Daterangepicker component

18 Nov 20181 minute to read

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

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

index.jsx

// import the daterangepicker component
import { DateRangePickerComponent } 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 <DateRangePickerComponent placeholder='Select a range'/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

// import the daterangepicker component
import { DateRangePickerComponent } 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 <DateRangePickerComponent placeholder='Select a range' />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));