Search code examples
datetimejquery-mobiledatebox

jquerymobile datebox for label clicks

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.