JQuery Mobile Datebox - Как убрать поле ввода и показать только встроенный календарь?

Question

Добрый день всем,

Я хочу использовать указатель даты, чтобы показать пользователю конкретные даты, на которые падает событие. Мой план игры состоит в том, чтобы использовать указатель даты как встроенный, показывать, что он всегда показывает, и передавать ему яркие даты. У меня вопрос, как я могу скрыть поле ввода, чтобы пользователь видел только календарь? Кроме того, пользователь может нажать кнопку, чтобы показать календарь, но я не хочу, чтобы он мог выбрать дату.

Спасибо Mike

Answer 1

это помогает:

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

Answer 2

с параметром данных "hideInput": "true" (см. http://dev.jtsage.com/jQM-DateBox/demos/fullopt.html, а затем вкладка "Параметры отображения" -Аккордеон-вкладка)

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

Answer 3

Вот хороший ответ.

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

Answer 4

Это можно сделать так:

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');
});

Использование Datebox2, см. http://dev.jtsage.com/jQM-DateBox2/demos/opt/open.html.

David

Answer 5

Очевидно, я не удосужился документировать это - useInlineHideInput: true должно сделать это.Я думаю, что это зависит от истинности useInline.

Answer 6

Вы можете скрыть поле ввода, используя следующий код:

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