FLIN App

Basic Usage

Simple date picker with live value display.

Start Date

Birthday

Date of birth selection for user profiles.

Date of Birth

Project Deadline

Set a due date for project milestones.

Deadline

Event Scheduling

Pick a date for upcoming events.

Event Date

In a Form

Date picker combined with other form inputs.

Employee Name

Hire Date

Date Range

Use two date pickers for start and end dates.

Start Date

End Date

Usage

startDate = ""// Basic date picker<DatePicker label="Start Date" bind={startDate} />// Display selected date{if startDate != ""}<Badge>{startDate}</Badge>{/if}// Date range with two pickers<DatePicker label="Start" bind={startDate} /><DatePicker label="End" bind={endDate} />

Props

Prop	Type	Default	Description
`label`	text	""	Label text above picker
`bind`	binding	-	Two-way binding for selected date

DatePicker

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Basic Usage

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Birthday

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Project Deadline

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Event Scheduling

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } In a Form

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Date Range

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Usage

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Props