@octane-xplat/date-picker 0.0.0-stage → 0.9.0

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'

package/src/android/types.ts

@@ -0,0 +1,80 @@
+export type MaterialDatePickerVariant = 'picker' | 'input'
+
+export type MaterialDatePickerComponents = 'date' | 'hourAndMinute' | 'dateAndTime'
+
+/**
+ * Color overrides for the Material 3 picker elements. Every field is a CSS
+ * hex string (`#rgb`, `#rrggbb`, or `#aarrggbb`); unset fields use the
+ * Material 3 theme defaults.
+ */
+export interface MaterialDatePickerElementColors {
+	containerColor?: string
+	titleContentColor?: string
+	headlineContentColor?: string
+	weekdayContentColor?: string
+	subheadContentColor?: string
+	navigationContentColor?: string
+	yearContentColor?: string
+	disabledYearContentColor?: string
+	currentYearContentColor?: string
+	selectedYearContentColor?: string
+	disabledSelectedYearContentColor?: string
+	selectedYearContainerColor?: string
+	disabledSelectedYearContainerColor?: string
+	dayContentColor?: string
+	disabledDayContentColor?: string
+	selectedDayContentColor?: string
+	disabledSelectedDayContentColor?: string
+	selectedDayContainerColor?: string
+	disabledSelectedDayContainerColor?: string
+	todayContentColor?: string
+	todayDateBorderColor?: string
+	dayInSelectionRangeContentColor?: string
+	dayInSelectionRangeContainerColor?: string
+	dividerColor?: string
+	clockDialColor?: string
+	clockDialSelectedContentColor?: string
+	clockDialUnselectedContentColor?: string
+	selectorColor?: string
+	periodSelectorBorderColor?: string
+	periodSelectorSelectedContainerColor?: string
+	periodSelectorUnselectedContainerColor?: string
+	periodSelectorSelectedContentColor?: string
+	periodSelectorUnselectedContentColor?: string
+	timeSelectorSelectedContainerColor?: string
+	timeSelectorUnselectedContainerColor?: string
+	timeSelectorSelectedContentColor?: string
+	timeSelectorUnselectedContentColor?: string
+}
+
+export interface MaterialDatePickerProps {
+	id?: string
+	className?: any
+	style?: any
+	/** Date the picker starts on. The picker keeps its own selection after mount. */
+	initialDate?: Date
+	/** Calendar grid or text-field input. @default 'picker' */
+	variant?: MaterialDatePickerVariant
+	/**
+	 * `'date'` renders the M3 DatePicker, `'hourAndMinute'` the M3 TimePicker.
+	 * `'dateAndTime'` renders the date picker (combined input is not supported).
+	 * @default 'date'
+	 */
+	displayedComponents?: MaterialDatePickerComponents
+	/** Show the picker/input mode toggle. @default true */
+	showVariantToggle?: boolean
+	/** 24-hour dial for the time picker. @default true */
+	is24Hour?: boolean
+	/** Accent applied to a subset of elements when `elementColors` is unset. */
+	color?: string
+	elementColors?: MaterialDatePickerElementColors
+	/** Bounds the selectable date range; also derives the calendar year range. */
+	selectableDates?: { start?: Date; end?: Date }
+	accessibilityLabel?: string
+	/**
+	 * Called with the selected timestamp (null when the selection clears). The
+	 * DatePicker emits the chosen UTC day; the TimePicker emits the chosen
+	 * hour/minute on the initial date's day.
+	 */
+	onDateSelected?: (date: Date | null) => void
+}

package/src/ios/index.ts

@@ -0,0 +1,6 @@
+export { SwiftUIDatePicker } from '../SwiftUIDatePicker.ios.tsrx'
+export type {
+	SwiftUIDatePickerComponent,
+	SwiftUIDatePickerProps,
+	SwiftUIDatePickerStyle,
+} from './types'

package/src/ios/types.ts

@@ -0,0 +1,26 @@
+export type SwiftUIDatePickerStyle = 'automatic' | 'compact' | 'graphical' | 'wheel'
+
+export type SwiftUIDatePickerComponent = 'date' | 'hourAndMinute'
+
+export interface SwiftUIDatePickerProps {
+	id?: string
+	className?: any
+	style?: any
+	/** Label shown next to the picker. When omitted, the label is hidden. */
+	title?: string
+	/** Controlled selection. Pair with `onSelectionChange`. */
+	selection?: Date
+	/** Initial selection when `selection` is not provided. */
+	defaultSelection?: Date
+	/** Earliest selectable date. */
+	minimumDate?: Date
+	/** Latest selectable date. */
+	maximumDate?: Date
+	/** Which components the picker displays. @default ['date'] */
+	displayedComponents?: readonly SwiftUIDatePickerComponent[]
+	/** SwiftUI presentation style. `graphical` renders an inline calendar. @default 'automatic' */
+	pickerStyle?: SwiftUIDatePickerStyle
+	disabled?: boolean
+	accessibilityLabel?: string
+	onSelectionChange?: (date: Date) => void
+}

package/src/macos/index.ts

@@ -0,0 +1,6 @@
+export { AppKitDatePicker } from '../AppKitDatePicker.macos.tsrx'
+export type {
+	AppKitDatePickerComponents,
+	AppKitDatePickerProps,
+	AppKitDatePickerStyle,
+} from './types'

package/src/macos/types.ts

@@ -0,0 +1,24 @@
+export type AppKitDatePickerComponents = 'date' | 'time' | 'dateAndTime'
+
+export type AppKitDatePickerStyle = 'textField' | 'graphical'
+
+export interface AppKitDatePickerProps {
+	id?: string
+	className?: any
+	style?: any
+	/** Which element groups the NSDatePicker shows. @default 'date' */
+	components?: AppKitDatePickerComponents
+	/** 'graphical' embeds the inline calendar (date mode only). @default 'textField' */
+	pickerStyle?: AppKitDatePickerStyle
+	/** Controlled selection. Pair with `onSelectionChange`. */
+	selection?: Date
+	/** Initial selection when `selection` is not provided. */
+	defaultSelection?: Date
+	/** Earliest selectable date. */
+	minimumDate?: Date
+	/** Latest selectable date. */
+	maximumDate?: Date
+	disabled?: boolean
+	accessibilityLabel?: string
+	onSelectionChange?: (date: Date) => void
+}

package/src/web/index.ts

@@ -0,0 +1,2 @@
+export { DateInput } from '../DateInput.web.tsrx'
+export type { DateInputProps, DateInputType } from './types'

package/src/web/types.ts

@@ -0,0 +1,20 @@
+export type DateInputType = 'date' | 'time' | 'datetime-local'
+
+export interface DateInputProps {
+	id?: string
+	className?: any
+	style?: any
+	label?: string
+	/** The `<input>` type. @default 'date' */
+	type?: DateInputType
+	/** Controlled value: `YYYY-MM-DD`, `HH:MM`, or `YYYY-MM-DDTHH:MM`. */
+	value?: string
+	defaultValue?: string
+	/** Earliest allowed value, in the same format as `value`. */
+	min?: string
+	/** Latest allowed value, in the same format as `value`. */
+	max?: string
+	disabled?: boolean
+	accessibilityLabel?: string
+	onChange?: (value: string) => void
+}

package/types/android/index.d.ts

@@ -0,0 +1,61 @@
+export type MaterialDatePickerVariant = 'picker' | 'input'
+
+export type MaterialDatePickerComponents = 'date' | 'hourAndMinute' | 'dateAndTime'
+
+export interface MaterialDatePickerElementColors {
+	containerColor?: string
+	titleContentColor?: string
+	headlineContentColor?: string
+	weekdayContentColor?: string
+	subheadContentColor?: string
+	navigationContentColor?: string
+	yearContentColor?: string
+	disabledYearContentColor?: string
+	currentYearContentColor?: string
+	selectedYearContentColor?: string
+	disabledSelectedYearContentColor?: string
+	selectedYearContainerColor?: string
+	disabledSelectedYearContainerColor?: string
+	dayContentColor?: string
+	disabledDayContentColor?: string
+	selectedDayContentColor?: string
+	disabledSelectedDayContentColor?: string
+	selectedDayContainerColor?: string
+	disabledSelectedDayContainerColor?: string
+	todayContentColor?: string
+	todayDateBorderColor?: string
+	dayInSelectionRangeContentColor?: string
+	dayInSelectionRangeContainerColor?: string
+	dividerColor?: string
+	clockDialColor?: string
+	clockDialSelectedContentColor?: string
+	clockDialUnselectedContentColor?: string
+	selectorColor?: string
+	periodSelectorBorderColor?: string
+	periodSelectorSelectedContainerColor?: string
+	periodSelectorUnselectedContainerColor?: string
+	periodSelectorSelectedContentColor?: string
+	periodSelectorUnselectedContentColor?: string
+	timeSelectorSelectedContainerColor?: string
+	timeSelectorUnselectedContainerColor?: string
+	timeSelectorSelectedContentColor?: string
+	timeSelectorUnselectedContentColor?: string
+}
+
+export interface MaterialDatePickerProps {
+	id?: string
+	className?: any
+	style?: any
+	initialDate?: Date
+	variant?: MaterialDatePickerVariant
+	displayedComponents?: MaterialDatePickerComponents
+	showVariantToggle?: boolean
+	is24Hour?: boolean
+	color?: string
+	elementColors?: MaterialDatePickerElementColors
+	selectableDates?: { start?: Date; end?: Date }
+	accessibilityLabel?: string
+	onDateSelected?: (date: Date | null) => void
+}
+
+export declare function MaterialDatePicker(props: MaterialDatePickerProps): unknown

package/types/ios/index.d.ts

@@ -0,0 +1,21 @@
+export type SwiftUIDatePickerStyle = 'automatic' | 'compact' | 'graphical' | 'wheel'
+
+export type SwiftUIDatePickerComponent = 'date' | 'hourAndMinute'
+
+export interface SwiftUIDatePickerProps {
+	id?: string
+	className?: any
+	style?: any
+	title?: string
+	selection?: Date
+	defaultSelection?: Date
+	minimumDate?: Date
+	maximumDate?: Date
+	displayedComponents?: readonly SwiftUIDatePickerComponent[]
+	pickerStyle?: SwiftUIDatePickerStyle
+	disabled?: boolean
+	accessibilityLabel?: string
+	onSelectionChange?: (date: Date) => void
+}
+
+export declare function SwiftUIDatePicker(props: SwiftUIDatePickerProps): unknown

package/types/macos/index.d.ts

@@ -0,0 +1,20 @@
+export type AppKitDatePickerComponents = 'date' | 'time' | 'dateAndTime'
+
+export type AppKitDatePickerStyle = 'textField' | 'graphical'
+
+export interface AppKitDatePickerProps {
+	id?: string
+	className?: any
+	style?: any
+	components?: AppKitDatePickerComponents
+	pickerStyle?: AppKitDatePickerStyle
+	selection?: Date
+	defaultSelection?: Date
+	minimumDate?: Date
+	maximumDate?: Date
+	disabled?: boolean
+	accessibilityLabel?: string
+	onSelectionChange?: (date: Date) => void
+}
+
+export declare function AppKitDatePicker(props: AppKitDatePickerProps): unknown

package/types/web/index.d.ts

@@ -0,0 +1,18 @@
+export type DateInputType = 'date' | 'time' | 'datetime-local'
+
+export interface DateInputProps {
+	id?: string
+	className?: any
+	style?: any
+	label?: string
+	type?: DateInputType
+	value?: string
+	defaultValue?: string
+	min?: string
+	max?: string
+	disabled?: boolean
+	accessibilityLabel?: string
+	onChange?: (value: string) => void
+}
+
+export declare function DateInput(props: DateInputProps): unknown