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
tsxconst now = new Date;
const until = new Date(now.getFullYear() + 10, now.getMonth());
<Input label="Name" placeholder="Required"/>
<Input label="Card" placeholder="Credit card number"/>
<Datepicker
dateFormat="MM/YYYY"
dateWheels="MMMM YYYY"
min={now}
max={until}
value="12/2025"
label="Expiration"
placeholder="Required"
touchUi=
Add a new credit card
JSXTSX
import { Datepicker, Input, Page, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const now = new Date();
const until = new Date(now.getFullYear() + 10, now.getMonth());
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Add a new credit card</div>
<Input label="Name" placeholder="Required"></Input>
<Input label="Card" placeholder="Credit card number"></Input>
<Datepicker
controls={['date']}
dateFormat="MM/YYYY"
dateWheels="MMMM YYYY"
defaultValue="12/2025"
min={now}
max={until}
label="Expiration"
placeholder="Required"
></Datepicker>
<Input label="Security" placeholder="3-digit CVV"></Input>
</div>
</Page>
);
}
export default App;
import { Datepicker, Input, Page, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const now = new Date();
const until = new Date(now.getFullYear() + 10, now.getMonth());
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Add a new credit card</div>
<Input label="Name" placeholder="Required"></Input>
<Input label="Card" placeholder="Credit card number"></Input>
<Datepicker
controls={['date']}
dateFormat="MM/YYYY"
dateWheels="DD MMMM YYYY"
min={now}
max={until}
value="12/2025"
label="Expiration"
placeholder="Required"
></Datepicker>
<Input label="Security" placeholder="3-digit CVV"></Input>
</div>
</Page>
);
};
export default App;