DatePicker Stable WINMACLNX

A trigger button that opens a floating month calendar. The calendar renders in a root-level overlay layer so it is never clipped by ScrollView or other ancestors. It flips above the trigger automatically near the window bottom.

Import

import { DatePicker } from 'veloxkit'

Basic usage

const [date, setDate] = useState<Date | null>(null)
 
<DatePicker
  value={date}
  onValueChange={setDate}
/>

Props

Prop	Type	Default	Description
`value`	`Date \| null`	`null`	Currently selected date
`onValueChange`	`(date: Date) => void`	—	Called when the user taps a day
`disabled`	`boolean`	`false`	Prevents interaction
`style`	`ViewStyle`	—	Outer container style

Examples

Booking form

const tomorrow = new Date()
tomorrow.setDate(tomorrow.getDate() + 1)
 
const [checkIn, setCheckIn]   = useState<Date | null>(null)
const [checkOut, setCheckOut] = useState<Date | null>(null)
 
return (
  <View style={{ gap: 24 }}>
    <View>
      <Text style={{ marginBottom: 8, fontWeight: '600' }}>Check-in date</Text>
      <DatePicker
        value={checkIn}
        onValueChange={d => { setCheckIn(d); if (checkOut && d > checkOut) setCheckOut(null) }}
      />
    </View>
 
    {checkIn && (
      <View>
        <Text style={{ marginBottom: 8, fontWeight: '600' }}>Check-out date</Text>
        <DatePicker
          value={checkOut}
          onValueChange={setCheckOut}
        />
      </View>
    )}
 
    {checkIn && checkOut && (
      <Text style={{ color: '#9999bb', fontSize: 14 }}>
        {Math.round((checkOut.getTime() - checkIn.getTime()) / 86_400_000)} nights
      </Text>
    )}
  </View>
)

Date of birth with display

const [dob, setDob] = useState<Date | null>(null)
 
return (
  <View style={{ gap: 12 }}>
    <Text style={{ fontWeight: '600' }}>Date of birth</Text>
    <DatePicker value={dob} onValueChange={setDob} />
    {dob && (
      <Text style={{ color: '#9999bb', fontSize: 13 }}>
        Selected: {dob.toLocaleDateString()}
      </Text>
    )}
  </View>
)

Inside a ScrollView

The calendar opens as a floating overlay and is never clipped by its scroll ancestor:

<ScrollView>
  <Text style={{ fontWeight: '600', marginBottom: 8 }}>Appointment date</Text>
  <DatePicker value={apptDate} onValueChange={setApptDate} />
</ScrollView>

The calendar closes automatically when the user clicks outside it.

Select db (SQLite)