Как показать календарь Datebox в jquery-mobile при нажатии кнопки

Question

Я не хочу иметь текстовое поле даты, просто я хочу, чтобы всплывающее окно Datebox (календарь) появлялось только тогда, когда пользователь нажимает кнопку.

этот код, который я нашел..

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

но я не хочу текстовое поле. единственная кнопка, чтобы показать календарь

Answer 1

Это работает для вас?

• http://jsfiddle.net/UtFMs/

JS

$('#linkmodelink').live('click', function() {
    $('#linkmode').datebox('open');
});

HTML

<div data-role="fieldcontain">
    <label for="linkmode">Some Date</label>
    <input name="linkmode" type="date" data-role="datebox" id="linkmode" data-options='{"noButton": true}' />
</div>
<br />
<a href="#" id="linkmodelink" data-role="button">Click Here</a>

Я только что использовал пример "Открыть по ссылке" здесь:

• http://dev.jtsage.com/jQM-DateBox/demos/odd/open.html

и добавил data-role="button" к тегу привязки, заставляя jQM добавить разметку кнопки

Answer 2

Первое: спасибо, Филл! Мы с нетерпением ждем этого решения!

Но для тех, кто пытается использовать JQM v:1.1.0 и jQ v:1.7.1 и Datebox v:2.1, вам придется внести небольшие изменения в код (благодаря @ geralOE):

HTML:

    <input data-theme="c" name="dtFrom" id="dtFrom" type="date" data-role="datebox"  data-options='{"mode": "calbox", "afterToday": true, "hideInput": true }' style="width: 30px" />
    <input name="dtTo" id="dtTo" type="date" data-role="datebox" data-options='{"mode": "calbox", "afterToday": true, "hideInput": true }' />                     

<div data-role="controlgroup" data-type="horizontal" id="btnCalendar">
    <a href="#" id="From" data-role="button">From</a>
    <a href="#" id="To" data-role="button">To</a>
</div>
​

JS:

$('#btnCalendar').on("click", "a", function() {
    $thisCalendar = $(this).attr("id");
    $('#dt' + $thisCalendar).datebox('open');
});

Вы можете проверить его по адресу: http://jsfiddle.net/geralOE/nAugy/2/ (мы обновим его, чтобы реализовать некоторые другие функции, такие как запись даты на кнопках от и до).

Также учтите, чтоlive"устарело с 1.7, поэтому вы должны использовать"delegate"(который, в свою очередь, будет устаревшим, поэтому готовьтесь с"on".