VPicker

A date and time picker component. It maps to UIDatePicker on iOS, composed DatePicker/TimePicker controls on Android, and NSDatePicker on macOS.

Usage

VPicker supports v-model like every other form component:

<VPicker mode="date" v-model="selectedDate" />

The older :value + @change pair still works as a legacy alias:

<VPicker mode="date" :value="selectedDate" @change="selectedDate = $event.value" />

Props

Prop	Type	Default	Description
`mode`	`'date' \| 'time' \| 'datetime'`	`'date'`	Picker mode
`modelValue`	`number`	—	Selected date/time as epoch milliseconds. Bind with `v-model`
`value`	`number`	—	Legacy alias of `modelValue`. Ignored when `modelValue` is set
`minimumDate`	`number`	—	Earliest selectable date (epoch ms)
`maximumDate`	`number`	—	Latest selectable date (epoch ms)
`minuteInterval`	`number`	`1`	Interval between selectable minutes (e.g. `15` for quarter-hour steps)
`style`	`StyleProp`	—	Layout + appearance styles

Modes

'date' -- date-only picker (year, month, day)
'time' -- time-only picker (hours, minutes)
'datetime' -- combined date and time picker

Events

Event	Payload	Description
`@update:modelValue`	`number`	Emitted alongside `@change` when the user selects a new date/time. Used by `v-model`.
`@change`	`{ value: number }`	Fired when the user selects a new date/time. `value` is epoch milliseconds. Kept as a legacy alias -- both events fire on every selection.

Example

<script setup>
import { ref, computed } from 'vue'

const selectedDate = ref(Date.now())

const formatted = computed(() => {
  return new Date(selectedDate.value).toLocaleDateString()
})
</script>

<template>
  <VView :style="styles.container">
    <VText :style="styles.label">Selected: {{ formatted }}</VText>

    <VPicker
      mode="date"
      v-model="selectedDate"
      :minimumDate="Date.now() - 365 * 24 * 60 * 60 * 1000"
      :maximumDate="Date.now() + 365 * 24 * 60 * 60 * 1000"
    />
  </VView>
</template>

<script>
import { createStyleSheet } from '@thelacanians/vue-native-runtime'

const styles = createStyleSheet({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 20,
    padding: 24,
  },
  label: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
  },
})
</script>

Time picker with 15-minute intervals

<script setup>
import { ref } from 'vue'

const selectedTime = ref(Date.now())
</script>

<template>
  <VPicker
    mode="time"
    v-model="selectedTime"
    :minuteInterval="15"
  />
</template>

Legacy `:value` / `@change` form

Still supported for existing code -- value is ignored once modelValue is set, so don't mix the two on the same instance:

<VPicker mode="date" :value="selectedDate" @change="selectedDate = $event.value" />

Notes

All date/time values are in epoch milliseconds (JavaScript Date.now() format). Convert with new Date(value) for display.
v-model is the primary binding pattern; value / @change remain as a legacy alias for backward compatibility. Both @update:modelValue and @change fire on every selection regardless of which prop you bind.
On iOS, the picker uses the compact style (UIDatePicker.preferredDatePickerStyle = .compact) on iOS 14+.
The minuteInterval must be a divisor of 60 (e.g. 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30).
In Android time mode, minimumDate and maximumDate cannot be enforced because the platform time control has no date selector. Use those bounds with date or datetime mode.