fn-design-system/components/date_picker_input.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant, params

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant	params
date_picker_input	component	ts	ui	1.0.0	impure	DatePickerInput(props: DatePickerInputProps): JSX.Element	Selector de fecha con input y calendario desplegable. Soporta fecha simple, múltiple y rango. Wrapper sobre Mantine DatePickerInput.	date picker calendar form component ui interactive mantine				false		@mantine/dates	Componente DatePickerInput que renderiza input con calendario para selección de fechas	false			frontend/functions/ui/date_picker_input.tsx	name type required description type 'default' | 'multiple' | 'range' false Modo de selección — fecha simple, múltiples fechas, o rango de fechas name type required description value DateValue | DateValue[] | [DateValue, DateValue] | null false Fecha o fechas seleccionadas (controlled) name type required description onChange (value: DateValue | DateValue[] | [DateValue, DateValue] | null) => void false Callback al cambiar la selección de fecha name type required description valueFormat string false Formato de la fecha mostrada en el input (ej: 'DD/MM/YYYY') name type required description clearable boolean false Permite limpiar la selección de fecha name type required description label string false Label del campo name type required description placeholder string false Texto cuando no hay fecha seleccionada name type required description minDate Date false Fecha mínima seleccionable name type required description maxDate Date false Fecha máxima seleccionable name type required description disabled boolean false Deshabilitar el selector name type required description size 'xs' | 'sm' | 'md' | 'lg' | 'xl' false Tamaño del componente	onChange	true	react	default	name desc props Props del componente DatePickerInput — incluye type (modo de selección), value, onChange, valueFormat, clearable, label, placeholder, minDate, maxDate, disabled y size

Ejemplo

import { DatePickerInput, DatePicker } from '@fn_library'
import { useState } from 'react'

// Fecha simple
function SingleDateExample() {
  const [value, setValue] = useState<Date | null>(null)
  return (
    <DatePickerInput
      label="Fecha de inicio"
      placeholder="Selecciona una fecha"
      value={value}
      onChange={setValue}
      clearable
    />
  )
}

// Rango de fechas
function RangeDateExample() {
  const [range, setRange] = useState<[Date | null, Date | null]>([null, null])
  return (
    <DatePickerInput
      type="range"
      label="Periodo"
      placeholder="Selecciona un rango"
      value={range}
      onChange={setRange}
      valueFormat="DD/MM/YYYY"
    />
  )
}

// Múltiples fechas
function MultipleDateExample() {
  const [dates, setDates] = useState<Date[]>([])
  return (
    <DatePickerInput
      type="multiple"
      label="Días seleccionados"
      placeholder="Selecciona fechas"
      value={dates}
      onChange={setDates}
      minDate={new Date()}
    />
  )
}

// DatePicker inline (sin input)
function InlineDateExample() {
  const [value, setValue] = useState<Date | null>(null)
  return (
    <DatePicker
      value={value}
      onChange={setValue}
    />
  )
}

Notas

• Wrapper directo sobre DatePickerInput y DatePicker de @mantine/dates v9. Todas las props de Mantine son válidas.
• Requiere importar @mantine/dates/styles.css — este wrapper ya lo incluye.
• El prop type controla el modo: 'default' (fecha simple), 'multiple' (varias fechas), 'range' (rango con inicio y fin).
• DatePicker es el calendario inline sin input — útil para formularios donde el calendario debe estar siempre visible.
• valueFormat acepta tokens de dayjs (ej: 'DD/MM/YYYY', 'MMMM D, YYYY').
• Re-exporta también DatePicker de @mantine/dates con el mismo patrón de wrapper.