react-native-paper-dates 0.24.0 → 0.24.1

package/lib/typescript/Date/weekdayColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"weekdayColumns.d.ts","sourceRoot":"","sources":["../../../src/Date/weekdayColumns.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAC/E,OAAO,EAAe,KAAK,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAOnE,wBAAgB,uBAAuB,CACrC,eAAe,CAAC,EAAE,mBAAmB,GACpC,SAAS,CAKX;AAED,wBAAgB,uBAAuB,CACrC,eAAe,CAAC,EAAE,mBAAmB,GACpC,SAAS,CAEX;AAED,wBAAgB,sBAAsB,CACpC,eAAe,CAAC,EAAE,mBAAmB,GACpC,SAAS,CAKX;AAsBD,wBAAgB,uBAAuB,CACrC,eAAe,CAAC,EAAE,mBAAmB,GACpC,SAAS,CAEX;AAWD,wBAAgB,WAAW,CAAC,eAAe,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAG5E;AAED,eAAO,MAAM,oBAAoB,EAAE,SAElC,CAAA"}

package/lib/typescript/shared/styles.d.ts

@@ -2,6 +2,9 @@ export declare const sharedStyles: {
     flexDirectionRow: {
         flexDirection: "row";
     };
+    minHeightZero: {
+        minHeight: number;
+    };
     opacity0: {
         opacity: number;
     };

package/lib/typescript/shared/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/shared/styles.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;CAgBvB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/shared/styles.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;CAmBvB,CAAA"}

package/lib/typescript/shared/utils.d.ts

@@ -3,6 +3,7 @@ import Color from 'color';
 export declare const supportedOrientations: ('portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right')[];
 export type PaperTheme = typeof MD3DarkTheme | typeof DefaultTheme;
 export declare function useLatest<T>(value: T): import("react").RefObject<T>;
+export declare function useIsLargeScreen(): boolean;
 export declare function useHeaderBackgroundColor(): string;
 export declare function useHeaderTextColor(): string;
 export declare function useTextColorOnPrimary(): string;

package/lib/typescript/shared/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/shared/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAY,MAAM,oBAAoB,CAAA;AACzE,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,qBAAqB,EAAE,CAChC,UAAU,GACV,sBAAsB,GACtB,WAAW,GACX,gBAAgB,GAChB,iBAAiB,CACpB,EAMA,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,YAAY,GAAG,OAAO,YAAY,CAAA;AAElE,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,gCAIpC;AAED,wBAAgB,wBAAwB,WAGvC;AAED,wBAAgB,kBAAkB,WAGjC;AAED,wBAAgB,qBAAqB,WAQpC;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,YAI/C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,iCAGzE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,iCAGxE"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/shared/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAY,MAAM,oBAAoB,CAAA;AACzE,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,qBAAqB,EAAE,CAChC,UAAU,GACV,sBAAsB,GACtB,WAAW,GACX,gBAAgB,GAChB,iBAAiB,CACpB,EAMA,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,YAAY,GAAG,OAAO,YAAY,CAAA;AAElE,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,gCAIpC;AAED,wBAAgB,gBAAgB,YAG/B;AAED,wBAAgB,wBAAwB,WAGvC;AAED,wBAAgB,kBAAkB,WAGjC;AAED,wBAAgB,qBAAqB,WAQpC;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,YAI/C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,iCAGzE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,iCAGxE"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.24.0",
+  "version": "0.24.1",
   "author": "Richard Lindhout <info@webridge.nl> (https://github.com/web-ridge)",
   "bugs": {
     "url": "https://github.com/web-ridge/react-native-paper-dates/issues"

package/src/Date/AnimatedCrossView.tsx

@@ -27,10 +27,11 @@ export default function AnimatedCrossView({
   }, [collapsed])
 
   return (
-    <View style={sharedStyles.root}>
+    <View style={[sharedStyles.root, sharedStyles.minHeightZero]}>
       <Animated.View
         pointerEvents={collapsed ? 'auto' : 'none'}
         style={[
+          sharedStyles.minHeightZero,
           sharedStyles.root,
           {
             opacity: calendarOpacity.current,

package/src/Date/AutoSizer.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react'
-import { LayoutChangeEvent, View } from 'react-native'
+import { LayoutChangeEvent, useWindowDimensions, View } from 'react-native'
 import { sharedStyles } from '../shared/styles'
 
 type WidthAndHeight = {
@@ -7,36 +7,60 @@ type WidthAndHeight = {
   height: number
 }
 
+type MeasuredLayout = WidthAndHeight & {
+  windowKey: string
+}
+
 export default function AutoSizer({
   children,
 }: {
   children: ({ width, height }: WidthAndHeight) => any
 }) {
-  const [layout, setLayout] = useState<WidthAndHeight | null>(null)
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions()
+  const windowKey = `${windowWidth}x${windowHeight}`
+  const [measured, setMeasured] = useState<MeasuredLayout | null>(null)
 
   const onLayout = useCallback(
     (event: LayoutChangeEvent) => {
       const nl = event.nativeEvent.layout
       // https://github.com/necolas/react-native-web/issues/1704
-      if (!layout || layout.width !== nl.width || layout.height !== nl.height) {
-        setLayout({ width: nl.width, height: nl.height })
-      }
+      setMeasured((prev) => {
+        if (
+          prev &&
+          prev.windowKey === windowKey &&
+          prev.width === nl.width &&
+          prev.height === nl.height
+        ) {
+          return prev
+        }
+        return { windowKey, width: nl.width, height: nl.height }
+      })
     },
-    [layout, setLayout]
+    [windowKey]
   )
 
-  const isLayoutInitialized = layout && layout.height > 0 && layout.width > 0
+  const layout =
+    measured &&
+    measured.windowKey === windowKey &&
+    measured.width > 0 &&
+    measured.height > 0
+      ? measured
+      : null
 
   return (
     <View
+      // Modals often skip onLayout during rotation. Keying by window size
+      // mounts a fresh sizer so the calendar gets the landscape viewport.
+      key={windowKey}
+      collapsable={false}
       onLayout={onLayout}
       style={[
         sharedStyles.overflowHidden,
         sharedStyles.root,
-        isLayoutInitialized && layout,
+        sharedStyles.minHeightZero,
       ]}
     >
-      {isLayoutInitialized ? children(layout) : null}
+      {layout ? children(layout) : null}
     </View>
   )
 }

package/src/Date/Calendar.tsx

@@ -204,7 +204,7 @@ function Calendar(
   const selectColor = theme.colors.primaryContainer
 
   return (
-    <View style={sharedStyles.root}>
+    <View style={[sharedStyles.root, sharedStyles.minHeightZero]}>
       <Swiper
         initialIndex={getInitialIndex(firstDate, startYear, endYear)}
         selectedYear={selectedYear}
@@ -239,13 +239,14 @@ function Calendar(
             dayContentStyle={dayContentStyle}
           />
         )}
-        renderHeader={({ onPrev, onNext }) => (
+        renderHeader={({ endInset, onPrev, onNext }) => (
           <CalendarHeader
+            disableWeekDays={disableWeekDays}
+            endInset={endInset}
             locale={locale}
-            onPrev={onPrev}
             onNext={onNext}
+            onPrev={onPrev}
             scrollMode={scrollMode}
-            disableWeekDays={disableWeekDays}
             startWeekOnMonday={startWeekOnMonday || false}
           />
         )}

package/src/Date/CalendarEdit.tsx

@@ -9,6 +9,8 @@ import type { ModeType, ValidRangeType } from './Calendar'
 import type { LocalState } from './DatePickerModalContent'
 
 import DatePickerInputWithoutModal from './DatePickerInputWithoutModal'
+import type { DisableWeekDaysType } from './dateUtils'
+import { weekdaySpan, weekdaySpanOvershoot } from './weekdayColumns'
 import { memo, useCallback, useEffect, useRef } from 'react'
 import { useTheme } from 'react-native-paper'
 import { sharedStyles } from '../shared/styles'
@@ -26,6 +28,7 @@ function CalendarEdit({
   inputEnabled,
   withDateFormatInLabel,
   placeholder,
+  disableWeekDays,
 }: {
   mode: ModeType
   label?: string
@@ -39,6 +42,7 @@ function CalendarEdit({
   inputEnabled?: boolean
   withDateFormatInLabel?: boolean
   placeholder?: string
+  disableWeekDays?: DisableWeekDaysType
 }) {
   const theme = useTheme()
   const dateInput = useRef<TextInputNative | null>(null)
@@ -86,37 +90,17 @@ function CalendarEdit({
 
   return (
     <View style={styles.root}>
-      {mode === 'single' ? (
-        <DatePickerInputWithoutModal
-          inputMode="start"
-          ref={dateInput}
-          mode="outlined"
-          label={label}
-          value={state.date}
-          onChange={(date) => onChange({ ...state, date })}
-          onSubmitEditing={onSubmitInput}
-          validRange={validRange}
-          locale={locale}
-          withModal={false}
-          autoComplete={'off'}
-          inputEnabled={inputEnabled}
-          withDateFormatInLabel={withDateFormatInLabel}
-          placeholder={placeholder}
-          style={inputStyle}
-        />
-      ) : null}
-      {mode === 'range' ? (
-        <View style={sharedStyles.flexDirectionRow}>
-          <View style={sharedStyles.root}>
+      <View style={weekdaySpan(disableWeekDays)}>
+        <View style={weekdaySpanOvershoot}>
+          {mode === 'single' ? (
             <DatePickerInputWithoutModal
               inputMode="start"
-              ref={startInput}
+              ref={dateInput}
               mode="outlined"
-              label={startLabel}
-              value={state.startDate}
-              onChange={(startDate) => onChange({ ...state, startDate })}
-              returnKeyType={'next'}
-              onSubmitEditing={onSubmitStartInput}
+              label={label}
+              value={state.date}
+              onChange={(date) => onChange({ ...state, date })}
+              onSubmitEditing={onSubmitInput}
               validRange={validRange}
               locale={locale}
               withModal={false}
@@ -126,36 +110,61 @@ function CalendarEdit({
               placeholder={placeholder}
               style={inputStyle}
             />
-          </View>
-          <View style={styles.separator} />
-          <View style={sharedStyles.root}>
-            <DatePickerInputWithoutModal
-              inputMode="end"
-              ref={endInput}
-              mode="outlined"
-              label={endLabel}
-              value={state.endDate}
-              onChange={(endDate) => onChange({ ...state, endDate })}
-              onSubmitEditing={onSubmitEndInput}
-              validRange={validRange}
-              locale={locale}
-              withModal={false}
-              autoComplete="off"
-              inputEnabled={inputEnabled}
-              withDateFormatInLabel={withDateFormatInLabel}
-              placeholder={placeholder}
-              style={inputStyle}
-            />
-          </View>
+          ) : null}
+          {mode === 'range' ? (
+            <View style={sharedStyles.flexDirectionRow}>
+              <View style={sharedStyles.root}>
+                <DatePickerInputWithoutModal
+                  inputMode="start"
+                  ref={startInput}
+                  mode="outlined"
+                  label={startLabel}
+                  value={state.startDate}
+                  onChange={(startDate) => onChange({ ...state, startDate })}
+                  returnKeyType={'next'}
+                  onSubmitEditing={onSubmitStartInput}
+                  validRange={validRange}
+                  locale={locale}
+                  withModal={false}
+                  autoComplete={'off'}
+                  inputEnabled={inputEnabled}
+                  withDateFormatInLabel={withDateFormatInLabel}
+                  placeholder={placeholder}
+                  style={inputStyle}
+                />
+              </View>
+              <View style={styles.separator} />
+              <View style={sharedStyles.root}>
+                <DatePickerInputWithoutModal
+                  inputMode="end"
+                  ref={endInput}
+                  mode="outlined"
+                  label={endLabel}
+                  value={state.endDate}
+                  onChange={(endDate) => onChange({ ...state, endDate })}
+                  onSubmitEditing={onSubmitEndInput}
+                  validRange={validRange}
+                  locale={locale}
+                  withModal={false}
+                  autoComplete="off"
+                  inputEnabled={inputEnabled}
+                  withDateFormatInLabel={withDateFormatInLabel}
+                  placeholder={placeholder}
+                  style={inputStyle}
+                />
+              </View>
+            </View>
+          ) : null}
         </View>
-      ) : null}
+      </View>
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   root: {
-    padding: 12,
+    paddingVertical: 12,
+    width: '100%',
   },
   separator: {
     width: 12,

package/src/Date/CalendarHeader.tsx

@@ -1,11 +1,19 @@
-import { StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import { IconButton, useTheme } from 'react-native-paper'
 import DayNames, { dayNamesHeight } from './DayNames'
 import type { DisableWeekDaysType } from './dateUtils'
+import { centerIconOnLastWeekday } from './weekdayColumns'
 import { getTranslation } from '../translations/utils'
 import { sharedStyles } from '../shared/styles'
 import { memo } from 'react'
 
+/** Space reserved so an overlay header does not paint over a vertical scrollbar. */
+export const verticalScrollbarGutter = Platform.select({
+  ios: 0,
+  web: 16,
+  default: 14,
+}) as number
+
 const buttonContainerHeight = 56
 const buttonContainerMarginTop = 4
 const buttonContainerMarginBottom = 8
@@ -29,6 +37,7 @@ function CalendarHeader({
   disableWeekDays,
   locale,
   startWeekOnMonday,
+  endInset = 0,
 }: {
   locale: undefined | string
   scrollMode: 'horizontal' | 'vertical'
@@ -36,30 +45,46 @@ function CalendarHeader({
   onNext: () => any
   disableWeekDays?: DisableWeekDaysType
   startWeekOnMonday: boolean
+  /** Shrink from the trailing edge so week names do not cover a vertical scrollbar. */
+  endInset?: number
 }) {
   const isHorizontal = scrollMode === 'horizontal'
-
   const theme = useTheme()
 
   return (
-    <View style={styles.datePickerHeader} pointerEvents={'box-none'}>
+    <View
+      style={
+        endInset
+          ? [styles.datePickerHeader, { right: endInset }]
+          : styles.datePickerHeader
+      }
+      pointerEvents={'box-none'}
+    >
       {isHorizontal ? (
         <View style={styles.buttonContainer} pointerEvents={'box-none'}>
           <View style={sharedStyles.root} pointerEvents={'box-none'} />
-          <View style={{ backgroundColor: theme.colors.elevation.level3 }}>
+          <View
+            style={[
+              styles.arrowGroup,
+              {
+                backgroundColor: theme.colors.elevation.level3,
+              },
+              centerIconOnLastWeekday(disableWeekDays),
+            ]}
+          >
             <IconButton
               icon="chevron-left"
               accessibilityLabel={getTranslation(locale, 'previous')}
               onPress={onPrev}
               testID="react-native-paper-dates-prev-month"
+              style={styles.arrowButton}
             />
-          </View>
-          <View style={{ backgroundColor: theme.colors.elevation.level3 }}>
             <IconButton
               icon="chevron-right"
               accessibilityLabel={getTranslation(locale, 'next')}
               onPress={onNext}
               testID="react-native-paper-dates-next-month"
+              style={styles.arrowButton}
             />
           </View>
         </View>
@@ -88,6 +113,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  arrowGroup: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  arrowButton: {
+    margin: 0,
+  },
 })
 
 export default memo(CalendarHeader)

package/src/Date/DatePickerModal.tsx

@@ -3,7 +3,6 @@ import {
   Platform,
   StyleSheet,
   TouchableWithoutFeedback,
-  useWindowDimensions,
   View,
 } from 'react-native'
 import { useTheme } from 'react-native-paper'
@@ -14,7 +13,7 @@ import DatePickerModalContent, {
 } from './DatePickerModalContent'
 import { memo } from 'react'
 import { sharedStyles } from '../shared/styles'
-import { supportedOrientations } from '../shared/utils'
+import { supportedOrientations, useIsLargeScreen } from '../shared/utils'
 
 interface DatePickerModalProps {
   visible: boolean
@@ -58,19 +57,11 @@ export function DatePickerModal(
     })
 
   const theme = useTheme()
-  const dimensions = useWindowDimensions()
-
-  // Automatically use formSheet on iPad for better fit
-  // iPad detection: width > 650 AND height > 650 (works in both orientations)
-  // - iPad portrait: 744x1133, landscape: 1133x744 (both > 650)
-  // - iPhone landscape: 932x430 (height < 650, so excluded)
-  // pageSheet on iPad is ~540pt wide, but calendar is max 400pt, causing centering
-  // formSheet at ~540x620pt provides a better fit for the date picker
+  const isLargeScreen = useIsLargeScreen()
   const shouldUseSheet =
     Platform.OS === 'ios' &&
     (presentationStyle === 'pageSheet' || presentationStyle === 'formSheet')
-  const useFormSheet =
-    shouldUseSheet && dimensions.width > 650 && dimensions.height > 650
+  const useFormSheet = shouldUseSheet && isLargeScreen
   const isSheet = shouldUseSheet
 
   return (
@@ -107,7 +98,7 @@ export function DatePickerModal(
             style={[
               styles.modalContent,
               { backgroundColor: theme.colors.elevation.level3 },
-              dimensions.width > 650
+              isLargeScreen
                 ? useFormSheet
                   ? styles.modalContentFormSheet
                   : styles.modalContentBig
@@ -134,6 +125,7 @@ const styles = StyleSheet.create({
   modalContent: {
     flex: 1,
     width: '100%',
+    minHeight: 0,
   },
   modalContentBig: {
     maxWidth: 400,

package/src/Date/DatePickerModalContent.tsx

@@ -17,6 +17,9 @@ import CalendarEdit from './CalendarEdit'
 import DatePickerModalHeaderBackground from './DatePickerModalHeaderBackground'
 import DatePickerModalStatusBar from './DatePickerModalStatusBar'
 import { memo, useCallback, useEffect, useState } from 'react'
+import { View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { sharedStyles } from '../shared/styles'
 
 export type LocalState = {
   startDate: CalendarDate
@@ -92,6 +95,7 @@ export function DatePickerModalContent(
   } = props
   const anyProps = props as any
   const defaultUppercase = false
+  const insets = useSafeAreaInsets()
 
   // use local state to add only onConfirm state changes
   const [state, setState] = useState<LocalState>({
@@ -143,7 +147,7 @@ export function DatePickerModalContent(
 
   return (
     <>
-      <DatePickerModalHeaderBackground>
+      <DatePickerModalHeaderBackground disableWeekDays={disableWeekDays}>
         <DatePickerModalStatusBar
           disableSafeTop={!!disableSafeTop}
           disableStatusBar={!!disableStatusBar}
@@ -157,6 +161,7 @@ export function DatePickerModalContent(
           saveLabelDisabled={props.saveLabelDisabled ?? false}
           uppercase={props.uppercase ?? defaultUppercase}
           closeIcon={props.closeIcon}
+          disableWeekDays={disableWeekDays}
         />
         <DatePickerModalContentHeader
           state={state}
@@ -174,47 +179,57 @@ export function DatePickerModalContent(
           editIcon={props?.editIcon}
           calendarIcon={props.calendarIcon}
           allowEditing={props.allowEditing ?? true}
+          disableWeekDays={disableWeekDays}
         />
       </DatePickerModalHeaderBackground>
-      <AnimatedCrossView
-        collapsed={collapsed}
-        calendar={
-          <Calendar
-            locale={locale}
-            mode={mode}
-            startDate={state.startDate}
-            endDate={state.endDate}
-            date={state.date}
-            onChange={onInnerChange}
-            disableWeekDays={disableWeekDays}
-            dates={state.dates}
-            validRange={validRange}
-            dateMode={dateMode}
-            startYear={startYear}
-            endYear={endYear}
-            startWeekOnMonday={startWeekOnMonday}
-            dayContent={dayContent}
-            dayContentPosition={dayContentPosition}
-            dayContentStyle={dayContentStyle}
-          />
-        }
-        calendarEdit={
-          <CalendarEdit
-            mode={mode}
-            state={state}
-            label={props.label}
-            startLabel={props.startLabel}
-            endLabel={props.endLabel}
-            collapsed={collapsed}
-            onChange={onInnerChange}
-            validRange={validRange}
-            locale={locale}
-            inputEnabled={props.inputEnabled}
-            withDateFormatInLabel={props.withDateFormatInLabel}
-            placeholder={props.placeholder}
-          />
-        }
-      />
+      <View
+        style={[
+          sharedStyles.root,
+          sharedStyles.minHeightZero,
+          { paddingLeft: insets.left, paddingRight: insets.right },
+        ]}
+      >
+        <AnimatedCrossView
+          collapsed={collapsed}
+          calendar={
+            <Calendar
+              locale={locale}
+              mode={mode}
+              startDate={state.startDate}
+              endDate={state.endDate}
+              date={state.date}
+              onChange={onInnerChange}
+              disableWeekDays={disableWeekDays}
+              dates={state.dates}
+              validRange={validRange}
+              dateMode={dateMode}
+              startYear={startYear}
+              endYear={endYear}
+              startWeekOnMonday={startWeekOnMonday}
+              dayContent={dayContent}
+              dayContentPosition={dayContentPosition}
+              dayContentStyle={dayContentStyle}
+            />
+          }
+          calendarEdit={
+            <CalendarEdit
+              mode={mode}
+              state={state}
+              label={props.label}
+              startLabel={props.startLabel}
+              endLabel={props.endLabel}
+              collapsed={collapsed}
+              onChange={onInnerChange}
+              validRange={validRange}
+              locale={locale}
+              inputEnabled={props.inputEnabled}
+              withDateFormatInLabel={props.withDateFormatInLabel}
+              placeholder={props.placeholder}
+              disableWeekDays={disableWeekDays}
+            />
+          }
+        />
+      </View>
     </>
   )
 }

package/src/Date/DatePickerModalContentHeader.tsx

@@ -7,6 +7,11 @@ import Color from 'color'
 import { getTranslation } from '../translations/utils'
 import { useMemo } from 'react'
 import { sharedStyles } from '../shared/styles'
+import type { DisableWeekDaysType } from './dateUtils'
+import {
+  alignTextToFirstWeekday,
+  centerIconOnLastWeekday,
+} from './weekdayColumns'
 
 export interface HeaderPickProps {
   moreLabel?: string
@@ -31,6 +36,7 @@ export interface HeaderContentProps extends HeaderPickProps {
   collapsed: boolean
   onToggle: () => any
   locale: string | undefined
+  disableWeekDays?: DisableWeekDaysType
 }
 
 function getLabel(
@@ -65,6 +71,7 @@ export default function DatePickerModalContentHeader(
     editIcon,
     calendarIcon,
     allowEditing,
+    disableWeekDays,
   } = props
   const theme = useTheme()
   const label = getLabel(props.locale, props.mode, props.label)
@@ -77,7 +84,7 @@ export default function DatePickerModalContentHeader(
 
   return (
     <View style={styles.header}>
-      <View>
+      <View style={alignTextToFirstWeekday(disableWeekDays)}>
         <Text
           maxFontSizeMultiplier={1.5}
           style={[styles.label, { color: supportingTextColor, ...textFont }]}
@@ -112,6 +119,7 @@ export default function DatePickerModalContentHeader(
           iconColor={theme.colors.onSurface}
           onPress={onToggle}
           testID="react-native-paper-dates-toggle-edit"
+          style={[styles.editButton, centerIconOnLastWeekday(disableWeekDays)]}
         />
       ) : null}
     </View>
@@ -234,12 +242,15 @@ export function HeaderContentRange({
 }
 
 const styles = StyleSheet.create({
+  editButton: {
+    marginTop: 0,
+    marginBottom: 0,
+    marginStart: 0,
+  },
   header: {
     height: 75,
     alignItems: 'center',
     flexDirection: 'row',
-    paddingLeft: 24,
-    paddingRight: 12,
   },
   headerContentContainer: {
     flexDirection: 'row',