Date Picker

BsDatePicker is a component that generates a calendar style date selection widget.

Updated in v2.2.0

Overview

BsDatePicker comes in two orientation variations, portrait (default) and landscape. Additionaly, you can use v-model directive to create two-way data bindings on the model-value property.

Default Orientation

Landscape Orientation

INFO

Landscape orientation only works on medium screen size and above.

Custom Color

<bs-date-picker> color styles can be customize using properties: header-color, button-color, selected-color, surface-class.

Updated in v2.2.0

Picker Selection Modes

Use mode property to change the Date Picker view mode and selection mode. Date selection mode is the default selection.

Date mode

DateTime mode

Month mode

Year mode

Time mode

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-datepicker for better customization.

Updated in v2.2.0

.md-datepicker {
  --md-datepicker-border-radius: var(--md-radius) ;
  --md-datepicker-padding-x: #{vars.$padding-md};
  --md-datepicker-padding-y: #{vars.$padding-md};
  --md-datepicker-bg: var(--background-tertiary);
  --md-datepicker-color: var(--foreground);
  --md-datepicker-header-color: #{colors.$white};
  --md-datepicker-header-font-weight: var(--font-weight-medium);
  --md-datepicker-table-header-color: #{colors.$gray-500};
  --md-datepicker-title-font-size: 1.8rem;
  --md-datepicker-subtitle-font-size: 1.25rem;
}

API Reference

Property	Type	Default	Description
full-width	Boolean	false	Display Date picker in 100% width or occupy its parent element width.
button-color	String	'secondary'	Sets calendar date, month, year time and navigation button color. v2.2.0 Built-in color variants are: default, primary, secondary, success, warning, danger, info, light and dark.
header-color	String	'primary'	Date picker header panel background color. Updated in v2.2.0 Built-in color variants are: default, primary, secondary, success, warning, danger and info.
header-panel	Boolean	true	Show or hide header panel.
landscape	Boolean	false	Display Date picker in landscape orientation.
locale	String		Default locale to be used. Default value is using browser's locale.
mode	String	'date'	DateTime picker view mode, valid values are: date, month, year, time or datetime. v2.0.0
model-value v-model	String|Number|Date		Monitored by v-model to maintain the component's value. The value must be convertible to datetime. v2.0.0 The initial value can be: From an ISO 8601 valid string. From a number of seconds since the epoch (meaning since 1 January 1970 00:00:00 UTC).
readonly	Boolean	false	Put Date picker in readonly state.
selected-color	String	'primary'	Sets selected calendar date, month, year and time button color. v2.2.0 Default is interpolated from header-color.
surface-class	String		Optional, sets custom css class for date picker's container background and text. v2.2.0
surface-color deprecated	String		Date picker container background color. Use surface-class instead.
view-mode deprecated	String		Use mode property instead.
width	Number	300	Date picker's container width in pixels.

Name	Arguments	Description
update:model-value	(value:String)	Fired when this component's model-value is updated. v2.0.0