Date types
The date & time picker works with different date types:
- JS date object - a common way of passing a date is through a Date object:
new Date(1995, 11, 17, 15, 24)(make sure to not simply pass a date string tonew Date()) - ISO date string - standardized way of passing dates:
'2008-09-15T15:53:00'(make sure to pass it as a string) - Moment.js object - a great solution that solves common date management difficulties:
moment([2018, 3, 27, 12, 15])(make sure to have moment.js loaded)
When passing dates to the component - eg. invalids, min/max - you can do it in either format and the picker will automatically know what to do with it. If you want to specify how the picker should return values, you can do it in the returnFormat option.
Demo
JS date object
const [myValue, setValue] = useState(new Date());
setValue(new Date(2020, 10, 15, 10, 45));
const onChange = useCallback((ev) => {
setValue(ev.value);
});
<Datepicker returnFormat="jsdate" value={myValue} onChange={onChange} />ISO date string
const [myValue, setValue] = useState(new Date());
setValue('2020-05-20T12:30:00');
const onChange = useCallback((ev) => {
setValue(ev.value);
});
<Datepicker returnFormat="iso8601" value={myValue} onChange={onChange} />Moment.js object
const [myValue, setValue] = useState(new Date());
setValue(moment([2020, 2, 6, 15, 30]);
const onChange = useCallback((ev) => {
setValue(ev.value);
});
<Datepicker returnFormat="moment" value={myValue} onChange={onChange} />
JSXTSX
import { Button, Datepicker, Page, setOptions } from '@mobiscroll/react';
import moment from 'moment';
import { useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [dateObj, setDateObj] = useState();
const [iso, setISO] = useState();
const [momentObj, setMomentObj] = useState();
const objString = useMemo(() => (dateObj ? dateObj.toString() : null), [dateObj]);
const momentString = useMemo(() => (momentObj ? momentObj.toString() : null), [momentObj]);
const setCustomObj = useCallback(() => {
setDateObj(new Date(2020, 10, 15, 10, 45));
}, []);
const setCustomMoment = useCallback(() => {
setMomentObj(moment([2020, 2, 6, 15, 30]));
}, []);
const setCustomISO = useCallback(() => {
setISO('2020-05-20T12:30:00');
}, []);
const handleObjChange = useCallback((ev) => {
setDateObj(ev.value);
}, []);
const handleIsoChange = useCallback((ev) => {
setISO(ev.value);
}, []);
const handleMomentChange = useCallback((ev) => {
setMomentObj(ev.value);
}, []);
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Working with Js Date Objects</div>
<div className="mbsc-button-group-block">
<Button onClick={setCustomObj}>Set: Sun Nov 15 2020 10:45:00 GMT</Button>
</div>
<Datepicker
controls={['date']}
value={dateObj}
onChange={handleObjChange}
inputStyle="outline"
label="Date object"
labelStyle="stacked"
/>
</div>
<div className="mbsc-padding">Return value: {objString}</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Working with Date strings</div>
<div className="mbsc-button-group-block">
<Button onClick={setCustomISO}>Set: 2020-05-20T12:30:00</Button>
</div>
<Datepicker
controls={['date']}
returnFormat="iso8601"
value={iso}
onChange={handleIsoChange}
inputStyle="outline"
label="ISO string"
labelStyle="stacked"
/>
</div>
<div className="mbsc-padding">Return value: {iso}</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Working with Moment JS Objects</div>
<div className="mbsc-button-group-block">
<Button onClick={setCustomMoment}>Set: 2020-03-06T15:30:00</Button>
</div>
<Datepicker
controls={['date']}
returnFormat="moment"
value={momentObj}
onChange={handleMomentChange}
inputStyle="outline"
label="Moment JS"
labelStyle="stacked"
/>
</div>
<div className="mbsc-padding">Return value: {momentString}</div>
</Page>
);
}
export default App;
import { Button, Datepicker, MbscDatepickerChangeEvent, Page, setOptions } from '@mobiscroll/react';
import moment from 'moment';
import { FC, useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [dateObj, setDateObj] = useState<Date>();
const [iso, setISO] = useState<string>();
const [momentObj, setMomentObj] = useState<object>();
const objString = useMemo(() => (dateObj ? dateObj.toString() : null), [dateObj]);
const momentString = useMemo(() => (momentObj ? momentObj.toString() : null), [momentObj]);
const setCustomObj = useCallback(() => {
setDateObj(new Date(2020, 10, 15, 10, 45));
}, []);
const setCustomMoment = useCallback(() => {
setMomentObj(moment([2020, 2, 6, 15, 30]));
}, []);
const setCustomISO = useCallback(() => {
setISO('2020-05-20T12:30:00');
}, []);
const handleObjChange = useCallback((ev: MbscDatepickerChangeEvent) => {
setDateObj(new Date(ev.value as string));
}, []);
const handleIsoChange = useCallback((ev: MbscDatepickerChangeEvent) => {
setISO(ev.value as string);
}, []);
const handleMomentChange = useCallback((ev: MbscDatepickerChangeEvent) => {
setMomentObj(ev.value as object);
}, []);
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Working with Js Date Objects</div>
<div className="mbsc-button-group-block">
<Button onClick={setCustomObj}>Set: Sun Nov 15 2020 10:45:00 GMT</Button>
</div>
<Datepicker
controls={['date']}
value={dateObj}
onChange={handleObjChange}
inputStyle="outline"
label="Date object"
labelStyle="stacked"
/>
</div>
<div className="mbsc-padding">Return value: {objString}</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Working with Date strings</div>
<div className="mbsc-button-group-block">
<Button onClick={setCustomISO}>Set: 2020-05-20T12:30:00</Button>
</div>
<Datepicker
controls={['date']}
returnFormat="iso8601"
value={iso}
onChange={handleIsoChange}
inputStyle="outline"
label="ISO string"
labelStyle="stacked"
/>
</div>
<div className="mbsc-padding">Return value: {iso}</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Working with Moment JS Objects</div>
<div className="mbsc-button-group-block">
<Button onClick={setCustomMoment}>Set: 2020-03-06T15:30:00</Button>
</div>
<Datepicker
controls={['date']}
returnFormat="moment"
value={momentObj}
onChange={handleMomentChange}
inputStyle="outline"
label="Moment JS"
labelStyle="stacked"
/>
</div>
<div className="mbsc-padding">Return value: {momentString}</div>
</Page>
);
};
export default App;