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
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. |