Announcing Tiddly Date Input, a plugin that lets you edit dates easily

Hey everyone! :smiley:

Tiddly Date Input is a plugin that lets you easily edit dates in TiddlyWiki. It renders your browser’s native input element, which allows you to choose a date (and time) in a more user-friendly way than counting digits in a long string. It’s rendered in the tiddler view, so you don’t need to edit your tiddler to begin choosing a date and time.

The documented functionality is tested with integration tests using Playwright.

There is some other behavior, such as the tiddler= parameter, that should work well but hasn’t been tested yet.

Your feedback is welcome! :smiling_face:

As an added bonus, my Timeline plugin is already compatible with Tiddly Date Input. If you have both installed, your event pages will render their when fields with the Tiddly Date Input widget automatically.

Have you seen my TiddlyTools/Time/EditDate macro?

Also see TiddlyTools/Time/Info for my extensive set of time and date related add-ons.

-e

I had come across it in the past, thanks.

I wanted to avoid custom-made interfaces and rather expose the browser’s built-in interface for date-time selection. This is especially significant on mobile devices, where a familiar and standardized input makes quite a difference.

I’ll be looking at your macro for future inspiration, for sure!

While TiddlyTools/Time/EditDate can use TiddlyTools/Time/Calendar as an enhanced popup to select a date, it does not require any “custom-made interfaces”. If TiddlyTools/Time/Calendar is not present, it just uses the browser’s built-in interface for date or datetime-local input.

The only thing <<edit-date>> doesn’t do by default is to convert the brower’s system-formatted date string (YYYY-MM-DDThh:mm) to TiddlyWiki’s 17-digit format (YYYYMMDDhhmmssXXX). However, you can use the <<edit-date>>macro’s inputActions:"..." param to invoke a procedure that uses TiddlyTools/Time/ParseDate.js to do the conversion, like this:

\procedure convertDate() <$action-setfield when={{{ [<actionValue>!match[]parsedate[]] }}}/>
<<edit-date type:datetime-local confirm:no inputActions:"<<convertDate>>">>

Sure, it’s not as compact as your $edit-date widget, but it gets the job done… and parsedate[] has the added ability to apply TWCore date formatting codes to produce whatever date output you prefer, including handling UTC vs local time conversion.

-e

@copper99 A nice simple plugin

It would be helpful if it could invoke a parameter when the value changes, as TiddlyTools for TW v5.4.0 — Small Tools for Big Ideas!™ by @EricShulman

I have tried placing <$edit-date /> within a $keyboard widget to achieve the same result; this works, but it is a bit clunky!

Cheers, Rob

It is not a competition, there is room for multiple ways to get the same result. This plugin and TiddlyTools, so lets not try and squash each other’s contributions. No toes are being stepped on, that is why we have Android and iOS, Windows/Mac/Linux/ChromeOS, etc. Both methods have their merits :grinning_face:

1 Like

That looks nice!

For me, the standard UTC format is kind of painful. And it wastes space. It would be great if we could choose how the date is stored and read. A human readable format like 2026-05-16 where the date is in local time would be nearly ideal.

And a date picker is something that after a decade should be in the core. Especially if the base date storage is in UTC.

2 Likes

That was absolutely NOT my intent! As you’ve said: “there is room for multiple ways to get the same result”, and a comparison of alternatives does not imply a competition. It simply helps people to be aware of the different possibilities for addressing their own particular use-cases as well as suggesting ways in which each solution might be enhanced by incorporating ideas from each other.

For example, @copper99 's solution directly handles conversion to/from ISO8601 format (YYYY-MM-DDThh:mm), while my solution requires “extra steps” (using an inputActions handler and a custom parsedate[...] filter operator).

-e

1 Like