DatePicker Stable WINMACLNX

An inline calendar — renders month + day grid directly in your layout. No popup windows.

Import

import { DatePicker } from 'veloxkit'

Basic usage

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

Props

Prop	Type	Default	Description
`value`	`Date \| null`	`null`	Currently selected date
`onChange`	`(date: Date) => void`	—	Called when the user taps a day
`minDate`	`Date`	—	Earliest selectable date
`maxDate`	`Date`	—	Latest selectable date
`style`	`ViewStyle`	—	Outer container style

Examples

Booking form

const tomorrow = new Date()
tomorrow.setDate(tomorrow.getDate() + 1)
 
const twoMonths = new Date()
twoMonths.setMonth(twoMonths.getMonth() + 2)
 
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}
        onChange={d => { setCheckIn(d); if (checkOut && d > checkOut) setCheckOut(null) }}
        minDate={tomorrow}
        maxDate={twoMonths}
      />
    </View>
 
    {checkIn && (
      <View>
        <Text style={{ marginBottom: 8, fontWeight: '600' }}>Check-out date</Text>
        <DatePicker
          value={checkOut}
          onChange={setCheckOut}
          minDate={new Date(checkIn.getTime() + 86_400_000)}
          maxDate={twoMonths}
        />
      </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)
 
const maxDob = new Date()
maxDob.setFullYear(maxDob.getFullYear() - 18)  // must be 18+
 
return (
  <View style={{ gap: 12 }}>
    <Text style={{ fontWeight: '600' }}>Date of birth</Text>
    <DatePicker value={dob} onChange={setDob} maxDate={maxDob} />
    {dob && (
      <Text style={{ color: '#9999bb', fontSize: 13 }}>
        Selected: {dob.toLocaleDateString()}
      </Text>
    )}
  </View>
)

Show inside a modal

const [show, setShow] = useState(false)
const [date, setDate] = useState<Date | null>(null)
 
return (
  <View>
    <Pressable onPress={() => setShow(true)}
               style={{ padding: 12, backgroundColor: '#2a2a3e', borderRadius: 8 }}>
      <Text>{date ? date.toLocaleDateString() : 'Pick a date…'}</Text>
    </Pressable>
 
    {show && (
      <View style={{
        position: 'absolute', top: 50, left: 0,
        backgroundColor: '#1a1a2e', borderRadius: 12, padding: 16,
        zIndex: 100,
      }}>
        <DatePicker
          value={date}
          onChange={d => { setDate(d); setShow(false) }}
        />
      </View>
    )}
  </View>
)

Select db (SQLite)