Skip to content

Commit 7c0b0c5

Browse files
RichardLindhoutRichardLindhout
committed
Add support for adding overriding locale and analog time picker bug and fix: #26 
1 parent b57f85d commit 7c0b0c5

File tree

11 files changed

+57
-28
lines changed

11 files changed

+57
-28
lines changed

‎example/src/App.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ function App({
126126
theme.dark && theme.mode === 'adaptive'
127127
? overlay(3, theme.colors.surface)
128128
: (theme.colors.surface as any);
129-
console.log({ excludedDates });
129+
130130
return (
131131
<>
132132
<ScrollView
@@ -267,6 +267,7 @@ function App({
267267
]}
268268
>
269269
<DatePickerModalContent
270+
// locale={'en'} optional, default: automatic
270271
mode="range"
271272
onDismiss={onDismissRange}
272273
startDate={range.startDate}
@@ -279,19 +280,22 @@ function App({
279280
<Enter />
280281
</ScrollView>
281282
<DatePickerModal
283+
// locale={'en'} optional, default: automatic
282284
mode="range"
283285
visible={rangeOpen}
284286
onDismiss={onDismissRange}
285287
startDate={range.startDate}
286288
endDate={range.endDate}
287289
onConfirm={onChangeRange}
290+
// locale={'nl'} // optional
288291
// saveLabel="Save" // optional
289292
// label="Select period" // optional
290293
// startLabel="From" // optional
291294
// endLabel="To" // optional
292295
// animationType="slide" // optional, default is slide on ios/android and none on web
293296
/>
294297
<DatePickerModal
298+
// locale={'en'} optional, default: automatic
295299
mode="excludeInRange"
296300
visible={rangeExcludeOpen}
297301
onDismiss={onDismissExcludeRange}
@@ -306,6 +310,7 @@ function App({
306310
// animationType="slide" // optional, default is slide on ios/android and none on web
307311
/>
308312
<DatePickerModal
313+
// locale={'en'} optional, default: automatic
309314
mode="single"
310315
visible={singleOpen}
311316
onDismiss={onDismissSingle}
@@ -317,6 +322,7 @@ function App({
317322
/>
318323

319324
<TimePickerModal
325+
// locale={'en'} optional, default: automatic
320326
visible={timeOpen}
321327
onDismiss={onDismissTime}
322328
onConfirm={onConfirmTime}

‎src/Date/Calendar.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export type ModeType = 'single' | 'range' | 'excludeInRange'
1818
export type ScrollModeType = 'horizontal' | 'vertical'
1919

2020
export type BaseCalendarProps = {
21+
locale?: undefined | string
2122
disableWeekDays?: DisableWeekDaysType
2223
}
2324

@@ -57,6 +58,7 @@ function Calendar(
5758
props: CalendarSingleProps | CalendarRangeProps | CalendarExcludeInRangeProps
5859
) {
5960
const {
61+
locale,
6062
mode,
6163
onChange,
6264
// @ts-ignore
@@ -126,14 +128,15 @@ function Calendar(
126128
const exists = excludedDatesRef.current.some((ed) =>
127129
areDatesOnSameDay(ed, d)
128130
)
129-
131+
const newExcludedDates = exists
132+
? excludedDatesRef.current.filter((ed) => !areDatesOnSameDay(ed, d))
133+
: [
134+
...excludedDatesRef.current,
135+
new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0),
136+
]
137+
newExcludedDates.sort((a, b) => a.getTime() - b.getTime())
130138
;(onChangeRef.current as ExcludeInRangeChange)({
131-
excludedDates: exists
132-
? excludedDatesRef.current.filter((ed) => !areDatesOnSameDay(ed, d))
133-
: [
134-
...excludedDatesRef.current,
135-
new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0),
136-
],
139+
excludedDates: newExcludedDates,
137140
})
138141
}
139142
},
@@ -147,6 +150,7 @@ function Calendar(
147150
scrollMode={scrollMode}
148151
renderItem={({ index }) => (
149152
<Month
153+
locale={locale}
150154
mode={mode}
151155
key={index}
152156
index={index}
@@ -167,6 +171,7 @@ function Calendar(
167171
)}
168172
renderHeader={({ onPrev, onNext }) => (
169173
<CalendarHeader
174+
locale={locale}
170175
onPrev={onPrev}
171176
onNext={onNext}
172177
scrollMode={scrollMode}

‎src/Date/CalendarEdit.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,9 @@ function CalendarInputPure(
116116
isEndDate,
117117
returnKeyType,
118118
onSubmitEditing,
119+
locale,
119120
}: {
121+
locale?: undefined | string
120122
label: string
121123
value: CalendarDate
122124
onChange: (d: Date | undefined) => any
@@ -128,7 +130,7 @@ function CalendarInputPure(
128130
) {
129131
const theme = useTheme()
130132
const formatter = React.useMemo(() => {
131-
return new Intl.DateTimeFormat(undefined, {
133+
return new Intl.DateTimeFormat(locale, {
132134
month: '2-digit',
133135
day: '2-digit',
134136
year: 'numeric',

‎src/Date/CalendarHeader.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ function CalendarHeader({
2525
onPrev,
2626
onNext,
2727
disableWeekDays,
28+
locale,
2829
}: {
30+
locale: undefined | string
2931
scrollMode: 'horizontal' | 'vertical'
3032
onPrev: () => any
3133
onNext: () => any
@@ -57,7 +59,7 @@ function CalendarHeader({
5759
</View>
5860
</View>
5961
) : null}
60-
<DayNames disableWeekDays={disableWeekDays} />
62+
<DayNames disableWeekDays={disableWeekDays} locale={locale} />
6163
</View>
6264
)
6365
}

‎src/Date/DatePickerModalContent.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export function DatePickerModalContent(
7676
onDismiss,
7777
disableSafeTop,
7878
disableWeekDays,
79+
locale,
7980
} = props
8081

8182
const anyProps = props as any
@@ -108,7 +109,6 @@ export function DatePickerModalContent(
108109
const onInnerChange = React.useCallback(
109110
(params) => {
110111
onChange && onChange(params)
111-
112112
setState((prev) => ({ ...prev, ...params }))
113113
},
114114
[onChange, setState]
@@ -154,13 +154,15 @@ export function DatePickerModalContent(
154154
label={props.label}
155155
startLabel={props.startLabel}
156156
endLabel={props.endLabel}
157+
locale={locale}
157158
/>
158159
</DatePickerModalHeaderBackground>
159160

160161
<AnimatedCrossView
161162
collapsed={collapsed}
162163
calendar={
163164
<Calendar
165+
locale={locale}
164166
mode={mode}
165167
startDate={state.startDate}
166168
endDate={state.endDate}

‎src/Date/DatePickerModalContentHeader.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export interface HeaderContentProps extends HeaderPickProps {
2020
mode: ModeType
2121
collapsed: boolean
2222
onToggle: () => any
23+
locale: undefined | string
2324
}
2425

2526
function getLabel(mode: ModeType, configuredLabel?: string) {
@@ -78,12 +79,13 @@ export function HeaderContentSingle({
7879
state,
7980
emptyLabel = ' ',
8081
color,
82+
locale,
8183
}: HeaderContentProps & { color: string }) {
8284
const lighterColor = Color(color).fade(0.5).rgb().toString()
8385
const dateColor = state.date ? color : lighterColor
8486

8587
const formatter = React.useMemo(() => {
86-
return new Intl.DateTimeFormat(undefined, {
88+
return new Intl.DateTimeFormat(locale, {
8789
month: 'short',
8890
day: 'numeric',
8991
})
@@ -100,19 +102,20 @@ export function HeaderContentExcludeInRange({
100102
state,
101103
emptyLabel = ' ',
102104
color,
105+
locale,
103106
}: HeaderContentProps & { color: string }) {
104107
const lighterColor = Color(color).fade(0.5).rgb().toString()
105108

106109
const dayFormatter = React.useMemo(() => {
107-
return new Intl.DateTimeFormat(undefined, {
110+
return new Intl.DateTimeFormat(locale, {
108111
day: 'numeric',
109112
})
110-
}, [])
113+
}, [locale])
111114
const monthFormatter = React.useMemo(() => {
112-
return new Intl.DateTimeFormat(undefined, {
115+
return new Intl.DateTimeFormat(locale, {
113116
month: 'short',
114117
})
115-
}, [])
118+
}, [locale])
116119

117120
const excludedDaysPerMonth = React.useMemo(() => {
118121
// TODO: fix years :O
@@ -147,18 +150,19 @@ export function HeaderContentExcludeInRange({
147150
}
148151

149152
export function HeaderContentRange({
153+
locale,
150154
state,
151155
headerSeparator = '-',
152156
startLabel = 'Start',
153157
endLabel = 'End',
154158
color,
155159
}: HeaderContentProps & { color: string }) {
156160
const formatter = React.useMemo(() => {
157-
return new Intl.DateTimeFormat(undefined, {
161+
return new Intl.DateTimeFormat(locale, {
158162
month: 'short',
159163
day: 'numeric',
160164
})
161-
}, [])
165+
}, [locale])
162166

163167
const lighterColor = Color(color).fade(0.5).rgb().toString()
164168
const startColor = state.startDate ? color : lighterColor

‎src/Date/DayNames.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,14 @@ const weekdays = [
1919

2020
function DayNames({
2121
disableWeekDays,
22+
locale,
2223
}: {
24+
locale: undefined | string
2325
disableWeekDays?: DisableWeekDaysType
2426
}) {
2527
const theme = useTheme()
2628
const shortDayNames = React.useMemo<string[]>(() => {
27-
const formatter = new Intl.DateTimeFormat(undefined, {
29+
const formatter = new Intl.DateTimeFormat(locale, {
2830
weekday: 'narrow',
2931
})
3032
return weekdays.map((date) => formatter.format(date))

‎src/Date/Month.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { getCalendarHeaderHeight } from './CalendarHeader'
1919
import { ModeType } from './Calendar'
2020

2121
interface BaseMonthProps {
22+
locale: undefined | string
2223
scrollMode: 'horizontal' | 'vertical'
2324
disableWeekDays?: DisableWeekDaysType
2425
mode: ModeType
@@ -107,6 +108,7 @@ function Month({
107108
roundness,
108109
disableWeekDays,
109110
excludedDates,
111+
locale,
110112
}: MonthSingleProps | MonthRangeProps | MonthExcludeInRangeProps) {
111113
const theme = useTheme()
112114
const realIndex = getRealIndex(index)
@@ -116,7 +118,7 @@ function Month({
116118
const year = monthDate.getFullYear()
117119
const month = monthDate.getMonth()
118120

119-
const monthFormatter = new Intl.DateTimeFormat(undefined, {
121+
const monthFormatter = new Intl.DateTimeFormat(locale, {
120122
month: 'long',
121123
})
122124

‎src/Time/TimePicker.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@ function TimePicker({
2929
focused,
3030
inputType,
3131
onChange,
32+
locale,
3233
}: {
34+
locale?: undefined | string
3335
inputType: PossibleInputTypes
3436
focused: PossibleClockTypes
3537
hours: number
@@ -42,14 +44,14 @@ function TimePicker({
4244

4345
// method to check whether we have 24 hours in clock or 12
4446
const is24Hour = React.useMemo(() => {
45-
const formatter = new Intl.DateTimeFormat(undefined, {
47+
const formatter = new Intl.DateTimeFormat(locale, {
4648
hour: '2-digit',
4749
minute: '2-digit',
4850
timeZone: 'UTC',
4951
})
5052
const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)))
5153
return formatted.includes('23')
52-
}, [])
54+
}, [locale])
5355

5456
const onInnerChange = React.useCallback<onChangeFunc>(
5557
(params) => {

‎src/Time/TimePickerModal.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@ export function TimePickerModal({
3838
cancelLabel = 'Cancel',
3939
confirmLabel = 'Ok',
4040
animationType = 'none',
41+
locale,
4142
}: {
43+
locale?: undefined | string
4244
label?: string
4345
cancelLabel?: string
4446
confirmLabel?: string
@@ -137,6 +139,7 @@ export function TimePickerModal({
137139
</View>
138140
<View style={styles.timePickerContainer}>
139141
<TimePicker
142+
locale={locale}
140143
inputType={inputType}
141144
focused={focused}
142145
hours={localHours}

0 commit comments

Comments
 (0)