Is there a way to open a date-picker via a button?

[si]

I am trying to re-create the functionality from Projectify which enables you to set a due date for a task by clicking a tag-pill style button. See here for a demo - you can click schedule and then the text of the button gets replaced with the scheduled date.

I have my code for the button (see below), but I need to create a tiddler containing a date-picker to be activated by the reveal widget. Unfortunately it seems that the date-picker plugin doesn't work like this - it creates an icon for you to click, rather than just displaying the date-picker to use where you wish.

I also tried copying some of the code from Projectify, but I ran into at least two problems:

• The date-picker widget that Projectify has no way to change the field that stores the date, and I need to create two separate buttons (for due-date and threshold).
• The styling got all messed up (see image).

Anyway I'm wondering if there is any easy way to get what I want, or am I destined to have to play with javascript and css?

<hr>

Here is the code I used for the button, if relevant. I was hoping to just be able to add a date-picker to the tiddler $:/si/entry-method/date-picker and then just transclude it in:

\define due-button()
    <span class="tc-tag-list-item">
        <$vars stateTiddler=<<qualify "$:/state/due-button">> tag-value={{{ [{!!due}!is[blank]else[Schedule]] }}}>
            <$macrocall $name="tag-pill-body" tag=<<tag-value>> colour="#eee8d5" palette={{$:/palette}} element-tag="""$button""" element-attributes="""popup=<<stateTiddler>> tag='span'"""/>  
            <$reveal state=<<stateTiddler>> type="popup" position="below" animate="no" class="tc-drop-down">
                {{||$:/si/entry-method/date-picker}}
            </$reveal>
        </$vars>
    </span>
\end
<$list filter="[all[current]tag[Task]]">
<<due-button>>
</$list>

[TW Tones]

Here is a really simple answer;

<$edit-text field="journal-date" type=date/>

However I would be inclined to save this to a temporary field and using the edit text widget actions convert it to a tiddlywiki date serial number.

Regards

Tones

[TW Tones]

Here is an example,

In this case you provide the macro with a date fieldname (default date) and is stores the selected value in html to an "-input" field, it retains this to keep the date displayed, however simultaneously it generates a date serial number (at noon on the selected day).

Now the date serial can be used with sort, days operator, view widget and more.

\define pick-date(fieldname:"date")

<$set name=date-fieldname value="$fieldname$">

<$set name=date-input-field value={{{ [<date-fieldname>addsuffix[-input]] }}} >

<$edit-text field=<<date-input-field>> type="date" inputActions=<<set-date-actions>>/>

</$set></$set>

\end

\define set-date-actions()

<$action-setfield $tiddler=<<currentTiddler>> $field=<<date-fieldname>> $value={{{ [all[current]get<date-input-field>split[-]join[]addsuffix[120000000]] }}}/>

\end

<<pick-date journal-date>> <$view field="journal-date" format="relativedate"/>

Here is a pick time macro;

\define pick-time(fieldname:"time")

<$set name=date-fieldname value="$fieldname$">

<$set name=date-input-field value={{{ [<date-fieldname>addsuffix[-input]] }}} >

<$edit-text field=<<date-input-field>> type="time" inputActions=<<set-date-actions>>/>

</$set></$set>

\end

\define set-date-actions()

<$action-setfield $tiddler=<<currentTiddler>> $field=<<date-fieldname>> $value={{{ [all[current]get<date-input-field>] }}}/>

\end

<<pick-time journal-time>> <$view field="journal-time" format="time"/>

Tones

[si]

Thanks for the reply @Tones, but this isn't quite what I am asking.

I'm trying to get a tiddler that contains only the calendar for picking a date. Most solutions, including the one that you offer, include a button/field to be clicked on in order to open the date picker. I want to use my own custom button.

[TW Tones]

have you looked in the details here? http://tiddlytools.com/timer.html

tones

[Mohammad Rahmani]

On Mon, Apr 26, 2021 at 7:00 PM si <matthew...@gmail.com> wrote:

Thanks for the reply @Tones, but this isn't quite what I am asking.

I'm trying to get a tiddler that contains only the calendar for picking a date. Most solutions, including the one that you offer, include a button/field to be clicked on in order to open the date picker. I want to use my own custom button.

As Tones reply above the http://tiddlytools.com/timer.html from Eric Shulman is among the best!

Drag and drop two tiddlers in to your wiki

• TiddlyTools/Time/SidebarCalendar
• TiddlyTools/Time/Calendar

 

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/177fa357-82e1-4efd-8119-7ad8d8f07386n%40googlegroups.com.

[si]

Thanks. The TiddlyTools calendar widget seems mostly designed for adding events, rather than setting a date field, however Eric did include a date-picker widget: http://tiddlytools.com/timer.html#TiddlyTools%2FTime%2FEditDate. This has the same problem as with other date-pickers, but since it's all WikiText I might have an easier time of extracting only the component that I need.

Thanks for your help.