## Date Field

A user-friendly date input for easy selection in the app.
Demo
Required Imports
import { InputDateFieldModule } from 'nextsapien-component-lib';
Input and Output Properties

Type | Name | Description | Default | Required
--- | --- | --- | --- | ---
Input | label | The label displayed for the input date field. | n/a | false
Input | defaultDate | The default date to display in the calendar. | n/a | false
Input | maxDate | The maximum selectable date in the calendar. | n/a | false
Input | minDate | The minimum selectable date in the calendar. | n/a | false
Input | showTime | Indicates whether to show the time picker. | false | false
Input | hieActions | Enables HIE-specific actions in the date picker. | false | false
Input | readonly | Specifies if the input field is read-only. | false | false
Input | defaultDayHighlight | Highlights the default day in the calendar if set. | false | false
Input | showIcon | Determines if a calendar icon should be shown next to the input field. | n/a | false
Input | timeOnly | Indicates if the picker should only display time. | false | false
Input | view | Specifies the view type of the calendar. | date | false
Input | disabled | Specifies whether the input field is disabled. | false | false
Input | dateFormat | The format for displaying dates. | mm-dd-yy | false
Input | placeholder | The placeholder text for the input field. | n/a | false
Input | appendTo | Specifies where to append the date picker popup. Can be a string, template, or element reference. | n/a | false
Input | stepMinute | The step interval for minutes in the time picker. | 15 | false
Input | mask | The input mask for date or time formatting. | n/a | false
Input | styleClass | CSS classes to apply to the input field for styling. | n/a | false
Input | timeFormat | The format for displaying time. | hh:mm | false
Output | focusEvent | Emits an event when the input field is focused or loses focus. | n/a | false

CSS Properties

Name | Default Value
--- | ---
`--border-radius` | 100px
`--input-field-margin` | 0
`--label-font-size-floated` | 11.0084px
`--label-color` | rgba(255, 255, 255, 0.5)
`--label-position-left` | 7px
`--label-position-top` | 19px
`--label-float-position-top` | -3px
`--label-padding` | 0 7px
`--label-font-family` | 'Gilroy-Regular', serif
`--label-font-style` | normal
`--label-font-weight` | 400
`--label-font-size` | 14px
`--label-line-height` | 160%
`--input-font-color` | rgba(255, 255, 255, 0.5)
`--input-font-family` | 'Gilroy-Regular', serif
`--input-font-size` | 16px
`--input-border` | none
`--input-padding` | 11px 15px
`--input-field-box-shadow` | inset 17px 22px 20px 2.5px rgba(17, 16, 20, 0.7), inset -2px -2px 8px rgba(203, 199, 209, 0.5)
`--border` | 3px solid #fe3c72

Example usage
`{{ dateFieldCode }}`