Native HTML + TiddlyWiki Date picker

[AnthonyMuscio]

Following on from #6377 I want to share a date picker code pattern to illustrate how we may build one for inclusion in the core.

• It leverages the input-date parameter in the edit text widget
• Saves a html format date and then translates that to a tiddlywiki serial date.

Outstanding issues

• Better css for viewing the icon only version at different zoom levels
• Check what happens in different localities to the saved html date format
• Finish the toolbar button example and alternative icon use.
• Should we add a variation to save as unixtime?

I will attach the package for testing on tiddlywiki.com shortly

date-picker.json.txt
Remove the .txt to import.

Macros to demonstrate how simple it can be.

\define convert-html-date-add-time()
<$let time-now={{{ [<now 0hh0mm0ss0XXX>] }}}>
<$action-setfield $field="""$(date-field)$""" $value={{{ [all[current]get[$(html-date)$]split[-]join[]addsuffix<time-now>] }}} />
</$let>
\end
\define date-picker(fieldname:"date" class:"" )
<span title="""Select date for '$fieldname$' field""">
<$let date-field="""$fieldname$""" html-date="""$fieldname$-html""">
<$edit-text field=<<html-date>> class="""$class$""" 
   tag="input" type="date"
   inputActions=<<convert-html-date-add-time>>
/></$let></span>
\end

[Jermolene]

Hi @AnthonyMuscio I strongly agree that we need to have an easy to use date picker in the core. I'm not sure if this macro is the right direction. In the new post-v5.3.0 world this should be a procedure, or even possibly a wikitext widget.

[AnthonyMuscio]

Thanks @Jermolene

I strongly agree that we need to have an easy to use date picker in the core

I suppose my point is that it does not take much code as it stands, the only complication is maintaining two fields per date.

Perhaps 5.3.0 offers a method in "a procedure, or even possibly a wikitext widget" that can overcome this limitation, perhaps using this as a case in point to illustrate a real world use of these new features, could be included in the 5.3.0 release and deliver a long desired date picker as well?

I will try, but I am still not expert on the new features, perhaps you or others, who understand it better could consider this.

• I think a key feature of my solution is how the various forms can be created simply by the application of (mostly) existing classes. I would hope for something similar in an alternative picker.
• A smart design may also be able to unleash other forms of html input types not so easily used in the edit-text widget.

[Leilei332]

Implentation using procedure and custom widgets.

\procedure convert-html-date()
<$let time-now={{{ [<now 0hh0mm0ss0XXX>] }}}>
<$action-setfield $field=<<date-field>> $value={{{ [all[current]get<html-date>split[-]join[]addsuffix<time-now>] }}} />
</$let>
\end
\widget $my.edit-date(field:"date" htmlfield:"date-html" class:"" )
<$let date-field=<<field>> html-date=<<htmlfield>> >
<$edit-text field=<<html-date>> class=<<class>> 
   tag="input" type="date"
   inputActions=<<convert-html-date>>
/></$let>
\end

Date & time picker widget:

\procedure convert-html-date-time()
<$let time-now={{{ [<now 0ss0XXX>] }}}>
<$action-setfield $field=<<date-field>> $value={{{ [all[current]get<html-date>split[-]split[T]split[:]join[]addsuffix<time-now>] }}} />
</$let>
\end
\widget $my.edit-datetime(field:"datetime" htmlfield:"datetime-html" class:"" )
<$let date-field=<<field>> html-date=<<htmlfield>> >
<$edit-text field=<<html-date>> class=<<class>> 
   tag="input" type="datetime-local"
   inputActions=<<convert-html-date-time>>
/></$let>
\end

[AnthonyMuscio]

Thanks for sharing, The next challenge is to see if we can find a way to avoid the use of the html field, perhaps by converting the date-field into a variable containing the html format and somehow presenting that.

[kookma]

Yes, that is the challenge! One way is to create and delete the field. Another is to use temp tiddler. But I like your idea if a variable can hold the value without extra field/tiddler!

[kookma]

@AnthonyMuscio
Try this on https://tiddlywiki.com/

<$edit-text field="date-field"
   tag="input" type="date"
   inputActions="""<$action-setfield $field="date-field" $value={{{ [all[current]get[date-field]split[-]join[]addsuffix<now 0hh0mm0ss0XXX>] }}} />"""
/>

It seems TW allows to use single field to do the job!

@Leilei332
Your solution is good to go, as it keeps both format! no matter to use two fields. The above proof of concept shows using single field! I used abstract code! Yours is verbose and semantic and I like it.

[kookma]

Implentation using procedure and custom widgets.

Thank you.
This is a really useful implementation with new features in TW 5.3.x! Worth to be added as Tips and Tricks in talk.tiddlywiki.org

[AnthonyMuscio]

It seems TW allows to use single field to do the job!

Not exactly although close. By not setting the value in a html field the picker never shows the selected date, although you can set it.

We are almost there, the default parameter may help but the following do not work;

1. default=${ [all[current]get[date-field]format:date[YYYY-0MM-0DD]] }$
2. default={{{ [all[current]get[date-field]format:date[YYYY-0MM-0DD]] }}}

<$edit-text field="date-field"
   tag="input" type="date"
   inputActions="""<$action-setfield $field="date-field" $value={{{ [all[current]get[date-field]split[-]join[]addsuffix<now 0hh0mm0ss0XXX>] }}} />"""
   default=`${ [get[date-field]format:date[YYYY-0MM-0DD]] }$`
/>

If you look at the raw html generated you can see why a date is not displayed;

<input type="date" value="20231216172813830">

That is the value is not set to the default which is of the HTML form YYYY-0MM-0DD

Can this be fixed in the edit-text widget? or do we make a new or custom widget?

Once set this works <input type="date" value=${ [all[current]get[date-field]format:date[YYYY-0MM-0DD]] }$>

[AnthonyMuscio]

I found a "full" solution and present $set.date.v1

• I am working on v2 and will publish in talk.tiddlywiki
• Perhaps a form of this could be used as a core date picker, but I will enhance this further.
• By the way we must remember Eric has created a comprehensive edit-date widget.
• I wont close this yet because we would like something similar in the core?

\function display.date(date-field) [all[current]get<date-field>format:date[0DD/0MM/YYYY]]
\widget $set.date.v1(date-field:"date")
   \function display.date() [all[current]get<date-field>format:date[0DD/0MM/YYYY]] :else[[DD/MM/YYYY]]
   \function format.save.date() [all[current]get<date-field>split[-]join[]addsuffix<now [UTC]0hh0mm0ss0XXX>]
<style>.date-picker-button { width:1.6em; height:1.5em; padding:0; }</style>
<<display.date>>
<$edit-text field=<<date-field>> class=date-picker-button
   tag="input" type="date"
   inputActions="""<$action-setfield $field=<<date-field>> $value=<<format.save.date>> />"""
/>
\end $set.date.v1

* <$set.date.v1/>

• The trick is to display the date or empty date myself, and use CSS to hide the hide the input tags display.

[AnthonyMuscio]

In my next version of this as I was finalising it, I realised this will not convert the local date to UTC.

In talk.tiddlywiki I raised this topic Converting a date from local time to UTC and whilst I have being provided an answer it is not very elegant and I believe indicates a gap in out date formats that we can go from UTC to local, Interpret dates as UTC but not easily go from Local time, as given in a date picker , and save it in UTC.