DateTime Field

BsDateTimeField is a fully featured date selection component that let users select a date, time, month, year, or datetime.

Overview

BsDateTimeField uses BsDatePicker and BsPopover components internally and mimics like HTML <input> element. This means that you can add attributes like readonly, disabled, required and it will react to them to give the best experience. You can also use v-model directive to create two-way data bindings on the model-value property.

IMPORTANT

Do not use the model-value property when using v-model.

Style Variants

You can style <bs-date-time-field> to your own preference or use a style variant based on Google Material Design 2 or Material Design 3 specifications.

Default

You can style <bs-date-time-field> that follows Google Material Design 2 specifications by using floating-label property explicitly.

Filled

Use filled property explicitly to enable <bs-date-time-field> with solid fill style. And when combined with floating-label property, <bs-date-time-field> will have a style that follows the Google Material Design 3 specifications.

Outlined

Use outlined property explicitly to enable <bs-date-time-field> with outline style. And when combined with floating-label property, <bs-date-time-field> will have a style that follows the Google Material Design 3 specifications.

Clearable

Define the clear-button property explicitly, so that the field value can be cleared easily.

DateTime Formatting

Use display-format property to customize displayed datetime and value-format property to customize the output value format. If display-format property is not defined, then value-format will be used to format the displayed datetime.

INFO

See Luxon for more information about DateTime formatting.

Picker Selection Modes

Use picker-mode property to change the Date Picker view mode and selection mode. Date selection mode is the default selection. You need to adjust the display-format and value-format properties to match the picker-mode.

Date mode

DateTime mode

Month mode

Year mode

Time mode

Picker Color Style

The Date picker colors can be customize using the picker-color and header-color property.

TIP

Any MDBootstrap Color variants and Material Color variants can be be applied to the header-color and picker-color property.

Landscape Orientation

Define landscape-mode property explicitly to display the Date picker in landscape orientation.

INFO

Landscape orientation only works on medium screen size and above.

Hover Display Support

The Date picker can be displayed using mouse on-hover instead of clicking with the open-on-hover property.

Help Text

The help-text property on <bs-date-time-field> adds an help text beneath the DateTime field. And sets the persistent-help-text property to false will make the help text visible only when the DateTime field is focused.

Icons

The properties prepend-icon, prepend-icon-outer, append-icon and append-icon-outer provides the ability to add icon to <bs-date-time-field>.

Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled. Suffix _filled and _outlined_filled will display the same icon style variant.

Updated on v2.1.0

TIP

The default icon of <bs-date-time-field> can be change via append-icon property.

INFO

Since Vue MDBootstrap v2.1.0, Google Material Icons are replaced with Google Material Symbols.

Usage Example

The following is an example that demonstrate more advanced use of the <bs-date-time-field> with form validation.

CSS Variables

Added since v2.0.0

--md-field-active-border-color: rgb(var(--md-field-active-indicator));
--md-field-active-border-width: 2px;
--md-field-color-bg: currentColor;
--md-field-border-color: currentColor;
--md-field-border-width: 1px;
--md-field-control-height: 3.5rem;
--md-field-floating-label-color: var(--md-field-label-color);
--md-field-label-color: currentColor;
--md-field-padding-start: 1rem;
--md-field-padding-end: 1rem;
--md-field-padding-top: 1.625rem;
--md-field-padding-bottom: 0.375rem;

// global css variables
--md-field-primary-indicator-rgb: 98, 0, 238;
--md-field-primary-indicator: rgb(var(--md-field-primary-indicator-rgb));
--md-field-accent-indicator-rgb: 185,156,225;
--md-field-accent-indicator: rgb(var(--md-field-accent-indicator-rgb));
--md-field-active-indicator: var(--md-field-primary-indicator-rgb);

// date picker css variables
--md-datepicker-border-radius: .375rem;
--md-datepicker-padding-x: 1rem;
--md-datepicker-padding-y: 1rem;
--md-datepicker-header-color: #fff;
--md-datepicker-table-header-color: #6c757d;
--md-datepicker-title-font-size: 1.8rem;
--md-datepicker-subtitle-font-size: 1.25rem;

API Reference

Property	Type	Default	Description
action-icon-variant	String	'outlined'	Sets the action icon style variant. Valid values are: outlined, rounded, sharp, filled, outlined_filled, rounded_filled, and sharp_filled. Updated on v2.1.0
append-icon	String		Sets icon to display at the inner right side. Updated on v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled.
append-icon-outer	String		Sets icon to display at the outer right side. Updated on v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled.
autofocus	Boolean	false	Autofocus field when this component is mounted.
clear-button	Boolean	false	Sets auto show the clear button.
disabled	Boolean	false	Enable/disable the component and the <input> element.
display-format	String		The datetime display format. If not defined then value-format property will be used. See Luxon for valid format.
external-validator deprecated	TValidator		Use validator instead.
filled	Boolean	false	Create the component with solid fill style appearance. See Google Material Design for details.
flat	Boolean	false	Create the component with flat style appearance, and removes the borders. The component appearance will be styled like plain text.
floating-label	Boolean	false	Create the component with floating field label. See Google Material Design for details.
header-color	String		The Date picker header panel background color. Any of MDBootstrap Color variants and Material Color variants can be used.
header-panel	Boolean	true	Display Date picker header panel or not.
help-text	String		The help text to display below the field component.
id	String		Sets <input> element ID attribute. This property value is auto generates.
landscape-mode	Boolean	false	Display Date picker in landscape orientation.
locale	String		The locale to be used, default is using browser locale.
model-value v-model	String/Number		Monitored by v-model to maintain this field value. v2.0.0
name	String		Sets <input> element name attribute.
open-on-hover	Boolean	false	Display the Date picker when mouse hover the component.
outlined	Boolean	false	Create the component with outline style appearance. See Google Material Design spec.
persistent-help-text	Boolean	true	Keeps help text visible when the component is not focused.
picker-cls	String/String[]	'rounded shadow'	Additional Popover css classes.
picker-color	String	'bottom-left'	The Date picker container background color. v2.0.0 Any of MDBootstrap Color variants and Material Color variants can be used.
picker-mode	String	'date'	The Date picker view mode, valid values are: date, month, year or time. v2.0.0
picker-placement	String	'bottom-left'	The Date picker popup display placement. Valid values are: top, top-left, top-right, bottom, bottom-left, bottom-right, left, left-top, left-bottom, right, right-top, right-bottom.
picker-transition	String	'scale'	Transition animation when showing the Date picker. This animation is effected by picker-placement property. v2.0.0
picker-width	Number	300	The Date picker container width in pixels. v2.0.0
placeholder	String		Sets the field placeholder.
prepend-icon	String		Sets icon to display at the inner left side. Updated on v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled.
prepend-icon-outer	String		Sets icon to display at the outer left side. Updated on v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled.
readonly	Boolean	false	Put the component in readonly state and sets the <input> element readonly attribute.
required	Boolean	false	Sets <input> element required attribute.
transition deprecated	String		Use picker-transition instead.
validation-icon	Boolean	false	Display validation icon or not, when this field has been validated. v2.0.0
validator	TValidator		The configuration options to integrate external validator plugin to validate this field value. v2.0.0
value-format	String	'yyyy-MM-dd'	The field value datetime format. See Luxon for valid format.
view-mode deprecated	String		Use picker-mode instead.

Name	Arguments	Description
blur	( evt:FocusEvent)	Fired when this component lost focus.
clear		Fired after this component value is cleared.
close		Fired when the Date picker is closed or hide.
focus	( evt:FocusEvent)	Fired when this component got focused.
open		Fired when the Date picker popup is open or showed.
update:model-value	( value:String)	Used to update the model-value property. v2.0.0

Name	Description
default	The outlet slot used to place the field label.
append-inner	The outlet slot used to place custom icon or component at the inner right side. v2.0.0
append-outer	The outlet slot used to place custom icon or component at the outer right side. v2.0.0
help-text	The outlet slot used for custom help text. v2.0.0
prepend-inner	The outlet slot used to place custom icon or component at the inner left side. v2.0.0
prepend-outer	The outlet slot used to place custom icon or component at the outer left side. v2.0.0

TValidator

The validator configuration option has properties as described below:

Property	Type	Description
validators	Record<String,Boolean>	External validator plugin validation result.
messages	Record<String,String>	Validation message for each validation types.
hasError	Boolean	An indicator that tells the field value pass the validation or not.
dirty	Boolean	Value comes from validator plugin that indicate the field is dirty or not.

All properties are mandatory.

NOTE

Vue MDBootstrap does not include form validation by default, we leave that up to the 3rd party form validation plugin. As of now, Vuelidate has been fully tested with our component library.