How to use BlazorNodaTimeDateTimePicker in Bolero

I suggest this be included in the documentation for Bolero, not necessarily as is, but suitably modified. It demonstrates use of the BlazorNodaTimeDateTimePicker component in Bolero.

BlazorNodaTimeDateTimePicker uses NodaTime, and both libraries are available through NuGet.

This demonstration isolates the use of NodaTime to the wrapper, so that you can use DateTime outside of the wrapper, and won't have to deal with NodaTime. However, NodaTime is an excellent library that you might want to use, in which case you just remove the call to ToDateTimeUnspecified in order to have a LocalDate instead of a DateTime returned.

The demonstration shows how to localize the date picker explicitly for Norwegian culture and language. Modify as needed, or remove to use the defaults. In fact it might be a good idea to supply the parameters as arguments to the wrapper, but that's an exercise beyond the scope of this demonstration.

There are more parameters not demonstrated here, including more callbacks.

DatePickerComp.fs - A wrapper for use of the date picker

module MyWebSite.Client.DatePickerComp

open System
open Bolero.Html
open BlazorNodaTimeDateTimePicker
// Note: NodaTime is used qualified, to avoid conflicts.

// Documentation for DatePicker settings is here ( look for [Parameter] ) :
// https://github.com/nheath99/BlazorNodaTimeDateTimePicker/blob/master/src/BlazorNodaTimeDateTimePicker/DatePicker.razor

let datePicker (selectedDate: DateTime) (handleSelected: DateTime -> unit) =
    comp<DatePicker> [
        "Inline" => true
        "SelectedDate" => NodaTime.LocalDate.FromDateTime selectedDate
        "ShowClear" => false
        "DisplayWeekNumber" => true
        // Localization settings. Settings for Norwegian culture and language is demonstrated here.
        "FirstDayOfWeek" => NodaTime.IsoDayOfWeek.Monday // default: Monday
        "FormatProvider" => new Globalization.CultureInfo "nb-NO" // default: Globalization.CultureInfo.InvariantCulture
        "TodayText" => "Dags dato" // default: Today
        "CloseText" => "Lukk" // default: Close
        "WeekAbbreviation" => "Uke" // default: Wk
        // Handlers
        "Selected" => Action<_>(fun (d: NodaTime.LocalDate) -> d.ToDateTimeUnspecified() |> handleSelected)
    ] []

Dates.fs - A submodel that uses the date picker for two date fields.

module MyWebSite.Client.Dates

open System
open Elmish
open Bolero
open Bolero.Html

type DatesTemplate = Template<"wwwroot/dates.html">

type Model =
    {
        firstDate: DateTime
        secondDate: DateTime
    }

type Message =
    | SetFirstDate of DateTime
    | SetSecondDate of DateTime

let init =
    {
        firstDate = DateTime.Today.AddDays -2.
        secondDate = DateTime.Today.AddDays -4.
    }

let update (remote: NextService) message model =
    match message with
    | SetFirstDate value -> { model with firstDate = value }, Cmd.none
    | SetSecondDate value -> { model with secondDate = value }, Cmd.none

let page model dispatch =
    let selectFirstDate = DatePickerComp.datePicker model.firstDate (fun d -> d |> SetFirstDate |> dispatch)
    let selectSecondDate = DatePickerComp.datePicker model.secondDate (fun d -> d |> SetSecondDate |> dispatch)
    DatesTemplate.Dates()
        .SelectFirstDate(selectFirstDate)
        .ShowFirstDate(model.firstDate.ToLongDateString())
        .SelectSecondDate(selectSecondDate)
        .ShowSecondDate(model.secondDate.ToLongDateString())
        .Elt()

dates.html - A template used by the submodel.

<template id="Dates">
    <div class="content">
        <h1 class="title">Demo DatePicker</h1>
        <p> Select first date : ${SelectFirstDate} </p>
        <p> Show first date : ${ShowFirstDate} </p>
        <p> Select second date : ${SelectSecondDate} </p>
        <p> Show second date : ${ShowSecondDate} </p>
    </div>
</template>

And here's a screenshot of what it looks like. Again, in this demo the component itself is localized for Norwegian culture and language.

BlazorNodaTimeDateTimePicker

fsbolero / website

How to use BlazorNodaTimeDateTimePicker in Bolero #1