How To

The following section explains how the DatePicker can be easily customizable in various aspects.

Disabled State

To disable the DatePicker, use its enable property.

The following example demonstrates the DatePicker in a disabled state.

Source
Preview
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';

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

    private enable:boolean = false;

    render() {
        return (
            // specifies the tag for render the DatePicker component
            <DatePickerComponent enabled={this.enable} placeholder="Enter date"/>
        );
     }
 }

ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React DatePicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Set the placeholder

The following example demonstrates how to set placholder in the DatePicker component.

Using placeholder you can display a short hint in the input element.

Source
Preview
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';

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'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React DatePicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Set the readonly

The following example demonstrates how to set readonly in DatePicker component. You can achieve this by using readonly property.

Source
Preview
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';

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

    private readonly: boolean = true;

    render() {
        return (
            // specifies the tag for render the DatePicker component
            <DatePickerComponent readonly={this.readonly} placeholder="Enter date"/>
        );
     }
 }

ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React DatePicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Prevent the popup close

To prevent the DatePicker popup from closing, use the preventDefault method from the PreventableEventArgs.

The following example demonstrates how to prevent the popup from closing.

Source
Preview
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// import the datepickercomponent
import { DatePickerComponent, PreventableEventArgs } from '@syncfusion/ej2-react-calendars';

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

    public onClose(args: PreventableEventArgs){
     // prevent the popup close
        args.preventDefault();
    }

    render() {
        return (
            // specifies the tag for render the DatePicker component
            <DatePickerComponent close={this.onClose} placeholder="Enter date"/>
        );
     }
 }

ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React DatePicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Dynamic form validation

Dynamic form can be very useful and more economical to create the forms based on JSON data and without need for adding/changing any code.

  • For the dynamic forms, we can create a new React tsx called dynamic-form.tsx which is responsible for rendering a dynamic form based on the Json data.

The following example demonstrates how to create the sign up form dynamically.

Source
Preview
data.tsx
dynamicform.tsx
index.tsx
index.html
export const data = {
     A_FirstName: {
        floatLabelType: 'Auto',
        key: 'FirstName',
        label: 'First Name',
        placeholder: 'First Name',
        type: 'text',
        validation: {
            required: true
        }
    },
    B_LastName: { 
        floatLabelType: 'Auto',
        key: 'LastName',
        label: 'Last Name',
        placeholder: 'Last Name',
        type: 'text',
        validation: {
            required: true
        }
    },
    C_Email_ID: {
        floatLabelType: 'Auto',
        key: 'Email_ID',
        label: 'Mail ID',
        placeholder: 'Email',
        type: 'email',
        validation: {
            required: true
        }
    },
    D_Password: {
        floatLabelType: 'Auto',
        key: 'Password',
        label: 'Password',
        placeholder: 'Password',
        type: 'password',
        validation: {
            required: true
        }
    },
   E_DOB: {
        floatLabelType: 'Auto',
        key: 'DOB',
        label: 'DOB',
        placeholder: 'DOB',
        type: 'date',
        validation: {
            required: true
        },
        width: '250px'
    },
    F_Accept: {
        key: 'Accept',
        label: 'Accept terms and conditions',
        type: 'checkbox',
        validation: {
            required: true
        }
    },
    G_Submit: {
        key: 'Button',
        type: 'submit'
    },
}
// import the Button component
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import the CheckBox component
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
// import the DatePicker component
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
// import the TextBox component
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

export default class DynamicForm extends React.Component<any, any> {
  public objectProps: any;

  constructor(props: any) {
    super(props);
  }

  public onSubmit() {
    alert("Form submitted!!!");
  }

  public renderStatus(element: any) {
    switch (element.type) {
      case 'date':
        return <div>
          <DatePickerComponent
            type={element.type}
            floatLabelType={element.floatLabelType}
            placeholder={element.placeholder}
            width={element.width} />
        </div>
      case 'checkbox':
        return <div id = "checkBox">
          <CheckBoxComponent
            type={element.type}
            label={element.label} />
        </div>
      case 'submit':
        return <ButtonComponent id={element.type}
          type={element.type}> Sign up </ButtonComponent>
      default:
        return <div id="textValue">
          <TextBoxComponent
            type={element.type}
            floatLabelType={element.floatLabelType}
            placeholder={element.placeholder} />
        </div>
    }
  }

  render() {
    this.objectProps = this.props;
    return (
      Object.keys(this.objectProps.dataObject).map((key, value) => {
      return (
        <div key={key.toString()}>
            <form onSubmit={this.onSubmit} >
              { this.renderStatus(this.objectProps.dataObject[key]) }
            </form>
        </div>
      );
    })
   )
  }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { data } from './data';
import DynamicForm from './dynamicform';

export default class App extends React.Component<{}, {}> {
    public data : any;

    constructor(props: any) {
        super(props);
        this.data = data;
    }

    render() {
        return (
            <div className = "wrap">
                <div className= "outerbox">
                    <div className = "formValue">
                        <DynamicForm dataObject = {data} />
                    </div>
                </div>
            </div>
        );
     }
 }

ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React DatePicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>