Implement a DateTimePicker widget

Author: fnawratil

docs/src/basic_widgets.md

@@ -1,5 +1,9 @@
 # Basic Widgets
-This Package exports two basic widgets: `Editable` and `StringOnEnter`
+This package exports three basic widgets:
+
+- `Editable` - a number input triggering on `Enter`
+- `StringOnEnter` - a string input triggering on `Enter`
+- `DateTimePicker` - the native date and time picker.
 
 ## Editable
 ```@docs
@@ -9,4 +13,9 @@ Editable
 ## StringOnEnter
 ```@docs
 StringOnEnter
-```
+```
+
+## DateTimePicker
+```@docs
+DateTimePicker
+```

docs/src/index.md

@@ -1,8 +1,7 @@
-# PlutoExtras
+# PlutoExtras.jl - Overview
 
-Documentation for [PlutoExtras](https://github.com/disberd/PlutoExtras.jl).
+The [PlutoExtras.jl](https://github.com/disberd/PlutoExtras.jl) package provides several extensions to Pluto and PlutoUI, including additional widgets, support for LaTeX equations, an improved table of contents, and useful macros for binding structs and named tuples to widgets.
 
-## Outline
 ```@contents
 Pages = [
     "basic_widgets.md",
@@ -11,4 +10,4 @@ Pages = [
     "structbond.md",
 ]
 Depth = 1
-```
+```

src/PlutoExtras.jl

@@ -2,6 +2,7 @@ module PlutoExtras
 using HypertextLiteral
 using AbstractPlutoDingetjes.Bonds
 using AbstractPlutoDingetjes
+using Dates
 import PlutoUI
 
 # This is similar to `@reexport` but does not exports undefined names and can
@@ -16,13 +17,13 @@ function re_export(m::Module; modname = false)
     eval(:(export $(exprts...)))
 end
 
-export Editable, StringOnEnter # from basic_widgets.jl
-
 include("helpers.jl")
 
 include("combine_htl/PlutoCombineHTL.jl")
 
 include("basic_widgets.jl")
+export Editable, StringOnEnter, DateTimePicker
+
 include("latex_equations.jl") 
 module ExtendedToc include("extended_toc/extended_toc.jl") end
 

src/basic_widgets.jl

@@ -310,4 +310,54 @@ Bonds.possible_values(t::StringOnEnter) = Bonds.InfinitePossibilities()
 
 function Bonds.validate_value(t::StringOnEnter, val)
 	val isa AbstractString
-end
+end
+
+
+
+# DateTimePicker #
+#=
+Create an element to utilize the HTML5 date-time input type.
+=#
+
+## Struct ##
+
+"""
+	DateTimePicker(default::DateTime=now(), min::Union{DateTime,Nothing}=nothing, max::Union{DateTime,Nothing}=nothing, step::Dates.Period=Dates.Minute(1))
+Creates a Pluto widget that allows to provide a DateTime as output when used with `@bind`.
+
+Due to the implementation of the HTML5 date-time input type, only date-times with a precision up to the minute are supported.
+
+Options:
+- `default::DateTime`: The default value to show when the widget is created. Defaults to the current date-time floored to the minute.
+- `min::Union{DateTime,Nothing}`: The minimum date-time that can be selected. Defaults to `nothing` (no minimum)
+- `max::Union{DateTime,Nothing}`: The maximum date-time that can be selected. Defaults to `nothing` (no maximum)
+- `step::Dates.Period`: The step size, defaults to `Dates.Minute(1)`. This defines the increments in which the date-time can be changed.
+
+When rendered in HTML, the widget will use the native date-time picker of the browser.
+"""
+Base.@kwdef struct DateTimePicker
+	default::DateTime=floor(now(), Dates.Minute)
+	min::Union{DateTime,Nothing}=nothing
+	max::Union{DateTime,Nothing}=nothing
+	step::Dates.Period=Dates.Minute(1)
+
+	function DateTimePicker(default, min, max, step)
+		flrd_default = floor(default, Dates.Minute)
+		flrd_min = isnothing(min) ? nothing : floor(min, Dates.Minute)
+		flrd_max = isnothing(max) ? nothing : floor(max, Dates.Minute)
+		new(flrd_default, flrd_min, flrd_max, step)
+	end
+end
+
+Base.show(io::IO, mime::MIME"text/html", dtp::DateTimePicker) = show(io, mime, @htl """
+	<input $((type="datetime-local", value=dtp.default, min=dtp.min, max=dtp.max, step=Dates.seconds(dtp.step)))></input>
+""")
+
+Base.get(dtp::DateTimePicker) = dtp.default
+Bonds.initial_value(dtp::DateTimePicker) = dtp.default
+function Bonds.transform_value(dtp::DateTimePicker, val)
+	something(tryparse(DateTime, val, dateformat"YYYY-mm-ddTHH:MM"), DateTime(1970,1,1))
+end
+function Bonds.validate_value(dtp::DateTimePicker, val)
+	!isnothing(tryparse(DateTime, val, dateformat"YYYY-mm-ddTHH:MM"))
+end