Formatting values
Use the dateFormat, timeFormat options to customize how the values show up in the inputs after selection. If the formats are not explicitly set, they are inherited from the localization settings.
Besides customizing the date and time formats you can reorder the picker wheels and change its formats with the dateWheels and timeWheels options.
Interested in learning about localization? Check out how the return format changes based on locale →
Demo
<Datepicker
controls={['date']}
/><Datepicker
controls={['date']}
dateFormat="DD.MM.YYYY"
/><Datepicker
controls={['date']}
dateFormat="MMMM"
/><Datepicker
controls={['date']}
dateFormat="D MMMM YYYY"
/><Datepicker
controls={['date']}
dateFormat="MM/YYYY"
/><Datepicker
controls={['date']}
dateFormat="DDD DD MMM, YYYY"
/><Datepicker
controls={['date']}
dateFormat="YYYY-MM-DD"
/><Datepicker
controls={['date']}
dateFormat="DDD, DD MMM YYYY"
/><Datepicker
controls={['time']}
/><Datepicker
controls={['time']}
timeFormat="hh:mm A"
/><Datepicker
controls={['time']}
timeFormat="HH:mm"
/><Datepicker
controls={['time']}
timeFormat="HH:mm:ss"
/><Datepicker
controls={['date', 'time']}
/><Datepicker
controls={['date', 'time']}
dateFormat="DDD D MMM, YYYY"
timeFormat="H:mm"
dateWheels="|DDD D MMM, YYYY|"
/>JSXTSX
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Date</div>
<Datepicker controls={['date']} label="Default" />
<Datepicker controls={['date']} dateFormat="DD.MM.YYYY" label="Separator" />
<Datepicker controls={['date']} dateFormat="MMMM" label="Month only" />
<Datepicker controls={['date']} dateFormat="D MMMM YYYY" label="Month name" />
<Datepicker controls={['date']} dateFormat="MM/YYYY" label="Month/year" />
<Datepicker controls={['date']} dateFormat="DDD DD MMM, YYYY" label="Day of week" />
<Datepicker controls={['date']} dateFormat="YYYY-MM-DD" label="ATOM" />
<Datepicker controls={['date']} dateFormat="DDD, DD MMM YYYY" label="COOKIE" />
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Time</div>
<Datepicker controls={['time']} label="Default time" />
<Datepicker controls={['time']} timeFormat="hh:mm A" label="12h" />
<Datepicker controls={['time']} timeFormat="HH:mm" label="24h" />
<Datepicker controls={['time']} timeFormat="HH:mm:ss" label="Hour, min, sec" />
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Date & time</div>
<Datepicker controls={['date', 'time']} label="Default date & time" />
<Datepicker
controls={['date', 'time']}
dateFormat="DDD D MMM, YYYY"
timeFormat="H:mm"
dateWheels="|DDD D MMM, YYYY|"
label="Day name"
/>
</div>
</Page>
);
}
export default App;
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Date</div>
<Datepicker controls={['date']} label="Default" />
<Datepicker controls={['date']} dateFormat="DD.MM.YYYY" label="Separator" />
<Datepicker controls={['date']} dateFormat="MMMM" label="Month only" />
<Datepicker controls={['date']} dateFormat="D MMMM YYYY" label="Month name" />
<Datepicker controls={['date']} dateFormat="MM/YYYY" label="Month/year" />
<Datepicker controls={['date']} dateFormat="DDD DD MMM, YYYY" label="Day of week" />
<Datepicker controls={['date']} dateFormat="YYYY-MM-DD" label="ATOM" />
<Datepicker controls={['date']} dateFormat="DDD, DD MMM YYYY" label="COOKIE" />
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Time</div>
<Datepicker controls={['time']} label="Default time" />
<Datepicker controls={['time']} timeFormat="hh:mm A" label="12h" />
<Datepicker controls={['time']} timeFormat="HH:mm" label="24h" />
<Datepicker controls={['time']} timeFormat="HH:mm:ss" label="Hour, min, sec" />
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Date & time</div>
<Datepicker controls={['date', 'time']} label="Default date & time" />
<Datepicker
controls={['date', 'time']}
dateFormat="DDD D MMM, YYYY"
timeFormat="H:mm"
dateWheels="|DDD D MMM, YYYY|"
label="Day name"
/>
</div>
</Page>
);
}
export default App;