Webview datepicker using html5 date type form input

1,885 views
Skip to first unread message

EW

unread,
Jun 8, 2015, 4:55:30 PM6/8/15
to tas...@googlegroups.com
I was wondering if it would be possible to use the html5 date input to create a datepicker in a scene.

If so, would anybody have any examples of that.  Specifically, what would be the code to use and how would the input value get into a tasker variable.  

Or perhaps I am wishing for something that is not possible.

I have seen other threads on a datepicker in a scene, but the solutions are somewhat complex.  I am wondering whether there is an easier way.

Thank you very much for any help.

Juergen Gruen

unread,
Jun 8, 2015, 6:43:19 PM6/8/15
to tas...@googlegroups.com
Hi,

interesting idea. I tested this in a scene with a webview:
<!DOCTYPE html>
<html>
 
<body>
   
<input type="date">
 
</body>
</html>
Unfortunately, every time I show the scene and select the input field, tasker crashes. All types without an expected popup work fine (e.g. number).

In stock browser and chrome the HTML-Code works fine and opens the datepicker popup.

I do not have a device right now, so I can only test on a genymotion emulator, Android 5.1, Tasker 4.7.


Juergen.

EW

unread,
Jun 8, 2015, 10:33:13 PM6/8/15
to tas...@googlegroups.com
Neat!

I tried your code snip and I get a date popup control!

It is very slow (laggy) to select between days, though scrolling months is fast. Also I don't know how to pass values to/from tasker variables.

This is an promisingly start.

I am running CM12.1 (6/6 nightly) with the newly released tasker. Opera is the only browser on my phone.

EW

unread,
Jun 8, 2015, 10:41:10 PM6/8/15
to tas...@googlegroups.com
To add to my last post, I use `direct` mode, and if I don't select the `allow popups`checkbox, tasker crashes.

Juergen Gruen

unread,
Jun 9, 2015, 3:40:19 AM6/9/15
to tas...@googlegroups.com

`allow popups`checkbox
That's it! Works here also. But Tasker should not crash otherwise.

Example:
<!DOCTYPE html>
<html>
<body>
<p>Select date:</p>
<input type="date" id="picker">
<button onclick="getDate()">OK</button>
<script>
function getDate()
{
    tk
.setLocal("date", document.getElementById("picker").value);
    destroyScene
("DatePicker");
}
</script>
</body>
</html>

Option:
<input type="date" id="picker" oninput="getDate()">
Destroys the scene immediately after selecting a date (no button needed). Depends on what you want to do...

Task:
PickDate (3)
    A1: Show Scene [ Name:DatePicker Display As:Dialog, Dim Behind Heavy Horizontal Position:100 Vertical Position:100 Animation:System Show Exit Button:On Continue Task Immediately:Off ]
    A2: Flash [ Text:%date Long:Off ]


Thank you for bringing this up. That is a really cool feature! Other input types available: week, time, color, range, ...


Juergen.
Message has been deleted

EW

unread,
Jun 9, 2015, 6:42:37 AM6/9/15
to tas...@googlegroups.com
Thank you for the guidance. Works beautifully.

One final question, how can I pass an initial value into the date picker?

Juergen Gruen

unread,
Jun 9, 2015, 7:34:01 AM6/9/15
to tas...@googlegroups.com
<!DOCTYPE html>
<html>
<body onload="init()">

   
<p>Select date:</p>
   
<input type="date" id="picker">
   
<button onclick="getDate()">OK</button>
   
<script>

       
function init()
       
{
           
//format of %date has to be yyyy-MM-dd
            document
.getElementById("picker").value = tk.local("date");

EW

unread,
Jun 9, 2015, 8:46:07 AM6/9/15
to tas...@googlegroups.com
I will need to try when I have a little bit more time. However, in my quick initial look it appears that the variable value is set but it did not appear in the "drop dow"n nor was it set to the starting position of the popup.

EW

unread,
Jun 9, 2015, 12:56:01 PM6/9/15
to tas...@googlegroups.com
I need to do a bit more testing, but it appears that I can send the tasker variable into the date picker by using:

<input type="date" id="picker" value=%date oninput="getDate()">

Where %date is of the format yyyy-mm-dd

The init() function is not needed (nor did it seem to work for me).  The key is the value tag and just setting it to the tasker variable.

This is really neat stuff and much simpler and elegant than the other solutions that I have seen posted.  Thank you very much for your help and I hope this is something others can use.

If there are any "tweaks" I would love to her of them.


Reply all
Reply to author
Forward
0 new messages