Mobiscroll sets input to readonly even when not displayed/shown?

Question

I display two dates in a input-field. When the user clicks on a valid date, mobiscroll should display the date and allow it to be changed.

When the user sets the cursor outside one of the dates (by clicking just before or after one of the dates), the input field should work as expected, allowing the user to change the date in-place or typing something.

Mobiscroll is initialized with:

$('#input').mobiscroll().date({
    showOnTap: false,
    showOnFocus: false
});

and then invoked with

$('#input').mobiscroll('setDate', theClickedDate, false);
$('#input').mobiscroll('option', {onSelect: dateChanged});              
$('#input').mobiscroll('show');

when the "circumstances" are right (i.e. a valid date clicked).

This works when a date is clicked, mobiscroll is displayed with the date. But a click "outside" one of the dates does not set the cursor to allow editing. The input acts like it is 'readonly'.

Answer 1

Pasted from Mobiscroll support team:
Mobiscroll sets the input field to readonly, because otherwise, when it receives focus, the virtual keyboard will also pop up. I think the best solution would be to not initialize mobiscroll on the input field (as you are not using the show and fill functionality anyway), you can initialize it on an empty div. If you use bubble positioning, you should also pass the input element in the anchor setting:

$('#mydiv').mobiscroll().date({
display: 'bubble',
anchor: $('#input')
});

$('#mydiv').mobiscroll('setDate', theClickedDate, false);
$('#mydiv').mobiscroll('option', {onSelect: dateChanged}); 
$('#mydiv').mobiscroll('show');