Date selection
The date picker ships with five built-in variations for rendering the UI. The controls option supports the following:
date- renders a date-only scroller or dropdown controltime- renders a time-only scroller or dropdown controltimegrid- renders a time grid for time selectiondatetime- renders a date & time scroller or dropdowncalendar- renders a calendar view for date picking
When passing controls: ['date'], the date picker will render a date-only picker - scroller for touchUi: true and a dropdown for touchUi: false.
You can further customize the dateFormat and dateWheels to fine-tune the UX... use it as a credit card expiration picker.
Interested in dynamically switching between modes? Learn how to set up responsive behavior →
Demo
<Datepicker
controls={['date']}
touchUi=<Datepicker
controls={['date']}
dateFormat="MM/YYYY"
dateWheels="|MMMM YYYY|"
touchUi=JSXTSX
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<Page>
<Datepicker controls={['date']} label="Date picker" labelStyle="stacked" inputStyle="outline" placeholder="Please Select..." />
<Datepicker
controls={['date']}
dateFormat="MM/YYYY"
dateWheels="MMMM YYYY"
label="Month & year picker"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
</Page>
);
}
export default App;
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<Page>
<Datepicker controls={['date']} label="Date picker" labelStyle="stacked" inputStyle="outline" placeholder="Please Select..." />
<Datepicker
controls={['date']}
dateFormat="MM/YYYY"
dateWheels="MMMM YYYY"
label="Month & year picker"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
</Page>
);
export default App;