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.

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
    v-model="selectedDate"
    :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 | Date | undefined | The currently selected date (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 | undefined | Error message to display below the input field | | leadingIcon | string | undefined | Name of the leading icon to display inside the input field | | trailingIcon | string | undefined | Name of the trailing icon to display inside the input field |

Events

| Event | Payload | Description | | ------------------- | ------- | -------------------------------------- | | update:modelValue | Date | Emitted when the selected date changes |

Examples

Basic DateField

<DateField v-model="selectedDate" />

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Type Check

pnpm type-check

License

MIT