List tiddlers based on the selected date of creation

#1

Inspired by this discussion and solution by @etardiff in discord, I tried to create a Tiddlers list based on the dates selected.

\define startDate()
{{!!startdate}}
\end
\define endDate()
{{!!enddate}}
\end

<$edit-text tiddler=<<currentTiddler>> field="startdate" type="date" class="tc-edit-texteditor" placeholder="Set your date" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes" fromInputValue="[parsedate[ISO]]" toInputValue="[format:date[YYYY-0MM-0DD]]"/>

<$edit-text tiddler=<<currentTiddler>> field="enddate" type="date" class="tc-edit-texteditor" placeholder="Set your date" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes" fromInputValue="[parsedate[ISO]]" toInputValue="[format:date[YYYY-0MM-0DD]]"/>

<<list-links "[all[tiddlers]] :filter[get[created]compare:date:gteq<<startDate>>compare:date:lteq<<endDate>>] +[sort[created]limit[100]]">>

Code for the date picker I took from this example.
Date is not getting transfered to the filter. What’s wrong in this filter ? Here is the demo link.

#2

Hi @arunnbabu81

AFAICT official edit-text widget doesn’t provide fromInputValue nor toInputValue attributes, so I’ll take it that you use custom code for these.

Anyway, in your list-links filter you use a wrong syntax for macro/variable reference: in a filter you should use single angle brackets, something like this:

<<list-links "[all[tiddlers]] :filter[get[created]compare:date:gteq<startDate>compare:date:lteq<endDate>] +[sort[created]limit[100]]">>

Good luck and have fun!

Fred

#3

That part of the code, I took from this demo wiki.. I will remove it from the code if not needed.

Still its not working. Here is the modified code.

\define startDate()
{{!!startdate}}
\end
\define endDate()
{{!!enddate}}
\end

<$edit-text tiddler=<<currentTiddler>> field="startdate" type="date" class="tc-edit-texteditor" placeholder="Set your date" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>

<$edit-text tiddler=<<currentTiddler>> field="enddate" type="date" class="tc-edit-texteditor" placeholder="Set your date" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>

<<list-links "[all[tiddlers]] :filter[get[created]compare:date:gteq<startDate>compare:date:lteq<endDate>] +[sort[created]limit[100]]">>

Here is the demo.

Any idea why ?

#4

In your current demo the date picker fills the fields with ISO-formatted values (YYYY-MM-DD) and these can not be directly compared with the compare:date filter operator. You’d have to parse and convert startdate and enddate content before comparing them with TW native dates like those in created field.

In the wiki where you found the example code, the $:/core/modules/editor/factory.js shadow tiddler contains code for toInputValue and fromInputValue attributes, which is not found in your wiki. This explains why the original code doesn’t work in your wiki.

I guess Eric Shulman’s time and date operators could solve the conversion problem, but I won’t be able to help you further as I don’t know them enough.

Good luck and have fun!

Fred

#5

Try this:

List tiddlers
<$select field="sortby" default="created">
   <option>created</option><option>modified</option>
</$select>
between: <$edit-text field="startdate" type="date"/>
    and: <$edit-text field="enddate"   type="date"/>

<$let sortby={{!!sortby}}
   startDate={{{ [{!!startdate}parsedate[]] }}}
     endDate={{{ [{!!enddate}parsedate[]] }}}>
<$list filter="[all[tiddlers]!is[system]]
               :filter[get<sortby>compare:date:gteq<startDate>compare:date:lteq<endDate>]
               +[sort<sortby>limit[100]]">
   <div><$view field=<<sortby>>/> - <$link/></div>
</$list>
</$let>

Notes:

  • I added a $select widget to choose between created or modified field and removed all unnecessary parameters from the $edit-text widgets
  • The $let widget gets the input values and uses my TiddlyTools parsedate[] filter operator to convert the ISO-formatted date strings to TWCore 17-digit UTC system datetime values. You will need to install https://tiddlytools.com/#TiddlyTools%2FTime%2FParseDate to add the parsedate[] filter operator.
  • I added !is[system] to the filter and use a $list widget instead of a <<list-links>> macro. This permits greater control over the list output to include the created/modified date along with each matching tiddler link instead of just plain bullet items with tiddler links.

enjoy,
-e

3 Likes
#6

@EricShulman Thank you once again for your help. I am experimenting with it to add more features. Some of my ideas are - add a “Today” and “Yesterday” button to list tiddlers created or modified today / yesterday. I need to think of other ideas as well and see other similar implementations.

#7

Hello @EricShulman

how do I style / set the color of the icon?

grafik

Put background-color to red to make it visible:
grafik

Thanks, Stefan

#8

Try something like:

<style>
::-webkit-calendar-picker-indicator { color-scheme: dark; }
</style>
#9

Thanks @EricShulman - works perfect!

#10

Inspired by @Eric:

colorized / hover styling:

grafik
grafik1237Ă—223 63.3 KB 

<style>
::-webkit-calendar-picker-indicator { 
   filter: invert(75%) sepia(60%) saturate(3) hue-rotate(3deg) brightness(100%) contrast(100%);
   margin: 0 6px 0 6px; 
   cursor: pointer;}

::-webkit-calendar-picker-indicator:hover { 
   filter: invert(75%) sepia(60%) saturate(3) hue-rotate(50deg) brightness(100%) contrast(100%); }
</style>