DateTimepicker

Bootstrap 5 DateTimepicker

DateTimepicker is a form that adds the function of selecting date and time.

Note: Read the API tab to find all available options and advanced customization

Basic example

Input with a modal for selecting a date and time.

        
            
          import React from 'react';
          import { MDBDateTimepicker } from 'mdb-react-ui-kit';
          
          export default function App() {
            return <MDBDateTimepicker />;
          }

Inline version

You can use inline version with inline prop.

        
            
        import React from 'react';
        import { MDBDateTimepicker } from 'mdb-react-ui-kit';
        
        export default function App() {
          return <MDBDateTimepicker inline />;
        }

Disabled

Use disabled property on DateTimepicker to give it a grayed out appearance and remove pointer events.

        
            
        import React from 'react';
        import { MDBDateTimepicker } from 'mdb-react-ui-kit';
        
        export default function App() {
          return <MDBDateTimepicker disabled />;
        }

Default values

You can set default date and time with options defaultDate and defaultTime. 

        
            
        import React from 'react';
        import { MDBDateTimepicker } from 'mdb-react-ui-kit';
        
        export default function App() {
          return <MDBDateTimepicker defaultDate='22/01/2019' defaultTime='10:33 PM' />;
        }

Invalid label

Add invalidLabel with specified value, to change the invalid label message. 

        
            
        import React from 'react';
        import { MDBDateTimepicker } from 'mdb-react-ui-kit';
        
        export default function App() {
          return <MDBDateTimepicker invalidLabel='Correct your input' />;
        }

Input toggle

Add inputToggle prop to the input element to enable toggling on input click. 

        
            
          import React from 'react';
          import { MDBDateTimepicker } from 'mdb-react-ui-kit';
          
          export default function App() {
            return <MDBDateTimepicker inputToggle />;
          }

Custom date and time options

Use datepickerOptions or timepickerOptions props to set custom options from our Datepicker and Timepicker components.

Datepicker options

        
            
          import React from 'react';
          import { MDBDateTimepicker } from 'mdb-react-ui-kit';
          
          export default function App() {
            return <MDBDateTimepicker datepickerOptions={{ format: 'dd-mm-yyyy' }} />;
          }

Timepicker options

        
            
            import React from 'react';
            import { MDBDateTimepicker } from 'mdb-react-ui-kit';
            
            export default function App() {
              return <MDBDateTimepicker timepickerOptions={{ format: '24h' }} />;
            }

DateTimepicker - API

Import

Edit in sandbox 
        
            
          import { MDBDateTimepicker } from 'mdb-react-ui-kit';

Properties

MDBDateTimepicker

Name Type Default Description Example
appendValidationInfo boolean true Adds validation info to the bottom of input. <MDBDateTimepicker appendValidationInfo={false} />
dateFormat string 'dd/mm/yyyy' Changes date format displayed in input <MDBDateTimepicker dateFormat='dd-mm-yyyy' />
datepickerOptions { [key: string]: any } Sets custom options for our MDBDatepicker component. <MDBDateTimepicker datepickerOptions={{ format: 'dd-mm-yyyy' }} />
defaultDate string Allows to set default date. <MDBDateTimepicker defaultDate='22/01/2019' />
defaultTime string Allows to set default time. <MDBDateTimepicker defaultTime='10:33 PM' />
disabled boolean false Set a disabled attribute to input in wrapper. <MDBDateTimepicker disabled />
inline boolean false Allows to use a inline version of datetimepicker. <MDBDateTimepicker inline />
inputRef React.RefObject Reference to inputRef <MDBDateTimepicker inputRef={myRef} />
inputToggle boolean false Enable toggling MDBDateTimepicker on input click. <MDBDateTimepicker inputToggle />
invalidLabel string Allows to set the value of invalid label. <MDBDateTimepicker invalidLabel='Correct your inputs!' />
label string 'Select Date and Time' Defines a label text for the input <MDBDateTimepicker label='Date and time' />
labelClass string Adds custom classes to the label <MDBDateTimepicker labelClass='custom-class' />
labelRef React.RefObject Reference to label element <MDBDateTimepicker labelRef={myRef} />
labelStyle React.CSSProperties Adds custom styles to the label <MDBDateTimepicker labelStyle={{ color: 'red' }} />
showFormat boolean false Adds placeholder with current format of MDBDateTimepicker <MDBDateTimepicker showFormat />
timeFormat '12h' | '24h' '12h' Changes time format displayed in input <MDBDateTimepicker timeFormat='24h' />
timepickerOptions { [key: string]: any } Sets custom options for our MDBTimepicker component. <MDBDateTimepicker timepickerOptions={{ format: '24h' }} />

Events

Name Type Description
onChange () => any This event fires immediately when the new input value is set.
onClose () => any This event fires immediately when the datetimepicker is closed.
onOpen () => any This event fires immediately when the datetimepicker is opened.