@startupjs-ui/date-time-picker 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/date-time-picker
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **date-time-picker:** refactor DateTimePicker component. TODO: fix moment.tz.guess() by loading timezone data correctly. ([ae39c14](https://github.com/startupjs/startupjs-ui/commit/ae39c1450ce6d57e6323c4777318de1e57667041))

package/README.mdx

@@ -0,0 +1,86 @@
+import { useState } from 'react'
+import { $ } from 'startupjs'
+import DateTimePicker, { _PropsJsonSchema as DateTimePickerPropsJsonSchema } from './index'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# DateTimePicker
+
+DateTimePicker allows to display and change the date and time.
+
+```jsx
+import { DateTimePicker } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const [date, setDate] = useState(+new Date())
+
+return (
+  <DateTimePicker
+    date={date}
+    onChangeDate={setDate}
+  />
+)
+```
+
+## Managing visibility
+
+There are three options for managing visiblity of a `DateTimePicker`:
+
+1. By passing the scoped model to the `$visible` property from the state of which visibility is controlled.
+
+```jsx example
+const $visible = $()
+const [date, setDate] = useState()
+
+return (
+  <DateTimePicker
+    date={date}
+    $visible={$visible}
+    onChangeDate={setDate}
+  />
+)
+```
+
+2. By passing the `visible`, `onRequestOpen` and `onRequestClose` properties that determines whether `DateTimePicker` is visible.
+
+```jsx example
+const $visible = $()
+const [date, setDate] = useState()
+const visible = $visible.get()
+
+return (
+  <DateTimePicker
+    date={date}
+    visible={visible}
+    onChangeDate={setDate}
+    onRequestOpen={() => $visible.set(true)}
+    onRequestClose={() => $visible.del()}
+  />
+)
+```
+
+3. Uncontrolled.
+
+```jsx example
+const [date, setDate] = useState()
+
+return (
+  <DateTimePicker
+    date={date}
+    onChangeDate={setDate}
+  />
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={DateTimePicker}
+  propsJsonSchema={DateTimePickerPropsJsonSchema}
+  props={{
+    date: +new Date()
+  }}
+  block
+/>

package/components/Calendar/Days/index.cssx.styl

@@ -0,0 +1,47 @@
+.shortName
+  color var(--color-text-description)
+  font(caption)
+
+.label
+  font(caption)
+
+  &.isMute
+    color var(--color-text-description)
+
+  &.isActive
+    color var(--color-text-on-primary)
+
+.cell
+  justify-content center
+  align-items center
+  width 4u
+  height 4u
+  margin .5u
+  radius(circle)
+  &:part(hover)
+    background-color var(--color-bg-primary-transparent)
+
+  &.isActive
+    background-color var(--color-bg-primary)
+    &:part(hover)
+      background-color var(--color-bg-primary-subtle)
+
+  &.isActiveRangeStart
+    border-top-right-radius 0
+    border-bottom-right-radius 0
+    background-color var(--color-bg-primary)
+
+  &.isActiveRangeEnd
+    border-top-left-radius 0
+    border-bottom-left-radius 0
+    background-color var(--color-bg-primary)
+
+  &.isActiveRange
+    border-radius 0
+    background-color var(--color-bg-primary-subtle)
+
+.row
+  justify-content center
+
+  +from($UI.media.tablet)
+    justify-content flex-start

package/components/Calendar/Days/index.tsx

@@ -0,0 +1,133 @@
+import { useMemo, useCallback, type ReactNode } from 'react'
+import { pug, observer } from 'startupjs'
+import Span from '@startupjs-ui/span'
+import Div from '@startupjs-ui/div'
+import moment from 'moment-timezone'
+import './index.cssx.styl'
+
+interface DaysProps {
+  date: Date
+  uiDate: number
+  exactLocale: string
+  timezone: string
+  disabledDays: number[]
+  maxDate?: number
+  minDate?: number
+  range?: [number, number]
+  onChangeDate?: (value: number) => void
+}
+
+function Days ({
+  date,
+  uiDate,
+  exactLocale,
+  timezone,
+  disabledDays,
+  maxDate,
+  minDate,
+  range,
+  onChangeDate
+}: DaysProps): ReactNode {
+  const weekdaysShort = useMemo(() => {
+    const data = (moment
+      .tz(uiDate, timezone)
+      .locale(exactLocale) as any)
+      ._locale
+      ._weekdaysShort
+
+    return data.map((day: string) => day.toUpperCase())
+  }, [uiDate, timezone, exactLocale])
+
+  const matrixMonthDays = useMemo(() => {
+    const data = []
+
+    const nowDate = moment.tz(timezone)
+
+    const currentDay = moment
+      .tz(uiDate, timezone)
+      .startOf('M')
+      .startOf('w')
+      .hours(nowDate.hours())
+      .minutes(nowDate.minutes())
+      .seconds(nowDate.seconds())
+      .milliseconds(nowDate.milliseconds())
+
+    for (let weekIndex = 0; weekIndex < 6; weekIndex++) {
+      const weekLine = []
+      for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
+        weekLine.push({
+          label: currentDay.format('DD'),
+          month: currentDay.month(),
+          day: currentDay.date(),
+          value: +currentDay,
+          testID: `${currentDay.format('MM')}-` +
+            `${currentDay.format('DD')}-${currentDay.format('YYYY')}`
+        })
+        currentDay.add(1, 'd')
+      }
+      data.push(weekLine)
+    }
+
+    return data
+  }, [uiDate, timezone])
+
+  function _onChangeDay (item: any) {
+    const timestamp = +moment
+      .tz(uiDate, timezone)
+      .date(item.day)
+      .month(item.month)
+
+    onChangeDate && onChangeDate(timestamp)
+  }
+
+  const isDisableDay = useCallback((value: number) => {
+    const isDisabledDay = disabledDays.some(item => moment.tz(item, timezone).isSame(value, 'd'))
+    const isBeforeMinDate = minDate != null
+      ? moment.tz(minDate, timezone).isAfter(value, 'd')
+      : false
+    const isAfterMaxDate = maxDate != null
+      ? moment.tz(maxDate, timezone).isBefore(value, 'd')
+      : false
+
+    return isDisabledDay || isBeforeMinDate || isAfterMaxDate
+  }, [disabledDays, maxDate, minDate, timezone])
+
+  function getLabelActive (value: number) {
+    return range
+      ? moment.tz(value, timezone).isSame(range[0], 'd') ||
+      moment.tz(value, timezone).isSame(range[1], 'd')
+      : moment.tz(value, timezone).isSame(date, 'd')
+  }
+
+  return pug`
+    Div.row(row)
+      for shortDayName in weekdaysShort
+        Div.cell(key=shortDayName)
+          Span.shortName(bold)= shortDayName
+
+    for week, weekIndex in matrixMonthDays
+      Div.row(key='week-' + weekIndex row)
+        for day, dayIndex in matrixMonthDays[weekIndex]
+          Div.cell(
+            key=weekIndex + '-' + dayIndex
+            styleName={
+              isActive: !range && moment.tz(day.value, timezone).isSame(date, 'd'),
+              isActiveRangeStart: range && moment.tz(day.value, timezone).isSame(range[0], 'd'),
+              isActiveRange: range && moment.tz(day.value, timezone).isBetween(range[0], range[1], 'd'),
+              isActiveRangeEnd: range && moment.tz(day.value, timezone).isSame(range[1], 'd')
+            }
+            disabled=isDisableDay(day.value)
+            testID=day.testID
+            onPress=() => _onChangeDay(day)
+          )
+            Span.label(
+              bold=getLabelActive(day.value)
+              styleName={
+                isMute: !moment.tz(day.value, timezone).isSame(uiDate, 'M'),
+                isActive: getLabelActive(day.value)
+              }
+            )= day.label
+  `
+}
+
+export default observer(Days)

package/components/Calendar/Header/index.cssx.styl

@@ -0,0 +1,40 @@
+.header
+  align-items center
+  justify-content center
+  margin 0 0 .5u 1u
+
+  +from($UI.media.tablet)
+    justify-content space-between
+
+.month
+  font(h5)
+
+.yearText
+  color var(--color-text-primary)
+  font(h5)
+
+.actions
+  justify-content flex-end
+  margin-left 2u
+
+  +from($UI.media.tablet)
+    margin-left 0
+
+.button, .years
+  margin-left .5u
+
+.years
+  &-popover
+    padding 0
+    max-height 27u
+
+  &-item
+    height 4.5u
+    align-items center
+    justify-content center
+    padding-right 2u
+    padding-left @padding-right
+
+.year
+  font(h5)
+

package/components/Calendar/Header/index.tsx

@@ -0,0 +1,159 @@
+import { useCallback, useMemo, type ReactNode } from 'react'
+import { pug, observer, $ } from 'startupjs'
+import Button from '@startupjs-ui/button'
+import Div from '@startupjs-ui/div'
+import FlatList from '@startupjs-ui/flat-list'
+import Icon from '@startupjs-ui/icon'
+import Popover from '@startupjs-ui/popover'
+import Span from '@startupjs-ui/span'
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft'
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight'
+import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown'
+import moment from 'moment-timezone'
+import STYLES from './index.cssx.styl'
+
+const yearsItemStyle = STYLES['years-item']
+const YEAR_ITEM_HEIGHT = yearsItemStyle.height
+
+interface HeaderProps {
+  uiDate: number
+  exactLocale: string
+  timezone: string
+  minDate?: number
+  maxDate?: number
+  $uiDate: any
+}
+
+function Header ({
+  uiDate,
+  exactLocale,
+  timezone,
+  minDate,
+  maxDate,
+  $uiDate
+}: HeaderProps): ReactNode {
+  const monthName = moment.tz(uiDate, timezone).locale(exactLocale).format('MMM')
+
+  const onChangeMonth = useCallback((value: number) => {
+    const ts = +moment($uiDate.get()).add('month', value)
+    $uiDate.set(ts)
+  }, [$uiDate])
+
+  const isPrevDisabled = minDate
+    ? +moment.tz($uiDate.get(), timezone).endOf('month').add('month', -1) < minDate
+    : false
+
+  const isNextDisabled = maxDate
+    ? +moment($uiDate.get()).startOf('month').add('month', 1) > maxDate
+    : false
+
+  return pug`
+    Div.header(row)
+      Div(vAlign='center' row)
+        Span.month(bold)= monthName
+        Years.years(
+          timezone=timezone
+          minDate=minDate
+          maxDate=maxDate
+          $uiDate=$uiDate
+        )
+      Div.actions(row)
+        Button.button(
+          color='text-description'
+          variant='text'
+          disabled=isPrevDisabled
+          icon=faAngleLeft
+          onPress=()=> onChangeMonth(-1)
+        )
+        Button.button(
+          color='text-description'
+          variant='text'
+          disabled=isNextDisabled
+          icon=faAngleRight
+          onPress=()=> onChangeMonth(1)
+        )
+  `
+}
+
+export default observer(Header)
+
+interface YearsProps {
+  style?: any
+  minDate?: number
+  maxDate?: number
+  timezone: string
+  $uiDate: any
+}
+
+const Years = observer(function YearsComponent ({
+  style,
+  minDate,
+  maxDate,
+  timezone,
+  $uiDate
+}: YearsProps): ReactNode {
+  const $visible = $(false)
+  const minYear = minDate ? moment.tz(minDate, timezone).year() : 1950
+  const maxYear = maxDate ? moment.tz(maxDate, timezone).year() : 2050
+  const yearsDiff = maxYear - minYear
+
+  const onChangeYear = useCallback((year: number) => {
+    const ts = +moment($uiDate.get()).year(year)
+    $uiDate.set(ts)
+    $visible.set(false)
+  }, [$uiDate, $visible])
+
+  const years = useMemo(() => {
+    return new Array(yearsDiff + 1).fill(minYear).map((year, index) => {
+      return year + index
+    })
+  }, [yearsDiff, minYear])
+
+  const getItemLayout = useCallback((data: any, index: number) => {
+    return {
+      offset: YEAR_ITEM_HEIGHT * index,
+      length: YEAR_ITEM_HEIGHT,
+      index
+    }
+  }, [])
+
+  if (!yearsDiff) {
+    return pug`
+      Div(style=style)
+        Span.year(bold)= maxYear
+    `
+  }
+
+  function renderYears (): ReactNode {
+    return pug`
+      FlatList(
+        data=years
+        renderItem=renderYear
+        keyExtractor=item => item
+        getItemLayout=getItemLayout
+      )
+    `
+  }
+
+  function renderYear ({ item }: { item: number }): ReactNode {
+    return pug`
+      Div.years-item(
+        variant='higlight'
+        onPress=() => onChangeYear(item)
+      )
+        Span= item
+    `
+  }
+
+  return pug`
+    Div(style=style)
+      Popover(
+        $visible=$visible
+        renderContent=renderYears
+        attachmentStyleName='years-popover'
+      )
+        Div(vAlign='center' row)
+          Span.year(bold)= moment.tz($uiDate.get(), timezone).year()
+          Icon(icon=faCaretDown)
+  `
+})

package/components/Calendar/index.tsx

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react'
+import { pug, observer, $ } from 'startupjs'
+import Div from '@startupjs-ui/div'
+import moment from 'moment-timezone'
+import Header from './Header'
+import Days from './Days'
+
+interface CalendarProps {
+  date: Date
+  disabledDays?: number[]
+  exactLocale: string
+  timezone: string
+  maxDate?: number
+  minDate?: number
+  range?: [number, number]
+  testID?: string
+  onChangeDate?: (value: number) => void
+}
+
+function Calendar ({
+  date,
+  disabledDays = [],
+  exactLocale,
+  timezone,
+  maxDate,
+  minDate,
+  range,
+  testID,
+  onChangeDate
+}: CalendarProps): ReactNode {
+  const $uiDate = $(+moment(date).seconds(0).milliseconds(0))
+
+  return pug`
+    Div(testID=testID)
+      Header(
+        uiDate=$uiDate.get()
+        exactLocale=exactLocale
+        timezone=timezone
+        minDate=minDate
+        maxDate=maxDate
+        $uiDate=$uiDate
+      )
+      Days(
+        date=date
+        uiDate=$uiDate.get()
+        exactLocale=exactLocale
+        timezone=timezone
+        range=range
+        minDate=minDate
+        maxDate=maxDate
+        disabledDays=disabledDays
+        onChangeDate=onChangeDate
+      )
+  `
+}
+
+export default observer(Calendar)

package/components/TimeSelect/index.cssx.styl

@@ -0,0 +1,23 @@
+.cell
+  height 5u
+  width 20u
+  align-items center
+  justify-content center
+  align-self center
+  &:part(hover)
+    background-color var(--color-bg-primary-transparent)
+
+  +from($UI.media.tablet)
+    width 12u
+
+  &.isActive
+    background-color var(--color-bg-primary)
+    &:part(hover)
+      background-color var(--color-bg-primary-subtle)
+
+.label
+  &.isActive
+    color var(--color-text-on-primary)
+
+:export
+  media: $UI.media

package/components/TimeSelect/index.tsx

@@ -0,0 +1,122 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useCallback,
+  useImperativeHandle,
+  type ReactNode,
+  type RefObject
+} from 'react'
+import { pug, observer } from 'startupjs'
+import Div from '@startupjs-ui/div'
+import FlatList from '@startupjs-ui/flat-list'
+import Span from '@startupjs-ui/span'
+import moment from 'moment-timezone'
+import STYLES from './index.cssx.styl'
+
+export interface TimeSelectRef {
+  scrollToIndex: (date?: Date) => void
+}
+
+interface TimeSelectProps {
+  date: Date
+  exactLocale: string
+  timezone: string
+  is24Hour?: boolean
+  minDate?: number
+  maxDate?: number
+  timeInterval: number
+  onChangeDate?: (value: number) => void
+  ref?: RefObject<TimeSelectRef>
+}
+
+// TODO: add displayTimeVariant
+function TimeSelect ({
+  date,
+  exactLocale,
+  timezone,
+  is24Hour,
+  minDate,
+  maxDate,
+  timeInterval,
+  onChangeDate,
+  ref
+}: TimeSelectProps): ReactNode {
+  const refScroll = useRef<any>(null)
+
+  // we are looking for 'a' in current locale
+  // to figure out whether to apply 12 hour format
+  const _is24Hour = useMemo(() => {
+    if (is24Hour != null) return is24Hour
+    const lt = (moment().locale(exactLocale) as any)._locale._longDateFormat.LT
+    return !/a/i.test(lt)
+  }, [is24Hour, exactLocale])
+
+  const preparedData = useMemo(() => {
+    const res: Array<{ label: string, value: number, disabled: boolean }> = []
+
+    let currentTimestamp = +moment.tz(date, timezone).locale(exactLocale).startOf('d')
+    const endTimestamp = +moment.tz(date, timezone).locale(exactLocale).endOf('d')
+    const intervalTimestamp = timeInterval * 60 * 1000
+
+    const format = _is24Hour
+      ? (moment.tz(date, timezone).locale(exactLocale) as any)._locale._longDateFormat.LT
+      : 'hh:mm A'
+
+    while (currentTimestamp < endTimestamp) {
+      res.push({
+        label: moment.tz(currentTimestamp, timezone).locale(exactLocale).format(format),
+        value: currentTimestamp,
+        disabled: (maxDate != null && currentTimestamp > maxDate) ||
+          (minDate != null && currentTimestamp < minDate)
+      })
+      currentTimestamp += intervalTimestamp
+    }
+
+    return res
+  }, [date, exactLocale, timezone, timeInterval, _is24Hour, maxDate, minDate])
+
+  const scrollToIndex = useCallback((_date: Date = date) => {
+    const dateTimestamp = +moment.tz(_date, timezone)
+    const index = preparedData.findIndex(item => dateTimestamp === item.value)
+    if (index === -1) return
+    refScroll.current?.scrollToIndex?.({ index, animated: false })
+  }, [date, timezone, preparedData])
+
+  useImperativeHandle(ref, () => ({ scrollToIndex }), [scrollToIndex])
+  useEffect(() => {
+    scrollToIndex()
+  }, [scrollToIndex])
+
+  function renderItem ({ item }: { item: any }): ReactNode {
+    const isActive = +moment(date) === item.value
+
+    return pug`
+      Div.cell(
+        styleName={ isActive }
+        disabled=item.disabled
+        onPress=()=> onChangeDate && onChangeDate(item.value)
+      )
+        Span.label(styleName={ isActive })
+          = item.label
+    `
+  }
+
+  const length = STYLES.cell.height
+
+  return pug`
+    FlatList(
+      ref=refScroll
+      data=preparedData
+      renderItem=renderItem
+      getItemLayout=(data, index) => ({
+        offset: length * index,
+        length,
+        index
+      })
+      keyExtractor=item=> String(item.value)
+    )
+  `
+}
+
+export default observer(TimeSelect)

package/components/index.ts

@@ -0,0 +1,2 @@
+export { default as Calendar } from './Calendar'
+export { default as TimeSelect } from './TimeSelect'

package/helpers/getLocale.ts

@@ -0,0 +1,15 @@
+import { I18nManager, Platform, Settings } from 'react-native'
+
+export default function getLocale (): string {
+  if (Platform.OS === 'web') {
+    return typeof window !== 'undefined' ? window.navigator.language : 'en'
+  }
+
+  if (Platform.OS === 'ios') {
+    const appleLocale = Settings.get('AppleLocale') as string | undefined
+    const appleLanguages = Settings.get('AppleLanguages') as string[] | undefined
+    return appleLocale ?? appleLanguages?.[0] ?? 'en'
+  }
+
+  return (I18nManager.getConstants() as any).localeIdentifier
+}

package/helpers/index.ts

@@ -0,0 +1 @@
+export { default as getLocale } from './getLocale'

package/index.cssx.styl

@@ -0,0 +1,53 @@
+.content
+  flex-direction column
+  padding 1u
+  flex-shrink 1
+
+  +from($UI.media.tablet)
+    flex-direction row
+    height 42u
+
+.divider
+  align-self center
+  width 60%
+  height 1px
+  margin 1u 0
+
+  +from($UI.media.tablet)
+    height 95%
+    width 1px
+    margin 0 2u
+
+.drawer
+  height 95%
+  border-radius 0
+  padding-top 3u
+
+  +native()
+    height auto
+
+.actions
+  justify-content space-between
+
+.rnPicker
+  margin-top 2u
+
+.swipe
+  height 3u
+
+.popoverWrapper
+.popoverOverlay
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0
+
+  +web()
+    cursor default
+
+.popover
+  background-color var(--color-bg-main-strong)
+  radius()
+  shadow(3)
+

package/index.d.ts

@@ -0,0 +1,72 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode, type RefObject } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type UITextInputProps } from '@startupjs-ui/text-input';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<DateTimePickerProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface DateTimePickerProps extends Omit<UITextInputProps, 'value' | 'onChangeText' | 'ref'> {
+    /** Ref to access underlying input */
+    ref?: RefObject<any>;
+    /** Custom styles applied to the root input */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles for content container */
+    contentStyle?: Record<string, any>;
+    /** Date formatting string from moment */
+    dateFormat?: string;
+    /** Picker display mode @default 'spinner' */
+    display?: 'default' | 'spinner' | 'calendar' | 'clock';
+    /** Minutes step for time selection @default 5 */
+    timeInterval?: number;
+    /** Force 24 hour time format (auto-detected when not provided) */
+    is24Hour?: boolean;
+    /** Input size preset @default 'm' */
+    size?: 'l' | 'm' | 's';
+    /** Picker type @default 'datetime' */
+    mode?: 'date' | 'time' | 'datetime' | 'countdown';
+    /** Custom renderer for input component */
+    renderInput?: (inputProps: Record<string, any> & {
+        onChangeVisible: (value: boolean) => void;
+    }) => ReactNode;
+    /** Locale identifier (falls back to device locale) */
+    locale?: string;
+    /** Selected date range (start/end timestamps) */
+    range?: [number, number];
+    /** IANA timezone name @default moment.tz.guess() */
+    timezone?: string;
+    /** Array of disabled day timestamps */
+    disabledDays?: number[];
+    /** Current value as timestamp */
+    date?: number;
+    /** Disable interactions @default false */
+    disabled?: boolean;
+    /** Render as readonly @default false */
+    readonly?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Maximum available date as timestamp */
+    maxDate?: number;
+    /** Minimum available date as timestamp */
+    minDate?: number;
+    /** Controlled visibility */
+    visible?: boolean;
+    /** Scoped model controlling visibility */
+    $visible?: any;
+    /** Test identifier for the input */
+    testID?: string;
+    /** Test identifier for calendar root */
+    calendarTestID?: string;
+    /** Called when user presses input (native) */
+    onPressIn?: (...args: any[]) => void;
+    /** Called with selected timestamp (or undefined when cleared) */
+    onChangeDate?: (value?: number) => void;
+    /** Called before opening (controlled visibility mode) */
+    onRequestOpen?: () => void;
+    /** Called before closing (controlled visibility mode) */
+    onRequestClose?: () => void;
+    /** Error state flag @private */
+    _hasError?: boolean;
+}

package/index.tsx

@@ -0,0 +1,485 @@
+import {
+  useMemo,
+  useRef,
+  useState,
+  useEffect,
+  useImperativeHandle,
+  type ReactNode,
+  type RefObject
+} from 'react'
+import { Platform, type StyleProp, type ViewStyle } from 'react-native'
+import RNDateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { pug, observer, useBind, $ } from 'startupjs'
+import { themed, useMedia } from '@startupjs-ui/core'
+import Button from '@startupjs-ui/button'
+import Div from '@startupjs-ui/div'
+import Divider from '@startupjs-ui/divider'
+import TextInput, { type UITextInputProps } from '@startupjs-ui/text-input'
+import AbstractPopover from '@startupjs-ui/abstract-popover'
+import Drawer from '@startupjs-ui/drawer'
+import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle'
+import moment from 'moment-timezone'
+import { getLocale } from './helpers'
+import { Calendar, TimeSelect } from './components'
+import './index.cssx.styl'
+
+export default observer(themed('DateTimePicker', DateTimePicker))
+
+export const _PropsJsonSchema = {/* DateTimePickerProps */}
+
+export interface DateTimePickerProps extends Omit<UITextInputProps, 'value' | 'onChangeText' | 'ref'> {
+  /** Ref to access underlying input */
+  ref?: RefObject<any>
+  /** Custom styles applied to the root input */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles for content container */
+  contentStyle?: Record<string, any>
+  /** Date formatting string from moment */
+  dateFormat?: string
+  /** Picker display mode @default 'spinner' */
+  display?: 'default' | 'spinner' | 'calendar' | 'clock'
+  /** Minutes step for time selection @default 5 */
+  timeInterval?: number
+  /** Force 24 hour time format (auto-detected when not provided) */
+  is24Hour?: boolean
+  /** Input size preset @default 'm' */
+  size?: 'l' | 'm' | 's'
+  /** Picker type @default 'datetime' */
+  mode?: 'date' | 'time' | 'datetime' | 'countdown'
+  /** Custom renderer for input component */
+  renderInput?: (inputProps: Record<string, any> & { onChangeVisible: (value: boolean) => void }) => ReactNode
+  /** Locale identifier (falls back to device locale) */
+  locale?: string
+  /** Selected date range (start/end timestamps) */
+  range?: [number, number]
+  /** IANA timezone name @default moment.tz.guess() */
+  timezone?: string
+  /** Array of disabled day timestamps */
+  disabledDays?: number[]
+  /** Current value as timestamp */
+  date?: number
+  /** Disable interactions @default false */
+  disabled?: boolean
+  /** Render as readonly @default false */
+  readonly?: boolean
+  /** Placeholder text */
+  placeholder?: string
+  /** Maximum available date as timestamp */
+  maxDate?: number
+  /** Minimum available date as timestamp */
+  minDate?: number
+  /** Controlled visibility */
+  visible?: boolean
+  /** Scoped model controlling visibility */
+  $visible?: any
+  /** Test identifier for the input */
+  testID?: string
+  /** Test identifier for calendar root */
+  calendarTestID?: string
+  /** Called when user presses input (native) */
+  onPressIn?: (...args: any[]) => void
+  /** Called with selected timestamp (or undefined when cleared) */
+  onChangeDate?: (value?: number) => void
+  /** Called before opening (controlled visibility mode) */
+  onRequestOpen?: () => void
+  /** Called before closing (controlled visibility mode) */
+  onRequestClose?: () => void
+  /** Error state flag @private */
+  _hasError?: boolean
+}
+
+function DateTimePicker ({
+  style,
+  contentStyle = {},
+  dateFormat,
+  display = 'spinner',
+  timeInterval = 5,
+  is24Hour,
+  size = 'm',
+  mode = 'datetime',
+  renderInput,
+  locale,
+  range,
+  timezone = moment.tz.guess(),
+  disabledDays = [],
+  date,
+  disabled,
+  readonly,
+  placeholder,
+  maxDate,
+  minDate,
+  visible,
+  $visible,
+  testID,
+  calendarTestID,
+  onPressIn,
+  onChangeDate,
+  onRequestOpen,
+  onRequestClose,
+  _hasError,
+  ref,
+  ...props
+}: DateTimePickerProps): ReactNode {
+  const media: any = useMedia()
+  const [textInput, setTextInput] = useState('')
+  const refTimeSelect = useRef<any>(null)
+  const inputRef = useRef<any>(null)
+  const insets = useSafeAreaInsets()
+
+  useImperativeHandle(ref, () => inputRef.current)
+
+  function onDismiss () {
+    onChangeVisible(false)
+  }
+
+  function getTimestampFromValue (value: any) {
+    if (value?.nativeEvent?.timestamp) {
+      return value.nativeEvent.timestamp
+    }
+
+    if (value instanceof Date) {
+      return value.getTime()
+    }
+
+    return value
+  }
+
+  function showAndroidPicker () {
+    const showTimepicker = (selectedDate: Date) => {
+      ;(DateTimePickerAndroid as any).open({
+        value: selectedDate,
+        mode: 'time',
+        display: 'time',
+        is24Hour,
+        onChange: (event: any, selectedTime: Date) => {
+          if (event.type === 'set') {
+            const finalDate = new Date(selectedDate)
+            finalDate.setHours(selectedTime.getHours())
+            finalDate.setMinutes(selectedTime.getMinutes())
+            _onChangeDate(finalDate)
+          } else {
+            onDismiss()
+          }
+        }
+      })
+    }
+
+    const showDatepicker = () => {
+      ;(DateTimePickerAndroid as any).open({
+        value: tempDate,
+        mode: 'date',
+        display: 'calendar',
+        maximumDate: maxDate ? new Date(maxDate) : undefined,
+        minimumDate: minDate ? new Date(minDate) : undefined,
+        onChange: (event: any, selectedDate: Date) => {
+          if (event.type === 'set') {
+            if (mode === 'datetime') {
+              showTimepicker(selectedDate)
+            } else {
+              _onChangeDate(selectedDate)
+            }
+          } else {
+            onDismiss()
+          }
+        }
+      })
+    }
+
+    switch (mode) {
+      case 'date':
+        showDatepicker()
+        break
+      case 'time':
+        ;(DateTimePickerAndroid as any).open({
+          value: tempDate,
+          mode: 'time',
+          display: 'clock',
+          is24Hour,
+          onChange: (event: any, selectedTime: Date) => {
+            if (event.type === 'set') {
+              _onChangeDate(selectedTime)
+            } else {
+              onDismiss()
+            }
+          }
+        })
+        break
+      case 'datetime':
+        showDatepicker()
+        break
+    }
+  }
+
+  let bindProps: any = useMemo(() => {
+    if (typeof $visible !== 'undefined') return { $visible }
+    if (typeof onRequestOpen === 'function' && typeof onRequestClose === 'function') {
+      return {
+        visible,
+        onChangeVisible: (value: boolean) => {
+          if (value) {
+            onRequestOpen()
+          } else {
+            onRequestClose()
+          }
+
+          if (Platform.OS === 'android' && value) {
+            showAndroidPicker()
+          }
+        }
+      }
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!bindProps) {
+    $visible = $(false)
+    bindProps = { $visible }
+  }
+
+  let { onChangeVisible } = bindProps
+  ;({ visible, onChangeVisible } = useBind({ $visible, visible, onChangeVisible }) as any)
+
+  const [tempDate, setTempDate] = useTempDate({ visible: !!visible, date, timezone })
+
+  useEffect(() => {
+    // Prevent crashes when custom renderer passed via props
+    if (renderInput) return
+    if (visible) {
+      inputRef?.current?.focus?.()
+    } else {
+      inputRef?.current?.blur?.()
+    }
+  }, [visible, renderInput])
+
+  const exactLocale = useMemo(() => {
+    const locales = moment.locales()
+    const _locale = locale ?? getLocale()
+    return locales.includes(_locale) ? _locale : 'en'
+  }, [locale])
+
+  const _dateFormat = useMemo(() => {
+    if (dateFormat) return dateFormat
+    if (mode === 'datetime') {
+      return (moment().locale(exactLocale) as any)._locale._longDateFormat.L + ' ' +
+      (moment().locale(exactLocale) as any)._locale._longDateFormat.LT
+    }
+
+    if (mode === 'date') return (moment().locale(exactLocale) as any)._locale._longDateFormat.L
+    if (mode === 'time') return (moment().locale(exactLocale) as any)._locale._longDateFormat.LT
+  }, [mode, dateFormat, exactLocale])
+
+  useEffect(() => {
+    if (typeof date === 'undefined') {
+      setTextInput('')
+      return
+    }
+
+    const value = +moment.tz(date, timezone).seconds(0).milliseconds(0)
+    setTextInput(moment.tz(value, timezone).format(_dateFormat))
+    setTempDate(new Date(value))
+  }, [date, timezone, _dateFormat, setTempDate])
+
+  function _onChangeDate (value: any) {
+    const timestamp = getTimestampFromValue(value)
+    onChangeDate && onChangeDate(timestamp)
+    onChangeVisible(false)
+  }
+
+  function _onPressIn (...args: any[]) {
+    if (Platform.OS === 'android') {
+      showAndroidPicker()
+    }
+
+    onChangeVisible(true)
+
+    onPressIn && onPressIn(...args)
+  }
+
+  const inputProps: Record<string, any> = {
+    style,
+    ref: inputRef,
+    disabled,
+    readonly,
+    size,
+    placeholder,
+    _hasError,
+    value: textInput,
+    testID,
+    ...props
+  }
+
+  if (Platform.OS === 'web') {
+    inputProps.editable = false
+    inputProps.onFocus = _onPressIn
+  }
+
+  if (Platform.OS === 'android') {
+    inputProps.onFocus = _onPressIn
+    // Hide cursor for android
+    inputProps.cursorColor = 'transparent'
+  }
+
+  if (Platform.OS === 'ios') {
+    inputProps.onPressIn = _onPressIn
+  }
+
+  function handleRenderedInputPress (value: boolean) {
+    if (Platform.OS === 'android' && value) {
+      showAndroidPicker()
+    }
+
+    onChangeVisible(value)
+  }
+
+  const caption = pug`
+    if renderInput
+      = renderInput(Object.assign({ onChangeVisible: handleRenderedInputPress }, inputProps))
+    else
+      TextInput(
+        showSoftInputOnFocus=false
+        secondaryIcon=textInput && !renderInput ? faTimesCircle : undefined,
+        onSecondaryIconPress=() => onChangeDate && onChangeDate()
+        ...inputProps
+      )
+  `
+
+  function renderPopoverContent (): ReactNode {
+    return pug`
+      Div.content(
+        style={
+          paddingBottom: (media.tablet && Platform.OS === 'ios') ? 0 : insets.bottom,
+          ...contentStyle
+        }
+      )
+        if Platform.OS === 'web'
+          if (mode === 'date') || (mode === 'datetime')
+            Calendar(
+              date=tempDate
+              exactLocale=exactLocale
+              disabledDays=disabledDays
+              locale=locale
+              maxDate=maxDate
+              minDate=minDate
+              range=range
+              timezone=timezone
+              testID=calendarTestID
+              onChangeDate=(newDate) => {
+                setTempDate(newDate)
+                if (mode === 'date') _onChangeDate(newDate)
+              }
+            )
+
+          if mode === 'datetime'
+            Divider.divider
+
+          if (mode === 'time') || (mode === 'datetime')
+            TimeSelect(
+              date=tempDate
+              ref=refTimeSelect
+              maxDate=maxDate
+              minDate=minDate
+              timezone=timezone
+              exactLocale=exactLocale
+              is24Hour=is24Hour
+              timeInterval=timeInterval
+              onChangeDate=(newTime) => {
+                const finalDate = new Date(tempDate)
+                finalDate.setHours(new Date(newTime).getHours())
+                finalDate.setMinutes(new Date(newTime).getMinutes())
+                _onChangeDate(finalDate)
+              }
+            )
+        else if Platform.OS === 'ios'
+          Div.actions(row)
+            Button(
+              size='s'
+              color='secondary'
+              variant='text'
+              onPress=() => {
+                onDismiss()
+              }
+            ) Cancel
+            Button(
+              size='s'
+              color='primary'
+              variant='text'
+              onPress=() => {
+                _onChangeDate(tempDate)
+              }
+            ) Done
+          RNDateTimePicker.rnPicker(
+            value=tempDate
+            display=display
+            is24Hour=is24Hour
+            disabled=disabled
+            mode=mode
+            themeVariant='light'
+            textColor='#000000cc'
+            maximumDate=maxDate ? new Date(maxDate) : undefined
+            minimumDate=minDate ? new Date(minDate) : undefined
+            timeZoneName=timezone
+            onChange=(event, selectedDate) => {
+              if (event.type !== 'dismissed') {
+                setTempDate(selectedDate)
+              }
+            }
+          )
+    `
+  }
+
+  function renderWrapper (children: ReactNode): ReactNode {
+    return pug`
+      Div.popoverWrapper
+        Div.popoverOverlay(feedback=false onPress=()=> onChangeVisible(false))
+        = children
+    `
+  }
+
+  return pug`
+    // Android datetimepicker rendered inside its own modal
+    if Platform.OS === 'android'
+      = caption
+    else
+      if media.tablet
+        = caption
+        AbstractPopover.popover(
+          visible=visible
+          anchorRef=inputRef
+          renderWrapper=renderWrapper
+        )= renderPopoverContent()
+      else
+        = caption
+        Drawer.drawer(
+          visible=visible
+          position='bottom'
+          swipeStyleName='swipe'
+          AreaComponent=Div
+          onDismiss=onDismiss
+        )= renderPopoverContent()
+  `
+}
+
+function useTempDate ({
+  visible,
+  date,
+  timezone
+}: {
+  visible: boolean
+  date?: number
+  timezone: string
+}) {
+  const [tempDate, setTempDate] = useState(getTempDate(date, timezone))
+
+  useEffect(() => {
+    const tempDate = getTempDate(date, timezone)
+    setTempDate(tempDate)
+  }, [visible, date, timezone])
+
+  return [tempDate, setTempDate] as const
+}
+
+function getTempDate (date: number | undefined, timezone: string) {
+  return date
+    ? new Date(+moment.tz(date, timezone).seconds(0).milliseconds(0))
+    : new Date()
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@startupjs-ui/date-time-picker",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@react-native-community/datetimepicker": "^8.4.4",
+    "@startupjs-ui/abstract-popover": "^0.1.3",
+    "@startupjs-ui/button": "^0.1.3",
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/divider": "^0.1.3",
+    "@startupjs-ui/drawer": "^0.1.3",
+    "@startupjs-ui/flat-list": "^0.1.3",
+    "@startupjs-ui/icon": "^0.1.3",
+    "@startupjs-ui/popover": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3",
+    "@startupjs-ui/text-input": "^0.1.3",
+    "moment-timezone": "^0.5.31",
+    "react-native-safe-area-context": "^5.6.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}