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

Question

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 button to show the calendar, but I don't want them to be able to select a date.

Thanks Mike

Answer 1

this helps:

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

Answer 2

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"}' />

Answer 3

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

Answer 4

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"}'>

Answer 5

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.

Answer 6

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>