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 datepickerOptions and timepickerOptions. 

        
            
        import React from 'react';
        import { MDBDateTimepicker } from 'mdb-react-ui-kit';
        
        export default function App() {
          return <MDBDateTimepicker datepickerOptions={{ defaultValue:'22/01/2019' }} timepickerOptions={{ defaultValue:'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} />
datepickerOptions { [key: string]: any } Sets custom options for our MDBDatepicker component. <MDBDateTimepicker datepickerOptions={{ format: 'dd-mm-yyyy' }} />
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 />
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!' />
value string Enables controlling datetimepicker's input value <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 />
timepickerOptions { [key: string]: any } Sets custom options for our MDBTimepicker component. <MDBDateTimepicker timepickerOptions={{ format: '24h' }} />

Events

Name Type Description
onChange () => any Fires when the new input value changes.
onClose () => void Fires when the datetimepicker is closed.
onTimepickerClose () => void Fires when the Timepicker is closed.
onDatepickerClose () => void Fires when the Datepicker is closed.
onOpen () => void Fires when the datetimepicker is opened.
onTimepickerOpen () => void Fires when the Timepicker is opened.
onDatepickerOpen () => void Fires when the Datepicker is opened.

CSS variables

Edit in sandbox 
        
            
        // .buttons-container
        --#{$prefix}datetimepicker-buttons-container-background-color: #{$datetimepicker-buttons-container-background-color};
        --#{$prefix}datetimepicker-button-toggle-width: #{$datetimepicker-button-toggle-width};
        --#{$prefix}datetimepicker-button-toggle-color: #{$datetimepicker-button-toggle-color};
        --#{$prefix}datetimepicker-button-toggle-font-size: #{$datetimepicker-button-toggle-font-size};
        --#{$prefix}datetimepicker-button-toggle-border-radius: #{$datetimepicker-button-toggle-border-radius};
        --#{$prefix}datetimepicker-button-toggle-min-height: #{$datetimepicker-button-toggle-min-height};
        --#{$prefix}datetimepicker-button-toggle-hover-background-color: #{$datetimepicker-button-toggle-hover-background-color};
        
        // .datetimepicker-toggle-button
        --#{$prefix}datetimepicker-toggle-button-transform: #{$datetimepicker-toggle-button-transform};

SCSS variables

Edit in sandbox 
        
            
        $datetimepicker-buttons-container-background-color: $primary;
        $datetimepicker-button-toggle-width: 50%;
        $datetimepicker-button-toggle-color: white;
        $datetimepicker-button-toggle-font-size: 23px;
        $datetimepicker-button-toggle-border-radius: 10px;
        $datetimepicker-button-toggle-min-height: 40px;
        $datetimepicker-button-toggle-hover-background-color: rgba(0, 0, 0, 0.15);
        $datetimepicker-toggle-button-transform: translate(-50%, -50%);