DateTime Picker

Select date and time in one picker.

TIP

DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on attributes, you can refer to DatePicker and TimePicker.

Basic usage

You can select date and time in one picker at the same time by setting type to datetime. The way to use shortcuts is the same as Date Picker.

Default

With shortcuts

With default time

---

<template>
  <b-row>
    <b-col>
      <b-form-item label="Default">
        <b-date-picker
          v-model="value1"
          type="datetime"
          placeholder="Select date and time"
        />
      </b-form-item>
    </b-col>
    <b-col>
      <b-form-item label="With shortcuts">
        <b-date-picker
          v-model="value2"
          type="datetime"
          placeholder="Select date and time"
          :shortcuts="shortcuts"
        />
      </b-form-item>
    </b-col>
    <b-col>
      <b-form-item label="With default time">
        <b-date-picker
          v-model="value3"
          type="datetime"
          placeholder="Select date and time"
          :default-time="defaultTime"
        />
      </b-form-item>
    </b-col>
  </b-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
</script>

Range

You can select date and time range by setting type to datetimerange.

Default

To

With shortcuts

To

---

<template>
  <b-form-item label="Default">
    <b-date-picker
      v-model="value1"
      type="datetimerange"
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date"
    />
  </b-form-item>

  <b-form-item label="With shortcuts">
    <b-date-picker
      v-model="value2"
      type="datetimerange"
      :shortcuts="shortcuts"
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date"
    />
  </b-form-item>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref<[Date, Date]>([
  new Date(2000, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10),
])
const value2 = ref('')

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
</script>

DateTime Formats

Use format to control displayed text's format in the input box. Use value-format to control binding value's format.

By default, the component accepts and emits a Date object.

Check the list here of all available formats of Day.js.

WARNING

Pay attention to capitalization

Emits Date object

Value:

Use value-format

Value:

Timestamp

Value:

---

<template>
  <b-row>
    <b-col>
      <b-form-item label="Emits Date object" :help-text="`Value: ${value1}`">
        <b-date-picker
          v-model="value1"
          type="datetime"
          placeholder="Pick a Date"
          format="YYYY/MM/DD HH:mm:ss"
        />
      </b-form-item>
    </b-col>
    <b-col>
      <b-form-item label="Use value-format" :help-text="`Value: ${value2}`">
        <b-date-picker
          v-model="value2"
          type="datetime"
          placeholder="Pick a Date"
          format="YYYY/MM/DD hh:mm:ss"
          value-format="YYYY-MM-DD h:m:s a"
        />
      </b-form-item>
    </b-col>
    <b-col>
      <b-form-item label="Timestamp" :help-text="`Value: ${value3}`">
        <b-date-picker
          v-model="value3"
          type="datetime"
          placeholder="Pick a Date"
          format="YYYY/MM/DD hh:mm:ss"
          value-format="x"
        />
      </b-form-item>
    </b-col>
  </b-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
</script>

Default time value

When picking date range on the date panel with type datetimerange, 00:00:00 will be used as the default time value for start and end date. We can control it with the default-time attribute. default-time accepts an array of up to two Date objects. The first item controls time value of the start date and the second item controls time value of the end date.

—

Start and end date time 12:00:00

—

Start date time 12:00:00, end date time 08:00:00

---

<template>
  <b-form-item help-text="Start and end date time 12:00:00">
    <b-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="defaultTime1"
    />
  </b-form-item>

  <b-form-item help-text="Start date time 12:00:00, end date time 08:00:00">
    <b-date-picker
      v-model="value2"
      type="datetimerange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="defaultTime2"
    />
  </b-form-item>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')

const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'
const defaultTime2: [Date, Date] = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'
</script>

Attributes

Name	Description	Type	Accepted Values	Default
model-value / v-model	binding value, if it is an array, the length should be 2	Date / number / string / Array	—	—
readonly	whether DatePicker is read only	boolean	—	false
disabled	whether DatePicker is disabled	boolean	—	false
editable	whether the input is editable	boolean	—	true
clearable	whether to show clear button	boolean	—	true
size	size of Input	string	large / default / small	default
placeholder	placeholder in non-range mode	string	—	—
start-placeholder	placeholder for the start date in range mode	string	—	—
end-placeholder	placeholder for the end date in range mode	string	—	—
time-arrow-control	whether to pick time using arrow buttons	boolean	—	false
type	type of the picker	string	year / month / date / datetime / week / datetimerange / daterange	date
format	format of the displayed value in the input box	string	see date formats	YYYY-MM-DD HH:mm:ss
popper-class	custom class name for DateTimePicker's dropdown	string	—	—
range-separator	range separator	string	—	'-'
default-value	optional, default date of the calendar	Date / [Date, Date]		—
default-time	the default time value after picking a date. Time 00:00:00 will be used if not specified	Date / [Date, Date]	—	—
value-format	optional, format of binding value. If not specified, the binding value will be a Date object	string	see date formats	—
id	same as id in native input	string / [string, string]	—	—
name	same as name in native input	string	—	—
unlink-panels	unllink two date-panels in range-picker	boolean	—	false
suffix-icon	Custom suffix icon component	string | Component	—	Calendar
clear-icon	Custom clear icon component	string | Component	—	Close
shortcuts	an object array to set shortcut options	object[{ text: string, value: date / function }]	—	—
disabled-date	a function determining if a date is disabled with that date as its parameter. Should return a Boolean	function(Date)	—	—
cell-class-name	set custom className	Function(Date)	—	—
teleported	whether datetime-picker dropdown is teleported to the body	boolean	true / false	true

Events

Name	Description	Parameters
change	triggers when user confirms the value	component's binding value
blur	triggers when Input blurs	(e: FocusEvent)
focus	triggers when Input focuses	(e: FocusEvent)
calendar-change	triggers when the calendar selected date is changed. Only for datetimerange	[Date, Date]
visible-change	triggers when the DateTimePicker's dropdown appears/disappears	true when it appears, and false otherwise

Methods

Method	Description	Parameters
focus	focus the Input component	—

Slots

Name	Description
default	custom cell content
range-separator	custom range separator content