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 time picker wheels and change its formats with the timeWheels options.
Interested in learning about localization? Check out how the return format changes based on locale →
Demo
<Datepicker
controls={['calendar']}
/><Datepicker
controls={['calendar']}
dateFormat="DD.MM.YYYY"
/><Datepicker
controls={['calendar']}
dateFormat="MMMM"
/><Datepicker
controls={['calendar']}
dateFormat="D MMMM YYYY"
/><Datepicker
controls={['calendar']}
dateFormat="MM/YYYY"
/><Datepicker
controls={['calendar']}
dateFormat="DDD DD MMM, YYYY"
/><Datepicker
controls={['calendar']}
dateFormat="YYYY-MM-DD"
/><Datepicker
controls={['calendar']}
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={['calendar', 'time']}
timeFormat="HH:mm:ss"
/><Datepicker
controls={['calendar', '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 label="Default" />
<Datepicker dateFormat="DD.MM.YYYY" label="Separator" />
<Datepicker dateFormat="MMMM" label="Month only" />
<Datepicker dateFormat="D MMMM YYYY" label="Month name" />
<Datepicker dateFormat="MM/YYYY" label="Month/year" />
<Datepicker dateFormat="DDD DD MMM, YYYY" label="Day of week" />
<Datepicker dateFormat="YYYY-MM-DD" label="ATOM" />
<Datepicker 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={['calendar', 'time']} label="Default date & time" />
<Datepicker
controls={['calendar', 'time']}
dateFormat="DDD D MMM, YYYY"
dateWheels="|DDD D MMM, YYYY|"
timeFormat="H:mm"
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 label="Default" />
<Datepicker dateFormat="DD.MM.YYYY" label="Separator" />
<Datepicker dateFormat="MMMM" label="Month only" />
<Datepicker dateFormat="D MMMM YYYY" label="Month name" />
<Datepicker dateFormat="MM/YYYY" label="Month/year" />
<Datepicker dateFormat="DDD DD MMM, YYYY" label="Day of week" />
<Datepicker dateFormat="YYYY-MM-DD" label="ATOM" />
<Datepicker 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={['calendar', 'time']} label="Default date & time" />
<Datepicker
controls={['calendar', 'time']}
dateFormat="DDD D MMM, YYYY"
dateWheels="|DDD D MMM, YYYY|"
timeFormat="H:mm"
label="Day name"
/>
</div>
</Page>
);
}
export default App;