Vue Date & Time Setting values Example

Values can change in a couple of different ways: through defaults, interacting with the UI or programmatically. The date and time picker defaults to now, which can be easily overridden with the defaultSelection option. The values are set by interacting with the component and making a selection or it can be done programmatically by updating the bound value. Use the buttons option for showing/hiding set, cancel or add custom buttons.

Get started with this example

Controlling the default value

The calendar defaults to today if not overridden. You can however manually set a default value through the defaultSelection option.

Javascript jQuery Angular React Vue

                            <template>
  <MbscDatepicker
    :controls="['date']"
  />
</template>
                        

                            <script setup>
const myDefaultSelection = new Date(2020, 11, 24)
</script>

<template>
  <MbscDatepicker
    :controls="['calendar']"
    :defaultSelection="myDefaultSelection"
  />
</template>
                        

Default

Custom default

Setting values runtime

While the selected value can be changed by interacting with the calendar, you can set the model value to change it programmatically.

Javascript jQuery Angular React Vue

                        <script setup>
const myCustom = ref()

function setValue() {
  myCustom.value = new Date(2020, 0, 2)
}
function setToday() {
  myCustom.value = new Date()
}
</script>
<template>
  <MbscButton @click="setValue">02-01-2020</MbscButton>
  <MbscButton @click="setToday">Today</MbscButton>
  <MbscDatepicker
    :controls="['date']"
    v-model="myCustom"
  />
</template>
                

Not all days have flights

The button API provides shortcuts to value selection and confirmation. Add 'Now' or custom button to the component or entirely remove the 'Set' button to activate auto-set, which automatically closes the dialog if a date is selected.

Javascript jQuery Angular React Vue

                            <script setup>
const now = ref()
const nowRef = ref()
const nowButtons = [
  {
    text: 'Now',
    handler: () => {
      now.value = new Date()
      nowRef.value.instance.close()
    }
  }
]
</script>
<template>
  <MbscDatepicker
    ref="nowRef"
    v-model="now"
    :controls="['date']"
    :buttons="nowButtons"
  />
</template>
                        

                            <script setup>
const custom = ref()
const customRef = ref()
const customButtons = [{
  text: '05 Jan 2020',
  handler: () => {
    custom.value = new Date(2020, 0, 5)
    customRef.value.instance.close()
  }
}, 'set', 'cancel']
</script>
<template>
  <MbscDatepicker
    v-model="custom"
    ref="customRef"
    :controls="['date']"
    :buttons="customButtons"
  />
</template>
                        

                            <script setup>
const autoButtons = ['close']
</script>

<template>
  <MbscDatepicker
    :controls="['calendar']"
    :buttons="autoButtons"
  />
</template>
                        