diff --git a/packages/desktop-client/src/components/select/DateSelect.js b/packages/desktop-client/src/components/select/DateSelect.js index d857b8cf80157e106fbd59bbad36fe6ec6623906..2d1e546bbf6ce295e486b39fa7b9d99a1d24d2cf 100644 --- a/packages/desktop-client/src/components/select/DateSelect.js +++ b/packages/desktop-client/src/components/select/DateSelect.js @@ -6,17 +6,20 @@ import React, { useImperativeHandle, useMemo, } from 'react'; +import { useSelector } from 'react-redux'; import * as d from 'date-fns'; import Pikaday from 'pikaday'; import 'pikaday/css/pikaday.css'; + import { getDayMonthFormat, getDayMonthRegex, getShortYearFormat, getShortYearRegex, } from 'loot-core/src/shared/months'; +import { stringToInteger } from 'loot-core/src/shared/util'; import { colors } from '../../style'; import { View, Input, Tooltip } from '../common'; @@ -66,7 +69,7 @@ let pickerStyles = { }; export let DatePicker = React.forwardRef( - ({ value, dateFormat, onUpdate, onSelect }, ref) => { + ({ value, firstDayOfWeekIdx, dateFormat, onUpdate, onSelect }, ref) => { let picker = useRef(null); let mountPoint = useRef(null); @@ -107,6 +110,7 @@ export let DatePicker = React.forwardRef( picker.current = new Pikaday({ theme: 'actual-date-picker', keyboardInput: false, + firstDay: stringToInteger(firstDayOfWeekIdx), defaultDate: value ? d.parse(value, dateFormat, new Date()) : new Date(), @@ -189,6 +193,12 @@ export default function DateSelect({ let [selectedValue, setSelectedValue] = useState(value); let userSelectedValue = useRef(selectedValue); + const firstDayOfWeekIdx = useSelector(state => + state.prefs.local?.firstDayOfWeekIdx + ? state.prefs.local.firstDayOfWeekIdx + : '0', + ); + useEffect(() => { userSelectedValue.current = value; }, [value]); @@ -334,6 +344,7 @@ export default function DateSelect({ <DatePicker ref={picker} value={selectedValue} + firstDayOfWeekIdx={firstDayOfWeekIdx} dateFormat={dateFormat} onUpdate={date => { setSelectedValue(d.format(date, dateFormat)); diff --git a/packages/desktop-client/src/components/settings/Format.js b/packages/desktop-client/src/components/settings/Format.js index ead45fa84fe98711bb8cd02097f2e3a676435796..ce27e3d6239ebd39e043efdefc1019d9ae33e1f8 100644 --- a/packages/desktop-client/src/components/settings/Format.js +++ b/packages/desktop-client/src/components/settings/Format.js @@ -8,6 +8,18 @@ import { Checkbox } from '../forms'; import { Setting } from './UI'; +// Follows Pikaday 'firstDay' numbering +// https://github.com/Pikaday/Pikaday +let daysOfWeek = [ + { value: '0', label: 'Sunday' }, + { value: '1', label: 'Monday' }, + { value: '2', label: 'Tuesday' }, + { value: '3', label: 'Wednesday' }, + { value: '4', label: 'Thursday' }, + { value: '5', label: 'Friday' }, + { value: '6', label: 'Saturday' }, +]; + let dateFormats = [ { value: 'MM/dd/yyyy', label: 'MM/DD/YYYY' }, { value: 'dd/MM/yyyy', label: 'DD/MM/YYYY' }, @@ -35,6 +47,10 @@ function Column({ title, children }) { } export default function FormatSettings({ prefs, savePrefs }) { + function onFirstDayOfWeek(idx) { + savePrefs({ firstDayOfWeekIdx: idx }); + } + function onDateFormat(format) { savePrefs({ dateFormat: format }); } @@ -48,6 +64,7 @@ export default function FormatSettings({ prefs, savePrefs }) { savePrefs({ hideFraction }); } + let firstDayOfWeekIdx = prefs.firstDayOfWeekIdx || '0'; // Sunday let dateFormat = prefs.dateFormat || 'MM/dd/yyyy'; let numberFormat = prefs.numberFormat || 'comma-dot'; @@ -98,6 +115,17 @@ export default function FormatSettings({ prefs, savePrefs }) { /> </Button> </Column> + + <Column title="First day of the week"> + <Button bounce={false} style={{ padding: 0 }}> + <CustomSelect + value={firstDayOfWeekIdx} + onChange={onFirstDayOfWeek} + options={daysOfWeek.map(f => [f.value, f.label])} + style={{ padding: '5px 10px', fontSize: 15 }} + /> + </Button> + </Column> </View> } > diff --git a/upcoming-release-notes/910.md b/upcoming-release-notes/910.md new file mode 100644 index 0000000000000000000000000000000000000000..170f39fb14a45088337ae34a6a22c45d174e4cbc --- /dev/null +++ b/upcoming-release-notes/910.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [biohzrddd] +--- + +Add setting to change first day of the week \ No newline at end of file