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%);