как показать календарь Datebox в jquery-mobile при нажатии кнопки - PullRequest
Новая
       38

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

1 голос
/ 16 ноября 2011

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

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

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

но я не хочу текстовое поле. единственная кнопка для отображения календаря

Ответы [ 2 ]

2 голосов
/ 16 ноября 2011

Это у вас работает?

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>

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

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

0 голосов
/ 24 июля 2012

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

Но для тех, кто пытается использовать 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');
});

1013 *

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

Кроме того, примите во внимание, что «live» устарело с 1,7, поэтому вы должны использовать «delegate» (что, в свою очередь, будет устаревшим, поэтому подготовьтесь с «on».

...