TiddlyTools/Time/EditDate

1

Spurred on by your Tiddly Date Input widget and the discussions here, I’ve made some enhancements to TiddlyTools/Time/EditDate:

  • If TiddlyTools/Time/ParseDate.js is installed, then TiddlyTools/Time/EditDate now automatically uses it to convert to/from ISO8601 (‘YYYY-MM-DDThh:mm’) format when type:date or type:datetime-local is specified. This eliminates the need for inputActions=... to perform the “extra steps”. If TiddlyTools/Time/ParseDate.js is NOT installed, then type:date and type:datetime-local fallback to outputing ISO8601 format as before.

  • When multiple instances of <<edit-date>> are used to target the same tiddler field or index, they are now properly “synced” when changes occur.

  • When using the TiddlyTools/Time/Calendar popup to select a date, it now uses zeros (instead of the current time) to pad any hh:mm:ss.XXXformatting. This eliminates the need for local vs UTC timezone offset handling (which sometimes produced “off by 1 day” errors in the resulting date).

As an added bonus, even though these enhancements added some code I was actually able to reduce the overall add-on size by almost 600 bytes! (mostly by using better, more compact wikitext code patterns and cleaning up the TiddlyTools/Time/EditText/Info documentation tiddler).

enjoy,
-e

2

Isn’t it better to use 12:00 time instead if 00:00 to avoid timezone issue?

3

It all depends on what you want to do with the stored date output.

If you specify format:"YYYY0MM0DD", the <<edit-date>> macro only outputs the truncated date portion, so the time value is irrelevant. In addition, when using type:calendar (TiddlyTools/Time/Calendar) or type:date(ISO8601) to select a date, those interfaces produce “date only” results, so again, the time value is irrelevant.

Of course, if you use type:datetime-local, then format:"YYYY0MM0DD0hh0mm0ss0XXX"produces a full 17-digit datetime result that is meaningful, but since datetime-local is, by definition, meant to be a local time, timezone offsets are still irrelevant.

The only issue is if you use type:calendar or type:date but specify a 17-digit timestamp using format:YYYY0MM0DD0hh0mm0ss0XXX. However, since those interfaces produce “date only” results, the default padding of “000000000” is generally OK unless you intend to use the stored result in a timezone sensitive calculation. If that is the case, then you can specify format="YYYY0MM0DD12000000"to explicitly produce a full timestamp that avoid the “off by 1 day” timezone issues.

-e

4

Thank you Eric for the detail explanation, I know understand the rationales and I have learn that I can input the time directle in the format option (format="YYYY0MM0DD12000000" )

5

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

I’ve had a pure WikiText widget for a while similar to the one by TW_Tones which renders a native browser date input. This relies on Eric’s base macro of $:/TiddlyTools/Time/EditDate being available

These are the defaults:

<<edit-date-native
     field:"date"
     type:"date"
     class:""
     confirm:"no">>

Personally, I almost always call it with just <<edit-date-native field:"FIELDNAME">>

It creates a temp tiddler called $:/temp/edit-date/<title>/<field>.

How I use it

The main ones I change are field and type (I just use date and button).

Another way I couple it is with entry forms like this:

form example
form example473×288 32.7 KB

Code for work hours tracker 
<$let 
  data-tiddler="$:/yan/data/work-hours-tracker"
  temp-tiddler="$:/temp/work-hours-input"
>

! Record time worked

<$tiddler tiddler=<<temp-tiddler>>>

<form>

<label>''Date''
<<edit-date-native field:"date">>
</label>

<label>''Hours''
<$edit-text field="hours" placeholder="e.g. 1.5" size="10"/>
</label>

<$button disabled={{{ [<currentTiddler>has[date]has[hours]then[no]else[yes]] }}}>
Add entry
<$action-setfield $tiddler=<<data-tiddler>> $index={{!!date}} $value={{!!hours}} />
<$action-setfield $tiddler=<<temp-tiddler>> date="" hours="" />
</$button>

</form>

</$tiddler>

Persistently showing the date is a bit more involved, here is an example from my media library:

persistent

<th>Started</th>
<td><$view field="date started" format="date" template="DD mmm YYYY" /><<edit-date-native field:"date started" type:"button" class:"tc-btn-invisible">></td>

To add it to your wiki

  1. Get $:/TiddlyTools/Time/EditDate from Eric’s website
  2. Copy and paste the below to a new tiddler, tag it with $:/tags/Global/View.
WikiText code 
\procedure clear-hyphens()
<$action-setfield
    $tiddler=<<targetTiddler>>
    $field=<<targetField>>
    $value={{{ [<actionValue>search-replace:g[-],[]] }}} />
\end

\procedure edit-date-native(field, type:"date", class:"", confirm:"no")
<$let
    targetTiddler=<<currentTiddler>>
    targetField=<<field>>
    tempTitle={{{ [[$:/temp/edit-date/]addsuffix<currentTiddler>addsuffix[/]addsuffix<field>] }}}
    safeId={{{ [<field>search-replace:g[ ],[-]] }}}
>
  <$tiddler tiddler=<<tempTitle>>>
    <$transclude $variable="edit-date"
        format="YYYY0MM0DD"
        field="text"
        id=<<safeId>>
        type=<<type>>
        class=<<class>>
        confirm=<<confirm>>
        inputActions=<<clear-hyphens>>
    />
  </$tiddler>
</$let>
\end

The id field is so you don’t get problems when more than one is on the page, if I remember right. Wish I’d commented it.