Credit card expiration
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 setting.
Interested in changing the date format? Explore formatting options →
Demo
<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="Add a new credit card
SFC JSSFC TS
<script setup>
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
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>
<script setup lang="ts">
import { MbscDatepicker, MbscInput, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
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>