jquerymobile datebox for label clicks
-
28-06-2021 - |
Question
The current jquerymobile implementation of datebox (or some plugin like jtsage) pops up a datebox for text input. Is there anyway to extend it to cases where I want to show the datebox when the user click a label (or any random text)?
For example, in my case http://jsfiddle.net/sonyisme/UEmh3/1/, I want to show the datebox when users click on the text "8/1/2012-8/7/2012".
Solution
Sure, datebox has a open
method
So you can do something like
$('#myLabel').on('click', function() {
$('#mydate').datebox('open');
});
Edit:
OK so you don't want a input displayed at all, as I mentioned in my comment I did something like that once with the Datebox
plugin, what I needed to do was wrap it in a div that I just hid from the viewport by setting it's z-index to -1. The thing is the z-index
had to be changed in code (basically after the plugin was initialized). Here's some example code
HTML
<div class="hdnDateBoxCnt width25Percent">
<input type="date" name="myDateBox" id="myDateBox" data-role="datebox"
data-options='{"mode":"calbox", "disableManualInput": true, "noButtonFocusMode": true}' />
</div>
CSS
.hdnDateBoxCnt
{
position:absolute;
/* z index needs to be set in code */
}
JS
$('.hdnDateBoxCnt').css('z-index', '-1');
Just a note I used the code/markup with a earlier version of datebox
so the data-options
may have changed a bit. I have since switched to using the MobiScroll plugin.