diff --git a/README.md b/README.md
index f79f73e3..53b690cb 100644
--- a/README.md
+++ b/README.md
@@ -137,6 +137,7 @@ export default function ReadMeExampleSingle() {
// }}
// onChange={} // same props as onConfirm but triggered without confirmed by user
// saveLabel="Save" // optional
+ // uppercase={false} // optional, default is true
// label="Select date" // optional
// animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
/>
@@ -192,6 +193,7 @@ export default function ReadMeExampleRange() {
// }}
// onChange={} // same props as onConfirm but triggered without confirmed by user
// saveLabel="Save" // optional
+ // uppercase={false} // optional, default is true
// label="Select period" // optional
// startLabel="From" // optional
// endLabel="To" // optional
@@ -245,6 +247,7 @@ export default function ReadMeExampleMultiple() {
// disabledDates: [new Date()] // optional
// }}
// saveLabel="Save" // optional
+ // uppercase={false} // optional, default is true
// label="Select period" // optional
// startLabel="From" // optional
// endLabel="To" // optional
@@ -307,6 +310,7 @@ export default function TimePickerPage() {
hours={12} // default: current hours
minutes={14} // default: current minutes
label="Select time" // optional, default 'Select time'
+ uppercase={false} // optional, default is true
cancelLabel="Cancel" // optional, default: 'Cancel'
confirmLabel="Ok" // optional, default: 'Ok'
animationType="fade" // optional, default is 'none'
diff --git a/example/src/App.tsx b/example/src/App.tsx
index a391218c..ab308109 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -315,6 +315,7 @@ function App() {
onConfirm={onChangeRange}
// locale={'nl'} // optional
// saveLabel="Save" // optional
+ // uppercase={false} // optional, default is true
// label="Select period" // optional
// startLabel="From" // optional
// endLabel="To" // optional
@@ -335,6 +336,7 @@ function App() {
// endDate: new Date(), // optional
}}
// saveLabel="Save" // optional
+ // uppercase={false} // optional, default is true
// label="Select date" // optional
// animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
/>
@@ -352,6 +354,7 @@ function App() {
// moreLabel="more" // optional, if multiple are selected this will show if we can't show all dates
// onChange={onChangeMulti}
// saveLabel="Save" // optional
+ // uppercase={false} // optional, default is true
// label="Select date" // optional
// animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
/>
diff --git a/example/src/ReadMeExampleMultiple.tsx b/example/src/ReadMeExampleMultiple.tsx
index 28fe25ee..6dc50b57 100644
--- a/example/src/ReadMeExampleMultiple.tsx
+++ b/example/src/ReadMeExampleMultiple.tsx
@@ -37,6 +37,7 @@ export default function ReadMeExampleMultiple() {
// }}
// locale={'nl'} // optional
// saveLabel="Save" // optional
+ // uppercase={false} // optional, default is true
// label="Select period" // optional
// startLabel="From" // optional
// endLabel="To" // optional
diff --git a/example/src/ReadMeExampleRange.tsx b/example/src/ReadMeExampleRange.tsx
index 283ba2eb..0d6c470c 100644
--- a/example/src/ReadMeExampleRange.tsx
+++ b/example/src/ReadMeExampleRange.tsx
@@ -44,6 +44,7 @@ export default function ReadMeExampleRange() {
// onChange={} // same props as onConfirm but triggered without confirmed by user
// locale={'nl'} // optional
// saveLabel="Save" // optional
+ // uppercase={false} // optional, default is true
// label="Select period" // optional
// startLabel="From" // optional
// endLabel="To" // optional
diff --git a/example/src/ReadMeExampleSingle.tsx b/example/src/ReadMeExampleSingle.tsx
index aaeb97a1..a1ab002d 100644
--- a/example/src/ReadMeExampleSingle.tsx
+++ b/example/src/ReadMeExampleSingle.tsx
@@ -37,6 +37,7 @@ export default function ReadMeExampleSingle() {
// }}
// onChange={} // same props as onConfirm but triggered without confirmed by user
// saveLabel="Save" // optional
+ // uppercase={false} // optional, default is true
// label="Select date" // optional
// animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
/>
diff --git a/src/Date/DatePickerModalContent.tsx b/src/Date/DatePickerModalContent.tsx
index 28307b35..3f5fa180 100644
--- a/src/Date/DatePickerModalContent.tsx
+++ b/src/Date/DatePickerModalContent.tsx
@@ -142,6 +142,7 @@ export function DatePickerModalContent(
onSave={onInnerConfirm}
onDismiss={onDismiss}
saveLabel={props.saveLabel}
+ uppercase={props.uppercase ?? true}
disableSafeTop={disableSafeTop}
/>
diff --git a/src/Date/DatePickerModalContentHeader.tsx b/src/Date/DatePickerModalContentHeader.tsx
index d0c9e2d8..2a04d7f8 100644
--- a/src/Date/DatePickerModalContentHeader.tsx
+++ b/src/Date/DatePickerModalContentHeader.tsx
@@ -12,6 +12,7 @@ export interface HeaderPickProps {
label?: string
emptyLabel?: string
saveLabel?: string
+ uppercase?: boolean
headerSeparator?: string
startLabel?: string
endLabel?: string
@@ -48,7 +49,7 @@ function getLabel(
export default function DatePickerModalContentHeader(
props: HeaderContentProps
) {
- const { onToggle, collapsed, mode, moreLabel } = props
+ const { onToggle, collapsed, mode, moreLabel, uppercase } = props
const label = getLabel(props.locale, props.mode, props.label)
@@ -57,7 +58,7 @@ export default function DatePickerModalContentHeader(
return (
- {label.toUpperCase()}
+ {uppercase ? label.toUpperCase() : label}
{mode === 'range' ? (
diff --git a/src/Date/DatePickerModalHeader.tsx b/src/Date/DatePickerModalHeader.tsx
index 0f5f8117..7f7e7e49 100644
--- a/src/Date/DatePickerModalHeader.tsx
+++ b/src/Date/DatePickerModalHeader.tsx
@@ -8,6 +8,7 @@ import { getTranslation } from '../translations/utils'
export interface DatePickerModalHeaderProps {
disableSafeTop?: boolean
saveLabel?: string
+ uppercase?: boolean
onDismiss: () => void
onSave: () => void
locale: string | undefined
@@ -43,6 +44,7 @@ export default function DatePickerModalHeader(