react-native-platform-components 1.3.0 → 1.5.0

package/android/src/main/java/com/platformcomponents/PCDatePickerView.kt

@@ -3,9 +3,9 @@ package com.platformcomponents
 import android.app.Activity
 import android.content.Context
 import android.content.ContextWrapper
-import android.content.DialogInterface
-import android.os.Build
+import android.content.res.Configuration
 import android.util.Log
+import android.view.ContextThemeWrapper
 import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
@@ -15,6 +15,7 @@ import android.widget.FrameLayout
 import android.widget.LinearLayout
 import android.widget.TimePicker
 import androidx.appcompat.app.AlertDialog
+import androidx.fragment.app.DialogFragment
 import androidx.fragment.app.FragmentActivity
 import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.PixelUtil
@@ -22,9 +23,14 @@ import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.scroll.ReactScrollViewHelper
 import com.google.android.material.datepicker.CalendarConstraints
+import com.google.android.material.datepicker.CompositeDateValidator
+import com.google.android.material.datepicker.DateValidatorPointBackward
+import com.google.android.material.datepicker.DateValidatorPointForward
 import com.google.android.material.datepicker.MaterialDatePicker
 import com.google.android.material.timepicker.MaterialTimePicker
 import com.google.android.material.timepicker.TimeFormat
+import java.text.DateFormat
+import java.text.SimpleDateFormat
 import java.util.Calendar
 import java.util.Locale
 import java.util.TimeZone
@@ -35,6 +41,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
   companion object {
     private const val TAG = "PCDatePicker"
+    private val UTC: TimeZone = TimeZone.getTimeZone("UTC")
   }
 
   // --- State Wrapper for Fabric state updates ---
@@ -42,17 +49,20 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
   private var lastReportedWidth: Float = 0f
   private var lastReportedHeight: Float = 0f
+  private var inlineContentHeight = 0
 
   // --- Public props (set by manager) ---
-  private var mode: String = "date" // "date" | "time" | "dateAndTime"
+  private var mode: String = "date" // "date" | "time" | "dateAndTime" | "dateRange"
   private var presentation: String = "modal" // "inline" | "modal" | "popover" | "sheet" | "auto" (we treat non-inline as modal-ish)
   private var visible: String = "closed" // "open" | "closed" (only for non-inline)
   private var locale: Locale? = null
   private var timeZone: TimeZone = TimeZone.getDefault()
 
   private var dateMs: Long? = null
+  private var endDateMs: Long? = null // dateRange: the last day
   private var minDateMs: Long? = null
   private var maxDateMs: Long? = null
+  private var hourFormat: String = "" // "" (device setting) | "12" | "24"
 
   // --- Android config from nested `android` prop ---
   private var androidFirstDayOfWeek: Int? = null
@@ -60,9 +70,12 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
   private var androidDialogTitle: String? = null
   private var androidPositiveTitle: String? = null
   private var androidNegativeTitle: String? = null
+  private var androidInputMode: String = "" // "" | "calendar" | "text"
 
   // --- Events (wired by manager) ---
   var onConfirm: ((Long) -> Unit)? = null
+  /** dateRange: the first and last day. */
+  var onConfirmRange: ((Long, Long) -> Unit)? = null
   var onCancel: (() -> Unit)? = null
 
   // --- Inline UI ---
@@ -73,6 +86,9 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
   // --- Modal state ---
   private var showingModal = false
+  private var modalGeneration = 0
+  private var systemDialog: AlertDialog? = null
+  private var materialDialog: DialogFragment? = null
 
   // --- Native theme ---
   // Widgets read theme colors when they are created, so they are rebuilt when the
@@ -90,7 +106,12 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
       setMeasuredDimension(0, 0)
       return
     }
-    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+    // Measure the picker's intrinsic height before layout. Measuring again in
+    // onLayout leaves NumberPicker's centered text awaiting another layout,
+    // so its selected day/year can stay outside the visible text area.
+    super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED))
+    inlineContentHeight = inlineContainer?.measuredHeight ?: 0
+    setMeasuredDimension(measuredWidth, resolveSize(measuredHeight, heightMeasureSpec))
   }
 
   override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
@@ -107,15 +128,9 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
   private fun updateFrameSizeState() {
     val wrapper = stateWrapper ?: return
 
-    // Measure the inline container's preferred height
-    inlineContainer?.let { container ->
-      container.measure(
-        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
-        MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
-      )
-
+    inlineContainer?.let {
       val widthDp = PixelUtil.toDIPFromPixel(width.toFloat())
-      val heightDp = PixelUtil.toDIPFromPixel(container.measuredHeight.toFloat())
+      val heightDp = PixelUtil.toDIPFromPixel(inlineContentHeight.toFloat())
 
       // Only update state if the size actually changed (avoid infinite loops)
       if (widthDp != lastReportedWidth || heightDp != lastReportedHeight) {
@@ -139,7 +154,8 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
   fun applyMode(value: String?) {
     mode = when (value) {
-      "date", "time", "dateAndTime" -> value
+      "date", "time", "dateAndTime", "dateRange" -> value
+      // UIDatePicker's month and year wheels have no Android counterpart
       else -> "date"
     }
     Log.d(TAG, "applyMode mode=$mode")
@@ -148,8 +164,8 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
   fun applyPresentation(value: String?) {
     presentation = value ?: "modal"
+    if (isInline()) dismissIfNeeded()
     rebuildUI()
-    // If we were showing and presentation changed, we’ll let JS drive visible again.
   }
 
   fun applyVisible(value: String?) {
@@ -164,13 +180,15 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
   }
 
   fun applyLocale(value: String?) {
+    val previous = locale
     locale =
       try {
         if (value.isNullOrBlank()) null else Locale.forLanguageTag(value)
       } catch (_: Throwable) {
         null
       }
-    // Inline pickers don’t render strings; no-op other than storing.
+    // The embedded pickers are built from a locale-wrapped context.
+    if (isInline() && locale != previous) rebuildUI()
   }
 
   fun applyTimeZoneName(value: String?) {
@@ -189,6 +207,17 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
     syncInlineFromState()
   }
 
+  fun applyEndDateMs(value: Long?) {
+    endDateMs = value
+  }
+
+  fun applyHourFormat(value: String?) {
+    val next = if (value == "12" || value == "24") value else ""
+    if (hourFormat == next) return
+    hourFormat = next
+    inlineTimePicker?.setIs24HourView(is24Hour(context))
+  }
+
   fun applyMinDateMs(value: Long?) {
     minDateMs = value
     // clamp if needed
@@ -214,9 +243,11 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
     material: String?,
     dialogTitle: String?,
     positiveButtonTitle: String?,
-    negativeButtonTitle: String?
+    negativeButtonTitle: String?,
+    inputMode: String?
   ) {
     androidFirstDayOfWeek = firstDayOfWeek
+    androidInputMode = if (inputMode == "calendar" || inputMode == "text") inputMode else ""
 
     androidMaterialMode = when (material) {
       "m3" -> PCMaterialMode.M3
@@ -228,7 +259,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
     androidPositiveTitle = positiveButtonTitle
     androidNegativeTitle = negativeButtonTitle
 
-    // Inline date picker can use firstDayOfWeek in its internal Calendar calculations
+    inlineDatePicker?.let { applyFirstDayOfWeek(it) }
     syncInlineFromState()
   }
 
@@ -241,6 +272,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
   override fun onDetachedFromWindow() {
     PCNativeTheme.removeListener(nativeThemeListener)
+    dismissIfNeeded(notifyClosed = false)
     super.onDetachedFromWindow()
   }
 
@@ -277,6 +309,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
       return
     }
 
+    val pickerContext = localizedContext(context)
     val container = LinearLayout(context).apply {
       layoutParams = FrameLayout.LayoutParams(
         ViewGroup.LayoutParams.MATCH_PARENT,
@@ -288,20 +321,17 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
     // date and/or time
     if (mode == "date" || mode == "dateAndTime") {
-      val dp = DatePicker(context).apply {
+      // DatePicker chooses its delegate in the constructor; the visibility
+      // setters cannot change a calendar delegate into spinner mode.
+      // https://developer.android.com/reference/android/widget/DatePicker#attr_android:datePickerMode
+      val dp = DatePicker(ContextThemeWrapper(pickerContext, R.style.PCInlineDatePickerThemeOverlay)).apply {
+        applyFirstDayOfWeek(this)
         layoutParams = LinearLayout.LayoutParams(
           ViewGroup.LayoutParams.WRAP_CONTENT,
           ViewGroup.LayoutParams.WRAP_CONTENT
         )
-        // Use spinner mode to avoid CalendarView rendering bugs when scrolling months
-        calendarViewShown = false
-        spinnersShown = true
-        // Defer min/max date setting to avoid CalendarView initialization race condition
-        // where SimpleMonthView may not be fully detached yet during layout
-        post {
-          minDateMs?.let { minDate = it }
-          maxDateMs?.let { maxDate = it }
-        }
+        minDateMs?.let { minDate = it }
+        maxDateMs?.let { maxDate = it }
       }
       container.addView(dp)
       inlineDatePicker = dp
@@ -313,13 +343,12 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
     }
 
     if (mode == "time" || mode == "dateAndTime") {
-      val tp = TimePicker(context).apply {
+      val tp = TimePicker(pickerContext).apply {
         layoutParams = LinearLayout.LayoutParams(
           ViewGroup.LayoutParams.WRAP_CONTENT,
           ViewGroup.LayoutParams.WRAP_CONTENT
         )
-        val is24 = android.text.format.DateFormat.is24HourFormat(context)
-        setIs24HourView(is24)
+        setIs24HourView(is24Hour(context))
       }
       container.addView(tp)
       inlineTimePicker = tp
@@ -366,15 +395,8 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
       inlineTimePicker?.let { tp ->
         val hour = cal.get(Calendar.HOUR_OF_DAY)
         val minute = cal.get(Calendar.MINUTE)
-        if (Build.VERSION.SDK_INT >= 23) {
-          if (tp.hour != hour) tp.hour = hour
-          if (tp.minute != minute) tp.minute = minute
-        } else {
-          @Suppress("DEPRECATION")
-          if (tp.currentHour != hour) tp.currentHour = hour
-          @Suppress("DEPRECATION")
-          if (tp.currentMinute != minute) tp.currentMinute = minute
-        }
+        if (tp.hour != hour) tp.hour = hour
+        if (tp.minute != minute) tp.minute = minute
       }
     } finally {
       suppressInlineCallbacks = false
@@ -420,17 +442,23 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
   private fun presentIfNeeded() {
     if (showingModal) return
     showingModal = true
+    val generation = ++modalGeneration
 
     // Defer presentation to the next frame to ensure all props from the current
     // React Native batch are applied first. This guarantees dateMs reflects the
     // latest value from React Native before we create the dialog.
     post {
-      if (!showingModal) return@post
+      if (!showingModal || generation != modalGeneration) return@post
 
       val act = findFragmentActivity() ?: run {
         Log.w(TAG, "presentIfNeeded: no FragmentActivity found")
-        onCancel?.invoke()
-        showingModal = false
+        dismissIfNeeded()
+        return@post
+      }
+      if (!isAttachedToWindow || act.isFinishing || act.isDestroyed ||
+        act.supportFragmentManager.isStateSaved
+      ) {
+        dismissIfNeeded()
         return@post
       }
 
@@ -439,15 +467,36 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
       when (mode) {
         "time" -> presentTime(act)
         "dateAndTime" -> presentDateThenTime(act)
+        // Only Material has a range picker
+        "dateRange" -> presentM3DateRange(act)
         else -> presentDate(act)
       }
     }
   }
 
-  private fun dismissIfNeeded() {
-    // We don’t retain dialog instances here; JS will close by dismissing itself or user action.
-    // This keeps parity with Fabric headless patterns.
-    showingModal = false
+  private fun dismissIfNeeded(notifyClosed: Boolean = true) {
+    val wasShowing = showingModal
+    val system = systemDialog
+    val material = materialDialog
+    // Clear ownership before dismissal: its listeners may run synchronously.
+    modalGeneration += 1
+    onCancelOrClose()
+    system?.dismiss()
+    // A React view can detach after the activity saved its fragment state.
+    // https://developer.android.com/reference/androidx/fragment/app/DialogFragment#dismissAllowingStateLoss()
+    material?.dismissAllowingStateLoss()
+    if (wasShowing && notifyClosed) onCancel?.invoke()
+  }
+
+  private fun showSystemDialog(dialog: AlertDialog) {
+    systemDialog = dialog
+    dialog.setOnDismissListener {
+      if (systemDialog === dialog && showingModal) {
+        onCancelOrClose()
+        onCancel?.invoke()
+      }
+    }
+    dialog.show()
   }
 
   private fun presentDate(act: FragmentActivity) {
@@ -474,7 +523,9 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
     val ts = clamp(dateMs ?: System.currentTimeMillis())
     val cal = calendarFor(ts)
 
-    val picker = DatePicker(act).apply {
+    val dialogContext = localizedContext(PCThemeSupport.appCompatDialogContext(act, "DatePicker"))
+    val picker = DatePicker(dialogContext).apply {
+      applyFirstDayOfWeek(this)
       calendarViewShown = true
       spinnersShown = false
       // Set the date first, before min/max constraints
@@ -493,13 +544,13 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
     // Wrap picker in a container with horizontal padding to prevent CalendarView
     // from clipping against the dialog edges
-    val container = FrameLayout(act).apply {
+    val container = FrameLayout(dialogContext).apply {
       val horizontalPadding = (8 * resources.displayMetrics.density).toInt()
       setPadding(horizontalPadding, 0, horizontalPadding, 0)
       addView(picker)
     }
 
-    val dlg = AlertDialog.Builder(PCThemeSupport.appCompatDialogContext(act, "DatePicker"))
+    val dlg = AlertDialog.Builder(dialogContext)
       .setTitle(androidDialogTitle ?: "")
       .setView(container)
       .setPositiveButton(androidPositiveTitle ?: "OK") { _, _ ->
@@ -524,46 +575,31 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
       }
       .create()
 
-    dlg.show()
+    showSystemDialog(dlg)
   }
 
   private fun presentSystemTime(act: FragmentActivity) {
     val ts = clamp(dateMs ?: System.currentTimeMillis())
     val cal = calendarFor(ts)
 
-    val picker = TimePicker(act).apply {
-      val is24 = android.text.format.DateFormat.is24HourFormat(act)
-      setIs24HourView(is24)
+    val dialogContext = localizedContext(PCThemeSupport.appCompatDialogContext(act, "DatePicker"))
+    val picker = TimePicker(dialogContext).apply {
+      setIs24HourView(is24Hour(act))
 
       val hour = cal.get(Calendar.HOUR_OF_DAY)
       val minute = cal.get(Calendar.MINUTE)
 
-      if (Build.VERSION.SDK_INT >= 23) {
-        this.hour = hour
-        this.minute = minute
-      } else {
-        @Suppress("DEPRECATION") this.currentHour = hour
-        @Suppress("DEPRECATION") this.currentMinute = minute
-      }
+      this.hour = hour
+      this.minute = minute
     }
 
-    val dlg = AlertDialog.Builder(PCThemeSupport.appCompatDialogContext(act, "DatePicker"))
+    val dlg = AlertDialog.Builder(dialogContext)
       .setTitle(androidDialogTitle ?: "")
       .setView(picker)
       .setPositiveButton(androidPositiveTitle ?: "OK") { _, _ ->
-        val h: Int
-        val m: Int
-        if (Build.VERSION.SDK_INT >= 23) {
-          h = picker.hour
-          m = picker.minute
-        } else {
-          @Suppress("DEPRECATION") h = picker.currentHour
-          @Suppress("DEPRECATION") m = picker.currentMinute
-        }
-
         val c = calendarFor(ts)
-        c.set(Calendar.HOUR_OF_DAY, h)
-        c.set(Calendar.MINUTE, m)
+        c.set(Calendar.HOUR_OF_DAY, picker.hour)
+        c.set(Calendar.MINUTE, picker.minute)
         c.set(Calendar.SECOND, 0)
         c.set(Calendar.MILLISECOND, 0)
 
@@ -581,7 +617,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
       }
       .create()
 
-    dlg.show()
+    showSystemDialog(dlg)
   }
 
   private fun presentSystemDateThenTime(act: FragmentActivity) {
@@ -589,7 +625,9 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
     val ts = clamp(dateMs ?: System.currentTimeMillis())
     val cal = calendarFor(ts)
 
-    val picker = DatePicker(act).apply {
+    val dialogContext = localizedContext(PCThemeSupport.appCompatDialogContext(act, "DatePicker"))
+    val picker = DatePicker(dialogContext).apply {
+      applyFirstDayOfWeek(this)
       calendarViewShown = true
       spinnersShown = false
       // Set the date first, before min/max constraints
@@ -608,13 +646,13 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
     // Wrap picker in a container with horizontal padding to prevent CalendarView
     // from clipping against the dialog edges
-    val container = FrameLayout(act).apply {
+    val container = FrameLayout(dialogContext).apply {
       val horizontalPadding = (8 * resources.displayMetrics.density).toInt()
       setPadding(horizontalPadding, 0, horizontalPadding, 0)
       addView(picker)
     }
 
-    val dlg = AlertDialog.Builder(PCThemeSupport.appCompatDialogContext(act, "DatePicker"))
+    val dlg = AlertDialog.Builder(dialogContext)
       .setTitle(androidDialogTitle ?: "")
       .setView(container)
       .setPositiveButton(androidPositiveTitle ?: "Next") { _, _ ->
@@ -639,7 +677,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
       }
       .create()
 
-    dlg.show()
+    showSystemDialog(dlg)
   }
 
   // -----------------------------
@@ -649,24 +687,13 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
   private fun presentM3Date(act: FragmentActivity) {
     val ts = clamp(dateMs ?: System.currentTimeMillis())
 
-    val builder = MaterialDatePicker.Builder.datePicker()
-      .setSelection(ts)
-      .setTheme(m3CalendarTheme(act))
-
-    androidDialogTitle?.let { builder.setTitleText(it) }
-    androidPositiveTitle?.let { builder.setPositiveButtonText(it) }
-    androidNegativeTitle?.let { builder.setNegativeButtonText(it) }
-
-    val constraints = buildM3CalendarConstraints()
-    if (constraints != null) builder.setCalendarConstraints(constraints)
-
-    val picker = builder.build()
+    val picker = buildM3DatePicker(act, ts)
 
     picker.addOnPositiveButtonClickListener { selection ->
       val sel = (selection ?: ts)
       // Selection is date-based; merge with existing time-of-day
       val base = calendarFor(ts)
-      val selUtc = Calendar.getInstance(TimeZone.getTimeZone("UTC")).apply { timeInMillis = sel }
+      val selUtc = Calendar.getInstance(UTC).apply { timeInMillis = sel }
       base.set(Calendar.YEAR, selUtc.get(Calendar.YEAR))
       base.set(Calendar.MONTH, selUtc.get(Calendar.MONTH))
       base.set(Calendar.DAY_OF_MONTH, selUtc.get(Calendar.DAY_OF_MONTH))
@@ -680,12 +707,13 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
 
     picker.addOnDismissListener {
       // If dismissed without confirm, treat as cancel
-      if (showingModal) {
+      if (materialDialog === picker && showingModal) {
         onCancel?.invoke()
         onCancelOrClose()
       }
     }
 
+    materialDialog = picker
     picker.show(act.supportFragmentManager, "PCDatePicker_M3_DATE")
   }
 
@@ -693,12 +721,15 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
     val ts = clamp(dateMs ?: System.currentTimeMillis())
     val cal = calendarFor(ts)
 
-    val is24 = android.text.format.DateFormat.is24HourFormat(act)
     val builder = MaterialTimePicker.Builder()
       .setTheme(m3TimePickerTheme(act))
-      .setTimeFormat(if (is24) TimeFormat.CLOCK_24H else TimeFormat.CLOCK_12H)
+      .setTimeFormat(if (is24Hour(act)) TimeFormat.CLOCK_24H else TimeFormat.CLOCK_12H)
       .setHour(cal.get(Calendar.HOUR_OF_DAY))
       .setMinute(cal.get(Calendar.MINUTE))
+    when (androidInputMode) {
+      "text" -> builder.setInputMode(MaterialTimePicker.INPUT_MODE_KEYBOARD)
+      "calendar" -> builder.setInputMode(MaterialTimePicker.INPUT_MODE_CLOCK)
+    }
 
     androidDialogTitle?.let { builder.setTitleText(it) }
     // These exist in recent Material; if you’re on an older one, you’ll get compile errors.
@@ -720,35 +751,25 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
     }
 
     picker.addOnDismissListener {
-      if (showingModal) {
+      if (materialDialog === picker && showingModal) {
         onCancel?.invoke()
         onCancelOrClose()
       }
     }
 
+    materialDialog = picker
     picker.show(act.supportFragmentManager, "PCDatePicker_M3_TIME")
   }
 
   private fun presentM3DateThenTime(act: FragmentActivity) {
     val ts = clamp(dateMs ?: System.currentTimeMillis())
 
-    val builder = MaterialDatePicker.Builder.datePicker()
-      .setSelection(ts)
-      .setTheme(m3CalendarTheme(act))
-
-    androidDialogTitle?.let { builder.setTitleText(it) }
-    androidPositiveTitle?.let { builder.setPositiveButtonText(it) }
-    androidNegativeTitle?.let { builder.setNegativeButtonText(it) }
-
-    val constraints = buildM3CalendarConstraints()
-    if (constraints != null) builder.setCalendarConstraints(constraints)
-
-    val picker = builder.build()
+    val picker = buildM3DatePicker(act, ts)
 
     picker.addOnPositiveButtonClickListener { selection ->
       val sel = (selection ?: ts)
       val base = calendarFor(ts)
-      val selUtc = Calendar.getInstance(TimeZone.getTimeZone("UTC")).apply { timeInMillis = sel }
+      val selUtc = Calendar.getInstance(UTC).apply { timeInMillis = sel }
       base.set(Calendar.YEAR, selUtc.get(Calendar.YEAR))
       base.set(Calendar.MONTH, selUtc.get(Calendar.MONTH))
       base.set(Calendar.DAY_OF_MONTH, selUtc.get(Calendar.DAY_OF_MONTH))
@@ -761,15 +782,66 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
     }
 
     picker.addOnDismissListener {
-      if (showingModal) {
+      // Material also dismisses after Next. The time picker owns the session
+      // then, so finishing the date dialog must not close it.
+      // https://developer.android.com/reference/com/google/android/material/datepicker/MaterialDatePicker#addOnDismissListener(android.content.DialogInterface.OnDismissListener)
+      if (materialDialog === picker && showingModal) {
         onCancel?.invoke()
         onCancelOrClose()
       }
     }
 
+    materialDialog = picker
     picker.show(act.supportFragmentManager, "PCDatePicker_M3_DATE_THEN_TIME")
   }
 
+  /**
+   * The Material range picker (full screen). The selection is two UTC-midnight
+   * days, reported as the start of each day in this picker's time zone.
+   */
+  private fun presentM3DateRange(act: FragmentActivity) {
+    val builder = MaterialDatePicker.Builder.dateRangePicker()
+      .setTheme(m3CalendarTheme(act))
+      .setCalendarConstraints(buildM3CalendarConstraints())
+    val start = dateMs?.let { utcDayFor(clamp(it)) }
+    val end = endDateMs?.let { utcDayFor(clamp(it)) }
+    if (start != null && end != null && end >= start) {
+      builder.setSelection(androidx.core.util.Pair(start, end))
+    }
+    androidDialogTitle?.let { builder.setTitleText(it) }
+    androidPositiveTitle?.let { builder.setPositiveButtonText(it) }
+    androidNegativeTitle?.let { builder.setNegativeButtonText(it) }
+    m3InputMode()?.let { builder.setInputMode(it) }
+    locale?.let { l -> m3TextInputFormat(l)?.let { builder.setTextInputFormat(it) } }
+
+    val picker = builder.build()
+
+    picker.addOnPositiveButtonClickListener { selection ->
+      val first = selection?.first
+      val second = selection?.second
+      if (first != null && second != null) {
+        val startMs = clamp(localDayStartFor(first))
+        val endMs = clamp(localDayStartFor(second))
+        dateMs = startMs
+        endDateMs = endMs
+        onConfirmRange?.invoke(startMs, endMs)
+      } else {
+        onCancel?.invoke()
+      }
+      onCancelOrClose()
+    }
+
+    picker.addOnDismissListener {
+      if (materialDialog === picker && showingModal) {
+        onCancel?.invoke()
+        onCancelOrClose()
+      }
+    }
+
+    materialDialog = picker
+    picker.show(act.supportFragmentManager, "PCDatePicker_M3_RANGE")
+  }
+
   /**
    * Material pickers resolve their theme from the activity. When the app theme is
    * not a Material theme they would throw, so hand them a full Material 3 dialog
@@ -791,17 +863,138 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
       R.style.PCMaterial3TimePickerDialogTheme_NativeTheme
     )
 
-  private fun buildM3CalendarConstraints(): CalendarConstraints? {
-    val min = minDateMs
-    val max = maxDateMs
-    if (min == null && max == null) return null
+  private fun buildM3DatePicker(act: FragmentActivity, ts: Long): MaterialDatePicker<Long> {
+    val builder = MaterialDatePicker.Builder.datePicker()
+      // MaterialDatePicker works in UTC days: its selection is the UTC midnight
+      // of the chosen day, so hand it this picker's calendar day in those terms.
+      .setSelection(utcDayFor(ts))
+      .setTheme(m3CalendarTheme(act))
+      .setCalendarConstraints(buildM3CalendarConstraints())
 
+    androidDialogTitle?.let { builder.setTitleText(it) }
+    androidPositiveTitle?.let { builder.setPositiveButtonText(it) }
+    androidNegativeTitle?.let { builder.setNegativeButtonText(it) }
+    m3InputMode()?.let { builder.setInputMode(it) }
+    // MaterialDatePicker formats with the process default locale and cannot be
+    // given a context, so `locale` only reaches its text-input date format.
+    locale?.let { l -> m3TextInputFormat(l)?.let { builder.setTextInputFormat(it) } }
+
+    return builder.build()
+  }
+
+  private fun buildM3CalendarConstraints(): CalendarConstraints {
     val b = CalendarConstraints.Builder()
-    min?.let { b.setStart(it) }
-    max?.let { b.setEnd(it) }
+    androidFirstDayOfWeek?.takeIf { it in Calendar.SUNDAY..Calendar.SATURDAY }?.let {
+      b.setFirstDayOfWeek(it)
+    }
+
+    val minDay = minDateMs?.let { utcDayFor(it) }
+    val maxDay = maxDateMs?.let { utcDayFor(it) }
+    minDay?.let { b.setStart(it) }
+    maxDay?.let { b.setEnd(it) }
+
+    // setStart/setEnd only limit month paging; the validator greys out the days
+    // before min in the first month and after max in the last one. Both points
+    // are UTC midnights, like the days the picker validates, and both bounds are
+    // inclusive (forward: day >= min, backward: day <= max).
+    val validators = listOfNotNull<CalendarConstraints.DateValidator>(
+      minDay?.let { DateValidatorPointForward.from(it) },
+      maxDay?.let { DateValidatorPointBackward.before(it) }
+    )
+    if (validators.isNotEmpty()) b.setValidator(CompositeDateValidator.allOf(validators))
     return b.build()
   }
 
+  /** MaterialDatePicker's input mode for `android.inputMode`; null keeps its default. */
+  private fun m3InputMode(): Int? = when (androidInputMode) {
+    "text" -> MaterialDatePicker.INPUT_MODE_TEXT
+    "calendar" -> MaterialDatePicker.INPUT_MODE_CALENDAR
+    else -> null
+  }
+
+  /** `is24Hour`, else the device's 12/24-hour setting. */
+  private fun is24Hour(ctx: Context): Boolean = when (hourFormat) {
+    "24" -> true
+    "12" -> false
+    else -> android.text.format.DateFormat.is24HourFormat(ctx)
+  }
+
+  /** The start of the day [utcDay] (a UTC midnight) names, in this picker's time zone. */
+  private fun localDayStartFor(utcDay: Long): Long {
+    val day = Calendar.getInstance(UTC).apply { timeInMillis = utcDay }
+    return Calendar.getInstance(timeZone).apply {
+      clear()
+      set(day.get(Calendar.YEAR), day.get(Calendar.MONTH), day.get(Calendar.DAY_OF_MONTH))
+    }.timeInMillis
+  }
+
+  /** The UTC midnight of [ts]'s calendar day in this picker's time zone. */
+  private fun utcDayFor(ts: Long): Long {
+    val local = calendarFor(ts)
+    return Calendar.getInstance(UTC).apply {
+      clear()
+      set(
+        local.get(Calendar.YEAR),
+        local.get(Calendar.MONTH),
+        local.get(Calendar.DAY_OF_MONTH)
+      )
+    }.timeInMillis
+  }
+
+  /**
+   * The locale's short date pattern as a fixed-width input format (dd, MM,
+   * yyyy), the way MaterialDatePicker derives its default one.
+   */
+  private fun m3TextInputFormat(l: Locale): SimpleDateFormat? {
+    val pattern = (DateFormat.getDateInstance(DateFormat.SHORT, l) as? SimpleDateFormat)
+      ?.toPattern() ?: return null
+    val input = pattern
+      .replace(Regex("[^dMy/\\-.]"), "")
+      .replace(Regex("d{1,2}"), "dd")
+      .replace(Regex("M{1,2}"), "MM")
+      .replace(Regex("y{1,4}"), "yyyy")
+      .replace(Regex("\\.$"), "")
+    return try {
+      SimpleDateFormat(input, l).apply {
+        timeZone = UTC
+        isLenient = false
+      }
+    } catch (_: IllegalArgumentException) {
+      null
+    }
+  }
+
+  private fun applyFirstDayOfWeek(picker: DatePicker) {
+    androidFirstDayOfWeek?.takeIf { it in Calendar.SUNDAY..Calendar.SATURDAY }?.let {
+      picker.firstDayOfWeek = it
+    }
+  }
+
+  /**
+   * [base] with the `locale` prop as its configuration locale, so the system
+   * pickers built from it draw month and weekday names in that locale.
+   */
+  private fun localizedContext(base: Context): Context {
+    val l = locale ?: return base
+    val config = Configuration(base.resources.configuration).apply { setLocale(l) }
+    return LocaleContext(base, base.createConfigurationContext(config).resources)
+  }
+
+  /**
+   * Swaps only the Resources. `applyOverrideConfiguration` would copy the base
+   * theme into a theme of the new Resources (Theme.setTo), which drops
+   * attributes (runtime native-theme colors among them), so the base theme
+   * object is used as is. Being a ContextThemeWrapper, its LayoutInflater is
+   * bound to this context, so inflated views see the localized Resources.
+   */
+  private class LocaleContext(
+    base: Context,
+    private val localized: android.content.res.Resources
+  ) : ContextThemeWrapper(base, 0) {
+    override fun getResources(): android.content.res.Resources = localized
+    override fun getTheme(): android.content.res.Resources.Theme = baseContext.theme
+  }
+
   // -----------------------------
   // Utility
   // -----------------------------
@@ -809,6 +1002,8 @@ class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollView
   private fun onCancelOrClose() {
     Log.d(TAG, "onCancelOrClose")
     showingModal = false
+    systemDialog = null
+    materialDialog = null
   }
 
   private fun clamp(valueMs: Long): Long {