0

我在phonegap项目上。我使用 jqm 框架。我有一个 web api 服务来将数据导入我的移动应用程序，在这里我想在这个项目上使用 Jquery Mobile Datepicker。

很快，我需要根据选择的日期获取数据。

例如，这里；http://jqueryui.com/datepicker/

有没有像让输入自动回传，让程序根据文本框值获取数据的用法？

我也在这里读过；http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

有什么例子可以让我检查吗？我用谷歌搜索，但看不到像我想的那样的例子。

谢谢。

4

1 回答 1

1

这是一个工作示例：http: //jsfiddle.net/Gajotres/r2CuF/

我从示例中删除了 JSON，因为它是私有数据。

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/ui/1.10.3/themes/smoothness/jquery-ui.css" />        
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>          
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>      
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
            </div>

            <div data-role="content">
                <p>Date: <input type="text" id="datepicker" /></p>                
            </div>
        </div>  
        <div data-role="page" id="info">
            <div data-theme="a" data-role="header">
                <h3>
                    Info
                </h3>
                <a href="#index" class="ui-btn-left">Back</a>
            </div>

            <div data-role="content">

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

Javascript：

$(document).on('pageinit', '#index', function(){       
    $( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd', 
        onSelect: function(date, instance) {
            selectedDate.date = date;
            $.mobile.changePage( "#info", {
                transition: "slide",
                reverse: false,
                changeHash: false
            });            
        } 
    });
});

$(document).on('pagebeforecreate', '#info', function(){    
    var json = $.parseJSON(dateHandler.json);
    $.each(json.Dates, function(id,date) {
        console.log(date.Date + '-' + selectedDate.date);
        var patt = new RegExp(selectedDate.date); 
        if(patt.test(date.Date)) {
            $('#info [data-role="content"]').append(JSON.stringify(date.Date)); 
        }
    });
});    

var selectedDate = {
    date : null
}

var dateHandler = {
    json : ''
}
于 2013-05-07T09:55:23.303 回答