JQuery Mobile Datebox - How to remove the input box and show only the inline calendar?

Good Day all,

I want to use datepicker to show the user particular dates that an event falls on. My game plan is to use datepicker as inline, show that it always shows and to pass the high lighted dates to it. My question is, how can I hide the input box, so the user only sees the calendar? Alternatively, the user could click a bu开发者_JS百科tton to show the calendar, but I don't want them to be able to select a date.

Thanks Mike

this helps:

.ui-input-datebox { width: 40px; border: 0; background: transparent; padding: 0;margin: 0; box-shadow: none;}
.ui-input-datebox input {display: none;}

with data-option "hideInput": "true" (see http://dev.jtsage.com/jQM-DateBox/demos/fullopt.html and then the "Display Options"-Accordion-Tab)

<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "hideInput": "true"}' />

Apparently I didn't get around to documenting this one - useInlineHideInput: true should do it. I think it's dependent on useInline being true as well.

It can be done like that:

HTML

<a href="#" id="date-trigger" data-role="button" data-icon="grid" data-iconpos="noText" >28/08/2013</a>

<input data-role="datebox" data-options='{"mode": "calbox", "hideInput": "true", "noButton": "true"}' name="date" id="date" type="date" value="28/08/2013">

JS

$('#date-trigger').on( 'click', function(){
    $('#date').datebox('open');
});

Using Datebox2, see http://dev.jtsage.com/jQM-DateBox2/demos/opt/open.html.

David

Here is the good answer.

<input id="date-id" name="date" type="text" data-role="datebox" data-options='{"mode":"calbox", "hideInput": "true", "hideButton": "true", "useInline": "true"}'>

You can hide the input box using following code:

<div style="display: none;">
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "calTodayButton": true}'>
</div>