DateField Component

DateField component built with TypeScript and Vite. Uses PhilaUI TextField's imask for input masking and dayjs for date manipulation. This component provides a user-friendly interface for selecting and inputting dates, with support for date pickers and customizable date formats.

Known gap (matches the "In Progress" status above): DateField.vue currently has no defineEmits/emit() call at all — the selected value is kept in a local ref internally, but there is no way for a change to reach a parent component yet. v-model on <DateField> does not currently work; use a template ref to read the field, or wait for this to be wired up before relying on two-way binding.

Features

• 🎯 TypeScript support with full type definitions
• DatePicker option for easy date selection
• Input masking for consistent date formats
• Validation for date ranges

Installation

npm install @phila/phila-ui-date-field
# or
yarn add @phila/phila-ui-date-field
# or
pnpm add @phila/phila-ui-date-field

Usage

<script setup lang="ts">
import { DateField } from "@phila/phila-ui-date-field";
</script>
<template>
  <DateField
    :datePicker="true"
    :imaskProps="{
      mask: Date,
      pattern: 'm/d/Y',
      format: (date: Date) => dayjs(date).format('MM/DD/YYYY'),
      parse: (str: string) => dayjs(str, 'MM/DD/YYYY').toDate(),
    }"
  />
</template>

Props

| Prop | Type | Default | Description | | ----------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | format | string | "MM/DD/YYYY" | Date format string for display and parsing | | datePicker | boolean | false | Whether to show the date picker when the field is focused | | min | Date | undefined | Minimum selectable date | | max | Date | undefined | Maximum selectable date | | imaskProps | object | { mask: Date, pattern: 'm/d/Y', format: (date) => dayjs(date).format('MM/DD/YYYY'), parse: (str) => dayjs(str, 'MM/DD/YYYY').toDate() } | Props to pass to the imask input for masking and parsing | | datePickerOptions | object | {} | Additional options to pass to the DatePicker component | | modelValue | string | undefined | Inherited from TextFieldProps — the field's raw text value, not a Date. See the known gap noted above; there is currently no way to read this back out via v-model. | | className | string | undefined | Additional CSS classes to apply | | label | string | undefined | Label for the date field | | placeholder | string | undefined | Placeholder text for the input field | | supportingText | string | undefined | Supporting text to display below the input field | | error | string \| string[] | undefined | Error message(s) to display below the input field (inherited from TextFieldProps) | | leadingIcon | IconComponent | undefined | Inherited from TextFieldProps — icon from @phila/phila-ui-core/icons, not a string class name. | | trailingIcon | IconComponent | undefined | Inherited from TextFieldProps — icon from @phila/phila-ui-core/icons, not a string class name. |

Events

DateField.vue does not currently declare or emit any events — see the known gap noted above.

Examples

Basic DateField

<DateField label="Date of birth" />

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Type Check

pnpm type-check

Publishing to NPM

Follow the release instructions using changesets.

License

MIT