---
title: "Vue Date & Time Setting values Example | Mobiscroll"
component: "Date & Time"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/datetime/setting-values-defaults"
---

# Setting values - Vue Date & Time demo

Vue Date & time picker demo with different ways to set values and defaults. Custom buttons and presets - like Now - supported. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/datetime/setting-values-defaults)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/datepicker/datetime/setting-values-defaults)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/datepicker/datetime/setting-values-defaults)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/datetime/setting-values-defaults.md), [jQuery](https://demo.mobiscroll.com/jquery/datetime/setting-values-defaults.md), [Angular](https://demo.mobiscroll.com/angular/datetime/setting-values-defaults.md), [React](https://demo.mobiscroll.com/react/datetime/setting-values-defaults.md)

## Description

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`](https://mobiscroll.com/docs/vue/datepicker/api#opt-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`](https://mobiscroll.com/docs/vue/datepicker/api#opt-buttons) option for showing/hiding `set`, `cancel` or add custom buttons.

## What this demo shows

- Three example groups demonstrate how to control a wheel-style date picker value through defaults, runtime updates, and action buttons.
- **Date selection** Separate scrollable wheels let users select the month, day, and year. The selected values appear in a central selection area, while neighboring values remain visually subdued.
- **Scrolling behavior** Users can scroll vertically through neighboring values to move between dates, including dates in other months or years.
- **Footer actions** In the input-based examples, the gray `Cancel` button discards the change, while the blue `Set` button confirms the selected date.
- **Input value** In the input-based examples, confirming a date with `Set` displays the selected value in the input using a month, day, and year format.
- **Default values**: The first example group compares the default behavior with a date picker initialized to a specific value through the `defaultSelection` option.
- **Runtime values**: The second example group combines interactive selection with programmatic updates. Two external buttons set a specific date or return the date picker to the current date.
- **Button-based values**: The third example group demonstrates the button API with three configurations: a `Now` button that selects the current date, a custom button that selects a predefined date, and automatic value confirmation with the Set button removed.

## Best for

- **Preselected dates** Initialize a date picker with a meaningful default, such as a previously saved date or a suggested appointment date.
- **External controls** Update the selected date from controls outside the date picker, such as date shortcuts, reset actions, or workflow navigation.
- **Date shortcuts** Provide one-click actions for commonly used values, including the current date or a predefined date.
- **Automatic confirmation** Apply a date immediately after selection in workflows where a separate Set action is unnecessary.

## Tutorial

### Controlling the default value

The calendar defaults to today if not overridden. You can however manually set a default value through the [`defaultSelection`](https://mobiscroll.com/docs/vue/datepicker/api#opt-defaultSelection) option.

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

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

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

### 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.

```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.

```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>
```

```vue
<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>
```

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

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

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/vue/datepicker/api#opt-controls) - option
- [`defaultSelection`](https://mobiscroll.com/docs/vue/datepicker/api#opt-defaultSelection) - option
- [`display`](https://mobiscroll.com/docs/vue/datepicker/api#opt-display) - option
- [`buttons`](https://mobiscroll.com/docs/vue/datepicker/api#opt-buttons) - option

## Code

### SFC JS

```vue
<script setup>
import {
  MbscButton,
  MbscDatepicker,
  MbscPage,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myDefaultSelection = new Date(2020, 11, 24)
const myCustom = ref()

const now = ref()
const nowRef = ref()
const custom = ref()
const customRef = ref()

const nowButtons = [
  {
    text: 'Now',
    handler: () => {
      now.value = new Date()
      nowRef.value.instance.close()
    }
  }
]

const customButtons = [
  {
    text: '05 Jan 2020',
    handler: () => {
      custom.value = new Date(2020, 0, 5)
      customRef.value.instance.close()
    }
  },
  'set',
  'cancel'
]

const autoButtons = ['close']

function setValue() {
  myCustom.value = new Date(2020, 0, 2)
}

function setToday() {
  myCustom.value = new Date()
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Controlling the default value</div>
      <MbscDatepicker label="Default" placeholder="Please select..." :controls="['date']" />
      <MbscDatepicker
        label="Custom default"
        placeholder="Please select..."
        :controls="['date']"
        :defaultSelection="myDefaultSelection"
      />
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Setting a custom value</div>
      <div class="mbsc-button-group-block">
        <MbscButton @click="setValue">02-01-2020</MbscButton>
        <MbscButton @click="setToday">Today</MbscButton>
      </div>
      <MbscDatepicker :controls="['date']" v-model="myCustom" display="inline" />
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Buttons API</div>
      <MbscDatepicker
        ref="nowRef"
        label="Now"
        placeholder="Please select..."
        v-model="now"
        :controls="['date']"
        :buttons="nowButtons"
      />
      <MbscDatepicker
        ref="customRef"
        label="Custom"
        placeholder="Please select..."
        v-model="custom"
        :controls="['date']"
        :buttons="customButtons"
      />
      <MbscDatepicker
        label="Auto set"
        placeholder="Please select..."
        :controls="['date']"
        :buttons="autoButtons"
      />
    </div>
  </MbscPage>
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  MbscButton,
  MbscDatepicker,
  MbscPage,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myDefaultSelection = new Date(2020, 11, 24)
const myCustom = ref()

const now = ref()
const nowRef = ref()
const custom = ref()
const customRef = ref()

const nowButtons = [
  {
    text: 'Now',
    handler: () => {
      now.value = new Date()
      nowRef.value.instance.close()
    }
  }
]

const customButtons = [
  {
    text: '05 Jan 2020',
    handler: () => {
      custom.value = new Date(2020, 0, 5)
      customRef.value.instance.close()
    }
  },
  'set',
  'cancel'
]

const autoButtons = ['close']

function setValue() {
  myCustom.value = new Date(2020, 0, 2)
}

function setToday() {
  myCustom.value = new Date()
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Controlling the default value</div>
      <MbscDatepicker label="Default" placeholder="Please select..." :controls="['date']" />
      <MbscDatepicker
        label="Custom default"
        placeholder="Please select..."
        :controls="['date']"
        :defaultSelection="myDefaultSelection"
      />
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Setting a custom value</div>
      <div class="mbsc-button-group-block">
        <MbscButton @click="setValue">02-01-2020</MbscButton>
        <MbscButton @click="setToday">Today</MbscButton>
      </div>
      <MbscDatepicker :controls="['date']" v-model="myCustom" display="inline" />
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Buttons API</div>
      <MbscDatepicker
        ref="nowRef"
        label="Now"
        placeholder="Please select..."
        v-model="now"
        :controls="['date']"
        :buttons="nowButtons"
      />
      <MbscDatepicker
        ref="customRef"
        label="Custom"
        placeholder="Please select..."
        v-model="custom"
        :controls="['date']"
        :buttons="customButtons"
      />
      <MbscDatepicker
        label="Auto set"
        placeholder="Please select..."
        :controls="['date']"
        :buttons="autoButtons"
      />
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- Use `controls: ['date']` for the base wheel picker; the picker defaults to the current date/time (`now`) if no value or default is set.
- Set `defaultSelection` to a `Date` object (e.g. `new Date(2020, 11, 24)`) to seed the initial value shown before the user or app ever sets one - this only affects the uncontrolled initial render, not subsequent updates.
- To change the value programmatically after init: in React/Angular/Vue, update the bound `value`/`v-model`/`[(ngModel)]`; in JS/jQuery call the `setVal(date)` method on the instance, e.g. `instance.setVal(new Date())` or `instance.setVal(new Date(2020, 0, 2))`.
- Use the `buttons` array to control the footer actions: pass string shortcuts like `'set'`/`'cancel'` to keep the defaults, or objects `{ text: 'Now', handler: () => { instance.setVal(new Date()); instance.close(); } }` to add a custom action button that sets a value and closes the picker.
- Omitting the `'set'` button (e.g. `buttons: [{ text: 'Close', handler: 'cancel' }]`) makes any wheel selection apply immediately without a separate confirmation step - there is no dedicated "auto-set" option, it's simply the absence of a `'set'` button.
- The `handler` value can be a function for custom logic or the string `'cancel'`/`'set'` to reuse the built-in close/confirm behavior.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Credit card expiration](https://demo.mobiscroll.com/vue/datetime/month-year-picker.md) - Vue credit card expiration date select. Set up the date picker with month/year configuration.
- Next: [Timezones](https://demo.mobiscroll.com/vue/datetime/setting-the-picker-timezone.md) - Vue date time picker with multiple timezone support. Make selection in one TZ and return value in a different TZ.