Week Picker
Week selection can be configured by setting the select to 'preset-range'.
Control the parameters of the selection:
- Define the first day of the selection - Set it in the
firstSelectDayoption. It can be different than thefirstDayof the week set in localization - Define the number of days - The
selectSizeoption can be any number, where3means three days,7means a week and14means two weeks
Looking to select a range with custom start/end dates? See how start/end selection works →
Demo
First day of the selection
Number of weeks
<Datepicker
controls={['calendar']}
select="preset-range"
firstSelectDay={1 }
selectSize={7 }
/>JSXTSX
import { Datepicker, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<div>
<Datepicker display="inline" select="preset-range" firstSelectDay={1} selectSize={14} />
</div>
);
}
export default App;
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<div>
<Datepicker display="inline" select="preset-range" firstSelectDay={1} selectSize={14} />
</div>
);
export default App;