Date time field
v0.0.10
mix mishka.ui.gen.component date_time_field
Date Time component
Date Time component
The date-time component is a built-in browser feature that provides a user-friendly date picker for selecting dates, times, or a combination of both. This component allows users to easily input date and time values without manually typing them, reducing errors and improving the overall user experience. When implemented using input types like date, time, or datetime-local, the browser automatically renders a native date or time picker. This simplifies form interactions and ensures consistent behavior across different devices and platforms, as it leverages the browser's built-in functionality for date and time selection.
Date Time component
<.date_time_field />Date Time type-prop
The type attribute is a string that determines the specific type of input field, allowing you to choose from options like date, datetime-local, time, week, and month. By setting the type attribute, you can customize the input to handle various types of data, such as selecting a specific date, time, or week. The default is date, but changing this attribute allows for more flexibility in capturing different types of time-related data from users, enhancing form functionality and user experience.
Date Time type-prop
<!--Date is default type-->
<.date_time_field type="date" />
<.date_time_field type="datetime-local" />
<.date_time_field type="time" />
<.date_time_field type="week" />
<.date_time_field type="month" />Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | No | A unique identifier is used to manage state and interaction |
class
|
any
| — | — | No | Custom CSS class for additional styling |
color
|
string
|
natural
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfomiscdawnsilver
| No | Determines color theme |
type
|
string
|
date
|
datedatetime-localtimeweekmonth
| No | Determines type of input |
border
|
string
|
extra_small
| — | No | Determines border style |
rounded
|
string
|
small
|
extra_smallsmallmediumlargeextra_largenonefull
| No | Determines the border radius |
variant
|
string
|
base
|
outlinedefaultborderedshadowtransparentbase
| No | Determines the style |
description
|
string
| — | — | No | Determines a short description |
space
|
string
|
medium
|
extra_smallsmallmediumlargeextra_large
| No | Space between items |
placeholder
|
string
| — | — | No | Specifies text for placeholder |
description_class
|
string
|
text-[12px]
| — | No | Custom classes for description |
label_class
|
string
| — | — | No | Custom CSS class for the label styling |
field_wrapper_class
|
string
| — | — | No | Custom CSS class field wrapper |
input_class
|
string
| — | — | No | Custom CSS class for the input |
floating_label_class
|
string
| — | — | No | Custom CSS class for the floating label |
description_wrapper_class
|
string
| — | — | No | Custom classes for description wrapper |
size
|
string
|
extra_large
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
ring
|
boolean
|
true
| — | No | Determines a ring border on focused input, utilities for creating outline rings with box-shadows. |
floating
|
string
|
none
| — | No | none, inner, outer |
error_icon
|
string
| — | — | No | Icon to be displayed alongside error messages |
label
|
string
| — | — | No | Specifies text for the label |
errors
|
list
|
[]
| — | No | List of error messages to be displayed |
name
|
any
| — | — | No | Name of input |
value
|
any
| — | — | No | Value of input |
field
|
Phoenix.HTML.FormField
| — | — | No | a form field struct retrieved from the form |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
Slots
| Name | Required | Description |
|---|---|---|
start_section
| No | Renders heex content in start of an element |
end_section
| No | Renders heex content in end of an element |
Attributes of the start_section slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
class
|
any
| — | — | No | Custom CSS class for additional styling |
icon
|
string
| — | — | No | Icon displayed alongside of an item |
Attributes of the end_section slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
class
|
any
| — | — | No | Custom CSS class for additional styling |
icon
|
string
| — | — | No | Icon displayed alongside of an item |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
outlinedefaultborderedshadowtransparentbase
|
--color
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfomiscdawnsilver
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--space
|
extra_smallsmallmediumlargeextra_large
|
--rounded
|
extra_smallsmallmediumlargeextra_largenonefull
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component date_time_field