Is it possible to import (make use of) pre-existing Javascript-based date pickers?
I had found 2 that I was interested in, but do not know how / where to begin…
https://jqueryui.com/datepicker/
https://bootstrap-datepicker.readthedocs.org/en/latest/
I have added the JQueryUI’s <link>'s and <script>'s into the document’s Head HTML. But I have no idea how to add an <input> tag. Taken from the site’s source:
<p>Date: <input type="text" id="datepicker"></p>
I'm not really a fan of this idea. Personally, I'd probably make my own date picker before adding jQuery. That's a lot of weight. It certainly is a lot more work to make your own date picker though. Perhaps a "Vanilla JavaScript" solution is better. But... eh... that's not your question here.
(Although, the one you picked seems to require Bootstrap, so it might not work anyway.)
So, you'd just edit the "innerHTML" of an element and then add the code.
The closest example I have is here...
When you click an element, a circular icon (with a pencil) appears. You can click that to add your own HTML code. In the "Filters" example, the values from the "range" sliders determine the value for the filters.
In the documentation for Datepicker, it says:
Call the datepicker via javascript:
$('.datepicker').datepicker();
So you need to do this ‘On Scene Load’ where you have the datepicker with an id of datepicker:
$('#datepicker').datepicker();
In Hype, it looks like this:
I recommend also adding: autocomplete="off" so you don’t get random dates suggestion over your datepicker.
datepicker-bootstrap.hype.zip (13.9 KB)
@Daniel, thanks man - great demo of this working!
I have been able to transpose the same configuration within my existing Hype file. Once set in the text box, I have another button on my “form” which I intend to use to gather all variables set and push it to a PHP file.
How I do programatically get the date (value) selected?
I have tried:
alert(hypeDocument.getElementById('datepicker').innerText);
Returns a blank popup.
And also from the enclosing Rectangle (I have named “datePlayed1”):
alert(hypeDocument.getElementById('datePlayed1').innerText);
Returns “Played”, which is the label before the text box.
Finally, adding the code below inside by button press function:
window.datePlayed = $('.datepicker').datepicker('getDate'); alert(window.datePlayed);
Which returns: “[object Object]”
I'm not sure what you mean by selected? Can you be more specific?
You can retrieve the date from the form by using:
document.getElementById("datepicker").value
Thanks again, really helpful.
I did discover slightly different code for the same purpose from the documentation:
$('#datepicker').datepicker('getDate').toLocaleDateString();
I no doubt expect 1 way to have greater efficiency…
