@octane-xplat/date-picker 0.0.1 → 0.9.0

package/platforms/android/java/com/octanexplat/datepicker/XplatDatePickerProvider.kt

@@ -0,0 +1,335 @@
+// Adapted from @expo/ui (MIT) — Copyright 2025-present 650 Industries.
+// Upstream: expo/packages/expo-ui/android/.../ui/DatePickerView.kt (sdk-57).
+// The ExpoModules glue (@OptimizedRecord/@OptimizedComposeProps records,
+// ModifierRegistry, AsyncFunctionHandle) is replaced by the
+// @nativescript/jetpack-compose provider contract: updateData(Map) + onEvent.
+// Colors arrive as CSS hex strings instead of expo ColorValue ints. The
+// dialog wrappers (DatePickerDialog/TimePickerDialog) are not ported; the
+// inline DatePicker/TimePicker composables cover this leaf's contract.
+
+package com.octanexplat.datepicker
+
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DatePickerDefaults
+import androidx.compose.material3.DatePickerState
+import androidx.compose.material3.DisplayMode
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SelectableDates
+import androidx.compose.material3.TimePicker
+import androidx.compose.material3.TimePickerDefaults
+import androidx.compose.material3.TimePickerLayoutType
+import androidx.compose.material3.TimePickerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalConfiguration
+import org.json.JSONObject
+import java.util.Calendar
+import java.util.Date
+
+private fun Any?.asBoolean(): Boolean = when (this) {
+	is Boolean -> this
+	is Number -> toInt() != 0
+	else -> false
+}
+
+private fun Any?.asLong(): Long? = when (this) {
+	is Number -> toLong()
+	else -> null
+}
+
+private fun Any?.asColor(): Color? = when (this) {
+	is String -> runCatching { Color(android.graphics.Color.parseColor(this)) }.getOrNull()
+	else -> null
+}
+
+private data class SelectableRange(
+	val start: Long? = null,
+	val end: Long? = null,
+)
+
+private data class DatePickerUiState(
+	val initialDate: Long? = null,
+	val variant: String = "picker",
+	val displayedComponents: String = "date",
+	val showVariantToggle: Boolean = true,
+	val is24Hour: Boolean = true,
+	val color: Color? = null,
+	val elementColors: Map<*, *> = emptyMap<Any?, Any?>(),
+	val selectableDates: SelectableRange = SelectableRange(),
+)
+
+private fun toUtcDayMillis(localMillis: Long): Long {
+	val cal = Calendar.getInstance()
+	cal.timeInMillis = localMillis
+	val utcCal = Calendar.getInstance(java.util.TimeZone.getTimeZone("UTC"))
+	utcCal.set(cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), cal.get(Calendar.DAY_OF_MONTH), 0, 0, 0)
+	utcCal.set(Calendar.MILLISECOND, 0)
+	return utcCal.timeInMillis
+}
+
+// Material3 stores selectedDateMillis as UTC-midnight epoch; emitting it raw
+// makes `new Date(ms)` resolve to the previous day in negative-UTC zones.
+// Convert back to local-midnight millis so the JS-side Date lands on the
+// calendar day the user picked.
+private fun toLocalDayMillis(utcMillis: Long): Long {
+	val utcCal = Calendar.getInstance(java.util.TimeZone.getTimeZone("UTC"))
+	utcCal.timeInMillis = utcMillis
+	val localCal = Calendar.getInstance()
+	localCal.clear()
+	localCal.set(utcCal.get(Calendar.YEAR), utcCal.get(Calendar.MONTH), utcCal.get(Calendar.DAY_OF_MONTH))
+	return localCal.timeInMillis
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun rememberSelectableDates(range: SelectableRange): SelectableDates {
+	val start = range.start
+	val end = range.end
+	return remember(start, end) {
+		if (start != null || end != null) {
+			val startUtcDayMillis = start?.let { toUtcDayMillis(it) }
+			val endUtcDayMillis = end?.let { toUtcDayMillis(it) }
+			val startYear = start?.let {
+				val cal = Calendar.getInstance()
+				cal.timeInMillis = it
+				cal.get(Calendar.YEAR)
+			}
+			val endYear = end?.let {
+				val cal = Calendar.getInstance()
+				cal.timeInMillis = it
+				cal.get(Calendar.YEAR)
+			}
+			object : SelectableDates {
+				override fun isSelectableDate(utcTimeMillis: Long): Boolean {
+					if (startUtcDayMillis != null && utcTimeMillis < startUtcDayMillis) return false
+					if (endUtcDayMillis != null && utcTimeMillis > endUtcDayMillis) return false
+					return true
+				}
+
+				override fun isSelectableYear(year: Int): Boolean {
+					if (startYear != null && year < startYear) return false
+					if (endYear != null && year > endYear) return false
+					return true
+				}
+			}
+		} else {
+			DatePickerDefaults.AllDates
+		}
+	}
+}
+
+// `selectableDates` only greys out unselectable cells; the calendar's actual
+// extent (months list, year grid, range content description) comes from
+// `yearRange`. Derive it from min/max so the picker reflects the constraints
+// instead of always spanning the 1900..2100 default.
+// https://github.com/expo/expo/issues/47206
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun rememberDatePickerYearRange(range: SelectableRange, initialDateMillis: Long): IntRange {
+	val start = range.start
+	val end = range.end
+	return remember(start, end, initialDateMillis) {
+		val defaults = DatePickerDefaults.YearRange
+		val yearOf = { millis: Long ->
+			Calendar.getInstance().apply { timeInMillis = millis }.get(Calendar.YEAR)
+		}
+		val startYear = start?.let(yearOf) ?: defaults.first
+		val endYear = end?.let(yearOf) ?: defaults.last
+		val initialYear = yearOf(initialDateMillis)
+		minOf(startYear, initialYear)..maxOf(endYear, initialYear)
+	}
+}
+
+private fun Map<*, *>.color(name: String): Color? = this[name].asColor()
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun buildDatePickerColors(
+	elementColors: Map<*, *>,
+	colorProp: Color?,
+): androidx.compose.material3.DatePickerColors {
+	val defaults = DatePickerDefaults.colors()
+	return defaults.copy(
+		containerColor = elementColors.color("containerColor") ?: defaults.containerColor,
+		titleContentColor = elementColors.color("titleContentColor") ?: colorProp ?: defaults.titleContentColor,
+		headlineContentColor = elementColors.color("headlineContentColor") ?: colorProp ?: defaults.headlineContentColor,
+		weekdayContentColor = elementColors.color("weekdayContentColor") ?: defaults.weekdayContentColor,
+		subheadContentColor = elementColors.color("subheadContentColor") ?: defaults.subheadContentColor,
+		navigationContentColor = elementColors.color("navigationContentColor") ?: defaults.navigationContentColor,
+		yearContentColor = elementColors.color("yearContentColor") ?: defaults.yearContentColor,
+		disabledYearContentColor = elementColors.color("disabledYearContentColor") ?: defaults.disabledYearContentColor,
+		currentYearContentColor = elementColors.color("currentYearContentColor") ?: defaults.currentYearContentColor,
+		selectedYearContentColor = elementColors.color("selectedYearContentColor") ?: defaults.selectedYearContentColor,
+		disabledSelectedYearContentColor = elementColors.color("disabledSelectedYearContentColor") ?: defaults.disabledSelectedYearContentColor,
+		selectedYearContainerColor = elementColors.color("selectedYearContainerColor") ?: defaults.selectedYearContainerColor,
+		disabledSelectedYearContainerColor = elementColors.color("disabledSelectedYearContainerColor") ?: defaults.disabledSelectedYearContainerColor,
+		dayContentColor = elementColors.color("dayContentColor") ?: defaults.dayContentColor,
+		disabledDayContentColor = elementColors.color("disabledDayContentColor") ?: defaults.disabledDayContentColor,
+		selectedDayContentColor = elementColors.color("selectedDayContentColor") ?: defaults.selectedDayContentColor,
+		disabledSelectedDayContentColor = elementColors.color("disabledSelectedDayContentColor") ?: defaults.disabledSelectedDayContentColor,
+		selectedDayContainerColor = elementColors.color("selectedDayContainerColor") ?: colorProp ?: defaults.selectedDayContainerColor,
+		disabledSelectedDayContainerColor = elementColors.color("disabledSelectedDayContainerColor") ?: defaults.disabledSelectedDayContainerColor,
+		todayContentColor = elementColors.color("todayContentColor") ?: defaults.todayContentColor,
+		todayDateBorderColor = elementColors.color("todayDateBorderColor") ?: colorProp ?: defaults.todayDateBorderColor,
+		dayInSelectionRangeContentColor = elementColors.color("dayInSelectionRangeContentColor") ?: defaults.dayInSelectionRangeContentColor,
+		dayInSelectionRangeContainerColor = elementColors.color("dayInSelectionRangeContainerColor") ?: defaults.dayInSelectionRangeContainerColor,
+		dividerColor = elementColors.color("dividerColor") ?: defaults.dividerColor,
+	)
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun buildTimePickerColors(
+	elementColors: Map<*, *>,
+	colorProp: Color?,
+): androidx.compose.material3.TimePickerColors {
+	val defaults = TimePickerDefaults.colors()
+	return defaults.copy(
+		containerColor = elementColors.color("containerColor") ?: defaults.containerColor,
+		clockDialColor = elementColors.color("clockDialColor") ?: colorProp?.copy(alpha = 0.3f) ?: defaults.clockDialColor,
+		clockDialSelectedContentColor = elementColors.color("clockDialSelectedContentColor") ?: defaults.clockDialSelectedContentColor,
+		clockDialUnselectedContentColor = elementColors.color("clockDialUnselectedContentColor") ?: defaults.clockDialUnselectedContentColor,
+		selectorColor = elementColors.color("selectorColor") ?: colorProp ?: defaults.selectorColor,
+		periodSelectorBorderColor = elementColors.color("periodSelectorBorderColor") ?: defaults.periodSelectorBorderColor,
+		periodSelectorSelectedContainerColor = elementColors.color("periodSelectorSelectedContainerColor") ?: defaults.periodSelectorSelectedContainerColor,
+		periodSelectorUnselectedContainerColor = elementColors.color("periodSelectorUnselectedContainerColor") ?: defaults.periodSelectorUnselectedContainerColor,
+		periodSelectorSelectedContentColor = elementColors.color("periodSelectorSelectedContentColor") ?: defaults.periodSelectorSelectedContentColor,
+		periodSelectorUnselectedContentColor = elementColors.color("periodSelectorUnselectedContentColor") ?: defaults.periodSelectorUnselectedContentColor,
+		timeSelectorSelectedContainerColor = elementColors.color("timeSelectorSelectedContainerColor") ?: colorProp ?: defaults.timeSelectorSelectedContainerColor,
+		timeSelectorUnselectedContainerColor = elementColors.color("timeSelectorUnselectedContainerColor") ?: defaults.timeSelectorUnselectedContainerColor,
+		timeSelectorSelectedContentColor = elementColors.color("timeSelectorSelectedContentColor") ?: defaults.timeSelectorSelectedContentColor,
+		timeSelectorUnselectedContentColor = elementColors.color("timeSelectorUnselectedContentColor") ?: defaults.timeSelectorUnselectedContentColor,
+	)
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun ExpoDatePicker(modifier: Modifier = Modifier, state: DatePickerUiState, onDateSelected: (Long?) -> Unit) {
+	val locale = LocalConfiguration.current.locales[0]
+	val displayMode = if (state.variant == "input") DisplayMode.Input else DisplayMode.Picker
+	val fallbackDate = remember { Date().time }
+	val initialDate = state.initialDate ?: fallbackDate
+	val selectableDates = rememberSelectableDates(state.selectableDates)
+	val yearRange = rememberDatePickerYearRange(state.selectableDates, initialDate)
+
+	val pickerState = remember(displayMode, initialDate, selectableDates, yearRange) {
+		DatePickerState(
+			initialDisplayMode = displayMode,
+			locale = locale,
+			initialSelectedDateMillis = state.initialDate,
+			initialDisplayedMonthMillis = initialDate,
+			yearRange = yearRange,
+			selectableDates = selectableDates,
+		)
+	}
+
+	LaunchedEffect(pickerState.selectedDateMillis) {
+		onDateSelected(pickerState.selectedDateMillis)
+	}
+
+	val colors = buildDatePickerColors(state.elementColors, state.color)
+
+	// Material3's year-selector chevron tints from the ambient
+	// LocalContentColor (which defaults to black), not
+	// `navigationContentColor`; bind the local so the chevron honors the
+	// navigation color.
+	CompositionLocalProvider(LocalContentColor provides colors.navigationContentColor) {
+		DatePicker(
+			modifier = modifier,
+			state = pickerState,
+			showModeToggle = state.showVariantToggle,
+			colors = colors,
+		)
+	}
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun ExpoTimePicker(modifier: Modifier = Modifier, state: DatePickerUiState, onDateSelected: (Long?) -> Unit) {
+	val initialDate = state.initialDate
+
+	val pickerState = remember(initialDate, state.is24Hour) {
+		val cal = Calendar.getInstance()
+		cal.isLenient = false
+		if (initialDate != null) {
+			cal.timeInMillis = initialDate
+		}
+		TimePickerState(
+			initialHour = cal.get(Calendar.HOUR_OF_DAY),
+			initialMinute = cal.get(Calendar.MINUTE),
+			is24Hour = state.is24Hour,
+		)
+	}
+
+	LaunchedEffect(pickerState.hour, pickerState.minute) {
+		val cal = Calendar.getInstance()
+		cal.isLenient = false
+		if (initialDate != null) {
+			cal.timeInMillis = initialDate
+		}
+		cal.set(Calendar.HOUR_OF_DAY, pickerState.hour)
+		cal.set(Calendar.MINUTE, pickerState.minute)
+		onDateSelected(cal.time.time)
+	}
+
+	TimePicker(
+		modifier = modifier,
+		state = pickerState,
+		layoutType = TimePickerLayoutType.Vertical,
+		colors = buildTimePickerColors(state.elementColors, state.color),
+	)
+}
+
+class XplatDatePickerProvider {
+	private var state by mutableStateOf(DatePickerUiState())
+	var onEvent: ((Any) -> Unit)? = null
+
+	fun generateComposeView(view: ComposeView) {
+		view.setContent {
+			MaterialTheme {
+				if (state.displayedComponents == "hourAndMinute") {
+					ExpoTimePicker(state = state) { millis ->
+						onEvent?.invoke(JSONObject().put("date", millis ?: JSONObject.NULL))
+					}
+				} else {
+					ExpoDatePicker(state = state) { millis ->
+						onEvent?.invoke(
+							JSONObject().put(
+								"date",
+								millis?.let { toLocalDayMillis(it) } ?: JSONObject.NULL,
+							),
+						)
+					}
+				}
+			}
+		}
+	}
+
+	fun updateData(input: Map<Any, Any>) {
+		val data = input["data"] as? Map<*, *> ?: input
+		val range = data["selectableDates"] as? Map<*, *>
+		state = DatePickerUiState(
+			initialDate = data["initialDate"].asLong(),
+			variant = data["variant"] as? String ?: "picker",
+			displayedComponents = data["displayedComponents"] as? String ?: "date",
+			showVariantToggle = data["showVariantToggle"]?.asBoolean() ?: true,
+			is24Hour = data["is24Hour"]?.asBoolean() ?: true,
+			color = data["color"].asColor(),
+			elementColors = data["elementColors"] as? Map<*, *> ?: emptyMap<Any?, Any?>(),
+			selectableDates = SelectableRange(
+				start = range?.get("start").asLong(),
+				end = range?.get("end").asLong(),
+			),
+		)
+	}
+}

package/platforms/ios/src/XplatDatePickerProvider.swift

@@ -0,0 +1,144 @@
+// Adapted from @expo/ui (MIT) — Copyright 2025-present 650 Industries.
+// Upstream: expo/packages/expo-ui/ios/DatePickerView.swift (sdk-57).
+// The ExpoModules glue (@Field props record, EventDispatcher, Children label
+// slot) is replaced by the @nativescript/swift-ui provider contract:
+// updateData(NSDictionary) + onEvent. Children-as-label is not ported; the
+// title string prop covers the label slot.
+
+import SwiftUI
+
+private final class DatePickerModel: ObservableObject {
+	@Published var title: String? = nil
+	@Published var selection: Date? = nil
+	@Published var rangeStart: Date? = nil
+	@Published var rangeEnd: Date? = nil
+	@Published var displayedComponents: DatePicker.Components = [.date]
+	@Published var pickerStyle: String = "automatic"
+	@Published var disabled = false
+	var onDateChange: ((Date) -> Void)?
+}
+
+private struct DatePickerContent: View {
+	@ObservedObject var model: DatePickerModel
+	@State private var date = Date()
+
+	// `.graphical` has an AutoLayout bug (it uses UICalendarView under the
+	// hood): it shrinks height when the user taps a date.
+	// https://github.com/expo/expo/issues/47062
+	// Fixed min width of 320 while the style is graphical.
+	private var isGraphicalStyle: Bool {
+		model.pickerStyle == "graphical"
+	}
+
+	var body: some View {
+		styledPicker()
+			.disabled(model.disabled)
+			.frame(minWidth: isGraphicalStyle ? 320 : nil)
+			.onChange(of: date) { newDate in
+				if model.selection == newDate { return }
+				model.onDateChange?(newDate)
+			}
+			.onChange(of: model.selection) { newValue in
+				date = newValue ?? Date()
+			}
+			.onAppear {
+				date = model.selection ?? Date()
+			}
+	}
+
+	@ViewBuilder
+	private func styledPicker() -> some View {
+		switch model.pickerStyle {
+		case "compact":
+			createDatePicker().datePickerStyle(.compact)
+		case "graphical":
+			createDatePicker().datePickerStyle(.graphical)
+		case "wheel":
+			createDatePicker().datePickerStyle(.wheel)
+		default:
+			createDatePicker().datePickerStyle(.automatic)
+		}
+	}
+
+	@ViewBuilder
+	private func createDatePicker() -> some View {
+		let components = model.displayedComponents
+		let start = model.rangeStart
+		let end = model.rangeEnd
+		let title = model.title ?? ""
+
+		let picker = Group {
+			if let start, let end {
+				DatePicker(title, selection: $date, in: start...end, displayedComponents: components)
+			} else if let start {
+				DatePicker(title, selection: $date, in: start..., displayedComponents: components)
+			} else if let end {
+				DatePicker(title, selection: $date, in: ...end, displayedComponents: components)
+			} else {
+				DatePicker(title, selection: $date, displayedComponents: components)
+			}
+		}
+
+		if model.title == nil {
+			picker.labelsHidden()
+		} else {
+			picker
+		}
+	}
+}
+
+@objc(XplatDatePickerProvider)
+public final class XplatDatePickerProvider: UIViewController, SwiftUIProvider {
+	private let model = DatePickerModel()
+
+	public required init() {
+		super.init(nibName: nil, bundle: nil)
+		model.onDateChange = { [weak self] date in
+			self?.onEvent?(["date": date.timeIntervalSince1970 * 1000])
+		}
+	}
+
+	public required init?(coder: NSCoder) {
+		super.init(coder: coder)
+		model.onDateChange = { [weak self] date in
+			self?.onEvent?(["date": date.timeIntervalSince1970 * 1000])
+		}
+	}
+
+	public override func viewDidLoad() {
+		super.viewDidLoad()
+		setupSwiftUIView(content: DatePickerContent(model: model))
+	}
+
+	private static func millisToDate(_ value: Any?) -> Date? {
+		guard let millis = value as? NSNumber else { return nil }
+		return Date(timeIntervalSince1970: millis.doubleValue / 1000)
+	}
+
+	public func updateData(data: NSDictionary) {
+		if let title = data["title"] as? String {
+			model.title = title.isEmpty ? nil : title
+		}
+		if let selection = data["selection"] as? NSNumber {
+			model.selection = Date(timeIntervalSince1970: selection.doubleValue / 1000)
+		}
+		if let range = data["range"] as? [String: Any] {
+			model.rangeStart = Self.millisToDate(range["start"])
+			model.rangeEnd = Self.millisToDate(range["end"])
+		}
+		if let components = data["displayedComponents"] as? [String] {
+			var mapped: DatePicker.Components = []
+			if components.contains("date") { mapped.insert(.date) }
+			if components.contains("hourAndMinute") { mapped.insert(.hourAndMinute) }
+			if !mapped.isEmpty { model.displayedComponents = mapped }
+		}
+		if let pickerStyle = data["pickerStyle"] as? String {
+			model.pickerStyle = pickerStyle
+		}
+		if let disabled = data["disabled"] as? NSNumber {
+			model.disabled = disabled.boolValue
+		}
+	}
+
+	public var onEvent: ((NSDictionary) -> Void)?
+}

package/src/AppKitDatePicker.macos.tsrx

@@ -0,0 +1,56 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useEffect, useRef } from 'octane'
+import type { AppKitDatePickerProps } from './macos/types'
+
+const host = (): any => (globalThis as any).__xplatAppKit ?? {}
+
+/** Embeds a real NSDatePicker in the leaf's backing view via the
+ *  `__xplatAppKit` bridge. 'date' uses a text field (or the inline
+ *  graphical calendar when `pickerStyle` is 'graphical'); 'time' uses the
+ *  clock-and-calendar field; 'dateAndTime' shows both element groups.
+ *  The host element carries an explicit size — the picker is pinned to
+ *  its edges. */
+export function AppKitDatePicker(props: AppKitDatePickerProps) @{
+	const anchor = useRef<any>(null)
+	const handle = useRef<any>(null)
+
+	const options = () => ({
+		mode: props.components === 'time' ? 'time' : 'date',
+		style: props.pickerStyle,
+		selectionMillis: (props.selection ?? props.defaultSelection)?.getTime?.(),
+		minimumMillis: props.minimumDate?.getTime?.(),
+		maximumMillis: props.maximumDate?.getTime?.(),
+		enabled: !props.disabled,
+	})
+
+	useEffect(() => {
+		const view = anchor.current
+		const attach = host().attachDatePicker
+		if (!view || typeof attach !== 'function') return
+		handle.current = attach(view, options(), (millis: number) => {
+			props.onSelectionChange?.(new Date(millis))
+		})
+
+		return () => {
+			handle.current?.detach()
+			handle.current = null
+		}
+	}, [props.components, props.pickerStyle])
+
+	// Push controlled selection/range updates into the mounted picker; the
+	// bridge update is echo-suppressed by comparing against dateValue.
+	useEffect(() => {
+		handle.current?.update(options())
+	})
+
+	<flexboxlayout
+		ref={(v: any) => { anchor.current = v }}
+		id={props.id}
+		className={props.className}
+		style={{
+			minWidth: 240,
+			minHeight: props.pickerStyle === 'graphical' ? 300 : 26,
+			...props.style,
+		}}
+	/>;
+}

package/src/DateInput.web.tsrx

@@ -0,0 +1,30 @@
+/** @jsxImportSource octane */
+import { useState } from 'octane'
+import type { DateInputProps } from './web/types'
+
+/** Renders a labeled browser date/time input. */
+export function DateInput(props: DateInputProps) @{
+	const controlled = props.value !== undefined
+	const [internalValue, setInternalValue] = useState(props.defaultValue ?? '')
+	const value = controlled ? props.value! : internalValue
+	const labelId = props.id ? `${props.id}-label` : undefined
+
+	<label className={props.className} style={props.style}>
+		<span id={labelId}>{props.label}</span>
+		<input
+			id={props.id}
+			type={props.type ?? 'date'}
+			aria-label={props.accessibilityLabel ?? props.label}
+			aria-labelledby={labelId}
+			value={value}
+			min={props.min}
+			max={props.max}
+			disabled={props.disabled}
+			onChange={(event: any) => {
+				const nextValue = event.target.value as string
+				if (!controlled) setInternalValue(nextValue)
+				props.onChange?.(nextValue)
+			}}
+		/>
+	</label>
+}

package/src/MaterialDatePicker.android.tsrx

@@ -0,0 +1,49 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { registerElement } from '@nativescript-community/octane'
+import type { Attributes } from '@nativescript-community/octane/intrinsics'
+import { ComposeDataDriver, JetpackCompose, registerJetpackCompose } from '@nativescript/jetpack-compose'
+import type { MaterialDatePickerProps } from './android/types'
+
+declare const com: any
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		xplatandroiddatepicker: Attributes<typeof JetpackCompose>
+	}
+}
+
+registerElement('xplatandroiddatepicker', JetpackCompose)
+registerJetpackCompose('xplat-material-datepicker', (owner: any) =>
+	new ComposeDataDriver(new com.octanexplat.datepicker.XplatDatePickerProvider(), owner),
+)
+
+/** Renders a Material 3 DatePicker/TimePicker through the NativeScript Jetpack Compose bridge. */
+export function MaterialDatePicker(props: MaterialDatePickerProps) @{
+	const data = {
+		initialDate: props.initialDate?.getTime() ?? null,
+		variant: props.variant ?? 'picker',
+		displayedComponents: props.displayedComponents ?? 'date',
+		// The bridge's dataSerialize throws on booleans; send numbers.
+		showVariantToggle: (props.showVariantToggle ?? true) ? 1 : 0,
+		is24Hour: (props.is24Hour ?? true) ? 1 : 0,
+		color: props.color,
+		elementColors: props.elementColors,
+		selectableDates: {
+			start: props.selectableDates?.start?.getTime() ?? null,
+			end: props.selectableDates?.end?.getTime() ?? null,
+		},
+	}
+
+	<xplatandroiddatepicker
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+		composeId="xplat-material-datepicker"
+		data={data}
+		onComposeEvent={(event: any) => {
+			const millis = event.data?.date
+			props.onDateSelected?.(typeof millis === 'number' ? new Date(millis) : null)
+		}}
+	/>;
+}

package/src/SwiftUIDatePicker.ios.tsrx

@@ -0,0 +1,51 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { registerElement } from '@nativescript-community/octane'
+import type { Attributes } from '@nativescript-community/octane/intrinsics'
+import { SwiftUI, UIDataDriver, registerSwiftUI } from '@nativescript/swift-ui'
+import { useState } from 'octane'
+import type { SwiftUIDatePickerProps } from './ios/types'
+
+declare const XplatDatePickerProvider: any
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		xplatiosdatepicker: Attributes<typeof SwiftUI>
+	}
+}
+
+registerElement('xplatiosdatepicker', SwiftUI)
+registerSwiftUI('xplat-swiftui-datepicker', (owner: any) =>
+	new UIDataDriver(new XplatDatePickerProvider(), owner),
+)
+
+/** Renders a SwiftUI DatePicker through NativeScript's SwiftUI bridge. */
+export function SwiftUIDatePicker(props: SwiftUIDatePickerProps) @{
+	const controlled = props.selection !== undefined
+	const [internalSelection, setInternalSelection] = useState<Date | undefined>(props.defaultSelection)
+	const selection = controlled ? props.selection! : internalSelection
+
+	<xplatiosdatepicker
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		swiftId="xplat-swiftui-datepicker"
+		data={{
+			title: props.title,
+			selection: selection?.getTime(),
+			range: {
+				start: props.minimumDate?.getTime(),
+				end: props.maximumDate?.getTime(),
+			},
+			displayedComponents: props.displayedComponents ?? ['date'],
+			pickerStyle: props.pickerStyle ?? 'automatic',
+			disabled: props.disabled ?? false,
+		}}
+		onSwiftUIEvent={(event: any) => {
+			const millis = event.data?.date
+			if (typeof millis !== 'number') return
+			const next = new Date(millis)
+			if (!controlled) setInternalSelection(next)
+			props.onSelectionChange?.(next)
+		}}
+	/>;
+}

package/src/android/index.ts

@@ -0,0 +1,7 @@
+export { MaterialDatePicker } from '../MaterialDatePicker.android.tsrx'
+export type {
+	MaterialDatePickerComponents,
+	MaterialDatePickerElementColors,
+	MaterialDatePickerProps,
+	MaterialDatePickerVariant,
+} from './types'