Событие с измененной датой для средства выбора даты JQueryMobile

Я использую Datebox для JQueryMobile, но я не могу найти какой-либо способ подключиться к событию изменения даты (возможно, упускает что-то очевидное!) Я использую встроенный календарь, поэтому нет доступного текстового поля, если это делает разница.

Есть ли способ вызвать событие, когда я выбираю дату в календаре? Спасибо бекки

Источник

1 ответ

Решение

Решение

Этот пример сделан на основе DateBox2, скажите, используете ли вы более старую версию.

Рабочий пример: http://jsfiddle.net/Gajotres/ktbcP/15/

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />       
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>        
    <script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/<jqm-date></jqm-date>box.core.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>      
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <label for="mydate">Some Date</label>
            <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>

Javascript:

$(document).on('pageinit', '#index', function(){ 
    $('#mydate').bind('datebox', function(e, p) {
        if ( p.method === 'set' ) {
            e.stopImmediatePropagation()
            alert('Changed');
        }
    });
});

объяснение

DateBox2 имеет несколько функций обратного вызова, и set является одной из них. Что вам нужно сделать, это связать событие datebox с полем ввода, например так:

$('#mydate').bind('datebox', function(e, p) {
    if ( p.method === 'set' ) {
        e.stopImmediatePropagation()
        alert('Changed');
    }
});

И просто проверьте подходящий метод. Их официальная документация содержит полный список методов.

К сожалению, событие, которое обнаруживает изменение даты вручную, не существует, если это то, что вам нужно.

Источник
Другие вопросы по тегам