Date picker
Combine a labelled date field, popover, and compact Month calendar into one form control.
Default
On this page
Installation
Copy this component and its required dependencies into the consumer-owned Components project.
dotnet fve add date-picker --config src/Acme.Components/fve.jsonThe CLI resolves dependencies and preserves consumer-authored files. See Installation for project initialization and Tailwind source detection.
Usage
open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar
let defaultDatePicker =
DatePicker.create "default-invoice-date" "defaultInvoiceDate" "Invoice date" (MonthCalendarSelection.Single None)
|> DatePicker.renderClearable single date
Date range
Month and year selectors
Bounds and unavailable dates
Validation
Pending
Disabled
API reference
type DatePickerConfig
/// Submitted date-only values must still be validated by the server.
module DatePicker =
val create : id:string -> name:string -> label:string -> selection:MonthCalendarSelection -> DatePickerConfig
val withDisplayMonth : month:DateOnly -> config:DatePickerConfig -> DatePickerConfig
val withBounds : minimum:DateOnly -> maximum:DateOnly -> config:DatePickerConfig -> DatePickerConfig
val withUnavailable : dates:DateOnly list -> config:DatePickerConfig -> DatePickerConfig
val withLocale : locale:string -> config:DatePickerConfig -> DatePickerConfig
val withWeekStart : weekStart:MonthCalendarWeekStart -> config:DatePickerConfig -> DatePickerConfig
val withCaptionLayout : captionLayout:MonthCalendarCaptionLayout -> config:DatePickerConfig -> DatePickerConfig
val withRangeEndName : name:string -> config:DatePickerConfig -> DatePickerConfig
val withDescription : description:string -> config:DatePickerConfig -> DatePickerConfig
val withValidation : message:string -> config:DatePickerConfig -> DatePickerConfig
val clearable : config:DatePickerConfig -> DatePickerConfig
val disabled : config:DatePickerConfig -> DatePickerConfig
val pending : config:DatePickerConfig -> DatePickerConfig
val withAttributes : attributes:HtmlAttribute list -> config:DatePickerConfig -> DatePickerConfig
val render : config:DatePickerConfig -> HtmlElement