Date Picker

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

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.

Color Style

<bs-date-picker> colors can be customize using the surface-color and header-color property.

TIP

Any MDBootstrap Color variants and Material Color variants can be be applied to the <bs-date-picker> component.

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

Added since v2.0.0

--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
full-width	Boolean	false	Display Date picker in 100% width or occupy its parent element width.
header-color	String	'primary'	Date picker header panel background color. Any of MDBootstrap Color variants and Material Color variants can be used.
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.
surface-color	String	'white'	Date picker container background color. v2.0.0 Any of MDBootstrap Color variants and Material Color variants can be used.
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