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="D MMMM 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';
import { useCallback, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const currentWeek = ['2026-11-06T00:00', '2026-11-12T00:00'];
const currentTime = ['2026-11-06T20:00', '2026-11-06T22:00'];
function App() {
const [rangeValue, setRangeValue] = useState(currentWeek);
const [separatorValue, setSeparatorValue] = useState(currentWeek);
const [monthValue, setMonthValue] = useState(currentWeek);
const [dayValue, setDayValue] = useState(currentWeek);
const [atomValue, setAtomValue] = useState(currentWeek);
const [cookieValue, setCookieValue] = useState(currentWeek);
const [timeValue, setTimeValue] = useState(currentTime);
const [h12Value, setH12Value] = useState(currentTime);
const [h24Value, setH24Value] = useState(currentTime);
const [hmsValue, setHmsValue] = useState(currentTime);
const [dateTimeValue, setDateTimeValue] = useState(currentTime);
const [dayNameValue, setDayNameValue] = useState(currentTime);
const changeRange = useCallback((args) => {
setRangeValue(args.value);
}, []);
const changeSeparator = useCallback((args) => {
setSeparatorValue(args.value);
}, []);
const changeMonth = useCallback((args) => {
setMonthValue(args.value);
}, []);
const changeDay = useCallback((args) => {
setDayValue(args.value);
}, []);
const changeAtom = useCallback((args) => {
setAtomValue(args.value);
}, []);
const changeCookie = useCallback((args) => {
setCookieValue(args.value);
}, []);
const changeTime = useCallback((args) => {
setTimeValue(args.value);
}, []);
const changeH12 = useCallback((args) => {
setH12Value(args.value);
}, []);
const changeH24 = useCallback((args) => {
setH24Value(args.value);
}, []);
const changeHms = useCallback((args) => {
setHmsValue(args.value);
}, []);
const changeDateTime = useCallback((args) => {
setDateTimeValue(args.value);
}, []);
const changeDayName = useCallback((args) => {
setDayNameValue(args.value);
}, []);
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Date</div>
<Datepicker select="range" value={rangeValue} onChange={changeRange} label="Default" />
<Datepicker select="range" value={separatorValue} onChange={changeSeparator} dateFormat="DD.MM.YYYY" label="Separator" />
<Datepicker select="range" value={monthValue} onChange={changeMonth} dateFormat="D MMMM YYYY" label="Month name" />
<Datepicker select="range" value={dayValue} onChange={changeDay} dateFormat="DDD DD MMM, YYYY" label="Day of week" />
<Datepicker select="range" value={atomValue} onChange={changeAtom} dateFormat="YYYY-MM-DD" label="ATOM" />
<Datepicker select="range" value={cookieValue} onChange={changeCookie} dateFormat="DDD, DD MMM YYYY" label="COOKIE" />
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Time</div>
<Datepicker controls={['time']} select="range" value={timeValue} onChange={changeTime} label="Default time" />
<Datepicker controls={['time']} select="range" value={h12Value} onChange={changeH12} timeFormat="hh:mm A" label="12h" />
<Datepicker controls={['time']} select="range" value={h24Value} onChange={changeH24} timeFormat="HH:mm" label="24h" />
<Datepicker controls={['time']} select="range" value={hmsValue} onChange={changeHms} 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']}
select="range"
value={dateTimeValue}
onChange={changeDateTime}
label="Default date & time"
/>
<Datepicker
controls={['calendar', 'time']}
select="range"
value={dayNameValue}
onChange={changeDayName}
dateFormat="DDD D MMM, YYYY"
timeFormat="H:mm"
dateWheels="|DDD D MMM, YYYY|"
label="Day name"
/>
</div>
</Page>
);
}
export default App;
import { Datepicker, MbscDatepickerChangeEvent, MbscDateType, Page, setOptions } from '@mobiscroll/react';
import { useCallback, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const currentWeek = ['2026-11-06T00:00', '2026-11-12T00:00'];
const currentTime = ['2026-11-06T20:00', '2026-11-06T22:00'];
function App() {
const [rangeValue, setRangeValue] = useState<MbscDateType[]>(currentWeek);
const [separatorValue, setSeparatorValue] = useState<MbscDateType[]>(currentWeek);
const [monthValue, setMonthValue] = useState<MbscDateType[]>(currentWeek);
const [dayValue, setDayValue] = useState<MbscDateType[]>(currentWeek);
const [atomValue, setAtomValue] = useState<MbscDateType[]>(currentWeek);
const [cookieValue, setCookieValue] = useState<MbscDateType[]>(currentWeek);
const [timeValue, setTimeValue] = useState<MbscDateType[]>(currentTime);
const [h12Value, setH12Value] = useState<MbscDateType[]>(currentTime);
const [h24Value, setH24Value] = useState<MbscDateType[]>(currentTime);
const [hmsValue, setHmsValue] = useState<MbscDateType[]>(currentTime);
const [dateTimeValue, setDateTimeValue] = useState<MbscDateType[]>(currentTime);
const [dayNameValue, setDayNameValue] = useState<MbscDateType[]>(currentTime);
const changeRange = useCallback((args: MbscDatepickerChangeEvent) => {
setRangeValue(args.value as MbscDateType[]);
}, []);
const changeSeparator = useCallback((args: MbscDatepickerChangeEvent) => {
setSeparatorValue(args.value as MbscDateType[]);
}, []);
const changeMonth = useCallback((args: MbscDatepickerChangeEvent) => {
setMonthValue(args.value as MbscDateType[]);
}, []);
const changeDay = useCallback((args: MbscDatepickerChangeEvent) => {
setDayValue(args.value as MbscDateType[]);
}, []);
const changeAtom = useCallback((args: MbscDatepickerChangeEvent) => {
setAtomValue(args.value as MbscDateType[]);
}, []);
const changeCookie = useCallback((args: MbscDatepickerChangeEvent) => {
setCookieValue(args.value as MbscDateType[]);
}, []);
const changeTime = useCallback((args: MbscDatepickerChangeEvent) => {
setTimeValue(args.value as MbscDateType[]);
}, []);
const changeH12 = useCallback((args: MbscDatepickerChangeEvent) => {
setH12Value(args.value as MbscDateType[]);
}, []);
const changeH24 = useCallback((args: MbscDatepickerChangeEvent) => {
setH24Value(args.value as MbscDateType[]);
}, []);
const changeHms = useCallback((args: MbscDatepickerChangeEvent) => {
setHmsValue(args.value as MbscDateType[]);
}, []);
const changeDateTime = useCallback((args: MbscDatepickerChangeEvent) => {
setDateTimeValue(args.value as MbscDateType[]);
}, []);
const changeDayName = useCallback((args: MbscDatepickerChangeEvent) => {
setDayNameValue(args.value as MbscDateType[]);
}, []);
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Date</div>
<Datepicker
controls={['calendar']}
select="range"
value={rangeValue}
onChange={changeRange}
inputProps={{
label: 'Default',
}}
/>
<Datepicker
controls={['calendar']}
select="range"
value={separatorValue}
onChange={changeSeparator}
dateFormat="DD.MM.YYYY"
inputProps={{
label: 'Separator',
}}
/>
<Datepicker
controls={['calendar']}
select="range"
value={monthValue}
onChange={changeMonth}
dateFormat="D MMMM YYYY"
inputProps={{
label: 'Month name',
}}
/>
<Datepicker
controls={['calendar']}
select="range"
value={dayValue}
onChange={changeDay}
dateFormat="DDD DD MMM, YYYY"
inputProps={{
label: 'Day of week',
}}
/>
<Datepicker
controls={['calendar']}
select="range"
value={atomValue}
onChange={changeAtom}
dateFormat="YYYY-MM-DD"
inputProps={{
label: 'ATOM',
}}
/>
<Datepicker
controls={['calendar']}
select="range"
value={cookieValue}
onChange={changeCookie}
dateFormat="DDD, DD MMM YYYY"
inputProps={{
label: 'COOKIE',
}}
/>
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Time</div>
<Datepicker
controls={['time']}
select="range"
value={timeValue}
onChange={changeTime}
inputProps={{
label: 'Default time',
}}
/>
<Datepicker
controls={['time']}
select="range"
value={h12Value}
onChange={changeH12}
timeFormat="hh:mm A"
inputProps={{
label: '12h',
}}
/>
<Datepicker
controls={['time']}
select="range"
value={h24Value}
onChange={changeH24}
timeFormat="HH:mm"
inputProps={{
label: '24h',
}}
/>
<Datepicker
controls={['time']}
select="range"
value={hmsValue}
onChange={changeHms}
timeFormat="HH:mm:ss"
inputProps={{
label: 'Hour, min, sec',
}}
/>
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Date & time</div>
<Datepicker
controls={['calendar', 'time']}
select="range"
value={dateTimeValue}
onChange={changeDateTime}
inputProps={{
label: 'Default date & time',
}}
/>
<Datepicker
controls={['calendar', 'time']}
select="range"
value={dayNameValue}
onChange={changeDayName}
dateFormat="DDD D MMM, YYYY"
timeFormat="H:mm"
dateWheels="|DDD D MMM, YYYY|"
inputProps={{
label: 'Day name',
}}
/>
</div>
</Page>
);
}
export default App;