vue-bootstrap

# Datepicker

# Demo

  • August 2019
    SuMoTuWeThFrSa
    28 29 30 31 1 2 3
    4 5 6 7 8 9 10
    11 12 13 14 15 16 17
    18 19 20 21 22 23 24
    25 26 27 28 29 30 31
    1 2 3 4 5 6 7 
<datepicker value="2019-08-31 23:55" mode="datetime"></datepicker>

# Props

name

Type
String

Description
The name attribute of the input element
value

Type
String

Description
Initial value, it needs to have a format such as 2017-03-01 or 2017-03-01 12:10
id

Type
String

Description
The id attribute of the input element
container-class

Type
String

Description
The class/classes of the container element
formatter

Type
Function

Default
null

Description

Callback used for formatting the date input. It receives current date in "YYYY-MM-DD (HH:MM)" format as a parameter. Can be easily used with moment.js: 

formatter(date) {
  return moment(date)
    .locale(this.momentLocale)
    .format(this.format);
}
parser

Type
Function

Default
null

Description

Callback used for parsing date from text input. It receives date locale format and parses it out to "YYYY-MM-DD (HH:MM)". Can be easily used with moment.js: 

formatter(date) {
  return moment(date)
    .locale(this.momentLocale)
    .format(this.format);
}
use-am

Type
Boolean

Default
false

Description
If true the hour will be displayed in AM/PM format
days-of-week

Type
Array

Default
['Su', 'Mo', 'Tu', ...]

Description
Days of the week
highlight-today

Type
Boolean

Default
true

Description
Highlights today in the calendar
icons

Type
Object

Default
{ left: 'glyphicon glyphicon-chevron-left', ... }

Description
Icons for UI buttons
mode

Type
String

Default
date

Description
Mode can be set to date, datetime or time
months

Type
Array

Default
['January', 'February', 'March', ...]

Description
Month names
months-short

Type
Array

Default
['Jan', 'Feb', 'Mar', ...]

Description
Short month names, used on the month selector view
placeholder

Type
String

Description
The placeholder attribute of the input element
translations

Type
Object

Default
{ today: 'Go to today', clear: 'Clear selection', ... }

Description
Allows to override tooltips with messages in another language
disabled

Type
Boolean

Default
false

Description
Disable input
timezones

Type
Array

Default
[{'UTC': '(GMT +00:00) UTC'}, {'Australia/Sydney': '(GMT +11:00) Australia/Sydney'}]

Description
Timezones for timezones selector
momentLocale

Type
String

Default
en-gb

Description
Date locale to be used by moment.js library
momentDateFormat

Type
String

Default
YYYY-MM-DD

Description
Date format to be used by moment.js library
momentTimeFormat

Type
String

Default
HH:mm

Description
Time format to be used by moment.js library

# Events

changed

Parameters
Selected date (String)

Description
Emitted when the date is changed

← Dropdown →