---
title: "Vue Date & Time Credit card expiration Example | Mobiscroll"
component: "Date & Time"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/datetime/month-year-picker"
---

# Credit card expiration - Vue Date & Time demo

Vue credit card expiration date select. Set up the date picker with month/year configuration. For Vue and Nuxt.

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

## Description

Customize the wheels and format the date picker for month & year. Choose a `month/year` format for the credit card expiration date.

This and even more can be done with the [`dateWheels`](https://mobiscroll.com/docs/vue/datepicker/api#localization-dateWheels) setting.

**Interested in changing the date format?** [Explore formatting options →](https://demo.mobiscroll.com/vue/datetime/formatting-return-values)

## What this demo shows

- Shows a form with fields for the cardholder name, card number, expiration date, and three-digit CVV.
- **Expiration picker** Clicking the expiration field opens a wheel-style month and year picker with separate scrollable wheels for selecting the month and year. The selected values appear in the central selection area, while neighboring values are visually subdued.
- **Scrolling behavior** Users can scroll vertically through the month and year values to change the expiration date.
- **Footer actions** `Cancel` discards the change, while `Set` confirms the selected expiration date.
- **Input value** Confirming the selection displays the expiration date in the input using a `month/year` format.

## Best for

- **Credit card forms** Collecting a card expiration date as a month and year alongside the cardholder name, card number, and CVV.
- **Month and year selection** Configuring date picker wheels when a specific day is not needed.
- **Expiration date formatting** Displaying the confirmed value in a `month/year` format.

## Tutorial

```vue
<script setup>
const now = new Date
const until = new Date(now.getFullYear() + 10, now.getMonth())
</script>

<template>
  <MbscInput label="Name" placeholder="Required" />
  <MbscInput label="Card" placeholder="Credit card number" />
  <MbscDatepicker
    dateFormat="MM/YYYY"
    dateWheels="MMMM YYYY"
    :min="now"
    :max="until"
    value="12/2025"
    label="Expiration"
    placeholder="Required"
    :touchUi="true"
  />
  <MbscInput label="Security" placeholder="3-digit CVV"/>
</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
- [`dateFormat`](https://mobiscroll.com/docs/vue/datepicker/api#localization-dateFormat) - option
- [`dateWheels`](https://mobiscroll.com/docs/vue/datepicker/api#localization-dateWheels) - option
- [`min`](https://mobiscroll.com/docs/vue/datepicker/api#opt-min) - option
- [`max`](https://mobiscroll.com/docs/vue/datepicker/api#opt-max) - option

## Code

### SFC JS

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

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

const now = new Date()
const until = new Date(now.getFullYear() + 10, now.getMonth())
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Add a new credit card</div>
      <MbscInput label="Name" placeholder="Required"></MbscInput>
      <MbscInput label="Card" placeholder="Credit card number"></MbscInput>
      <MbscDatepicker
        :controls="['date']"
        dateFormat="MM/YYYY"
        dateWheels="DD MMMM YYYY"
        :min="today"
        :max="until"
        label="Expiration"
        placeholder="Required"
        value="12/2025"
      />
      <MbscInput label="Security" placeholder="3-digit CVV"></MbscInput>
    </div>
  </MbscPage>
</template>
```

### SFC TS

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

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

const now = new Date()
const until = new Date(now.getFullYear() + 10, now.getMonth())
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Add a new credit card</div>
      <MbscInput label="Name" placeholder="Required"></MbscInput>
      <MbscInput label="Card" placeholder="Credit card number"></MbscInput>
      <MbscDatepicker
        :controls="['date']"
        dateFormat="MM/YYYY"
        dateWheels="DD MMMM YYYY"
        :min="today"
        :max="until"
        label="Expiration"
        placeholder="Required"
        value="12/2025"
      />
      <MbscInput label="Security" placeholder="3-digit CVV"></MbscInput>
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- A single `Datepicker` (`controls: ['date']`) is anchored to the "Expiration" input inside a plain credit-card form (`Name`, `Card`, `Expiration`, `Security` inputs); the other three inputs are plain/`mbsc-input` fields with no picker attached.
- `dateFormat: 'MM/YYYY'` controls how the confirmed value is written back into the input; `dateWheels: 'MMMM YYYY'` independently controls the format shown on the wheels themselves (full month name + year) while scrolling - the two formats are set separately and don't need to match.
- `min` is set to the current date (`now`) and `max` to ten years out, computed as `new Date(now.getFullYear() + 10, now.getMonth())` - both are dynamically calculated, not fixed dates.
- The input's initial displayed value (`12/2025`) is set as a static `value`, not derived from `min`/`max` or bound to a variable.
- The raw JS/jQuery init also sets `minWidth: 100` on the picker for layout sizing; this option is omitted from the per-framework code snippets shown to visitors but is present in the actual demo config.
- `touchUi` (true by default on touch devices) determines whether the picker renders as scroller wheels (`true`) or dropdowns/desktop rendering (`false`).

## 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: [Formatting values](https://demo.mobiscroll.com/vue/datetime/formatting-return-values.md) - Vue Date & time picker with variable formats, AM/PM, 12h/24h. Inherited from localization with override possibility.
- Next: [Setting values](https://demo.mobiscroll.com/vue/datetime/setting-values-defaults.md) - Vue Date & time picker demo with different ways to set values and defaults. Custom buttons and presets - like Now - supported.