Phonegap Android：使用 jquery mobile 的 DateTime Picker 不起作用？答案

【问题标题】：Phonegap Android: DateTime Picker using jquery mobile is not working?Phonegap Android：使用 jquery mobile 的 DateTime Picker 不起作用？
【发布时间】：2014-01-29 09:55:29
【问题描述】：

您好，朋友们是移动应用程序开发的新手（使用 jquery mobile 和 phonegap）。在我的项目中，我有一个需要设置日期时间选择器的任务。我使用一些代码设置它，但它不起作用。请帮助我如何使用jquery mobile。我需要任何插件或js。请帮助我提前谢谢。

<!DOCTYPE html>
<html>
 <head>
  <title>Zeus Palace Hotel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <link rel="stylesheet" href="//dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" /> 
  <link rel="stylesheet" href="css/gi-mobile.css" />

  <script type="text/javascript" src="//code.jquery.com/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 </head>
 <body>
  <section data-role="page" id="home" data-theme="b">
   <header data-role="header" class="header">
    <figure class="hotelBanner"></figure>
   </header>
   <section data-role="content" class="ui-grid-a main cf">
    <form id="step1" action ="#">
     <label for="checkinDate">Check-in:</label>
     <input name="checkinDate" id="checkinDate" type="date" data-role="datebox"
   data-options='{"mode": "calbox", "afterToday": true}' />
     <label for="checkoutDate">Check-out:</label>
     <input name="checkoutDate" id="checkoutDate" type="date" data-role="datebox"
   data-options='{"mode": "calbox", "afterToday": true}' />
    <input type="submit" id="btnsubmit" value="Next >>" />
    </form>
    <p>Number of Nights: <span id="numNights"></span></p>
   </section>
   <footer data-role="footer" class="footer">
   </footer>
  </section>

  <script type="text/javascript" src="//dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
  <script>window.jQuery.fn.validate || document.write('<script src="js/libs/jquery.mobile.datebox.min.js"><\/script>')</script>
   <script type="text/javascript" src="//dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script>
  <script>window.jQuery.fn.validate || document.write('<script src="js/libs/jquery.mobile.datebox.i8n.en.js"><\/script>')</script>

  <script defer src="js/master.js"></script>

 </body>
</html>

JS 文件： // 主 JS //

jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    'dateFormat': 'mm/dd/YYYY',
    'headerFormat': 'mm/dd/YYYY',
});

$(document).ready(function() {
    $('a.ui-btn .ui-icon').removeClass('ui-icon-grid');
    $('a.ui-btn .ui-icon').addClass('ui-icon-arrow-d');
function parseDate(elem) {

    return elem.data('datebox').theDate;
}

function daydiff(checkinDate, checkoutDate) {

    return (checkoutDate-checkinDate)/(1000*60*60*24)
}
$('#checkoutDate, #checkinDate').live('change', function() {
    $('#numNights').each(function() {
        $(this).text(daydiff(parseDate($('#checkinDate')), parseDate($('#checkoutDate'))));
    });
});

});

但它不起作用..告诉我使用 jquery mobile 的任何其他想法

【问题讨论】：

标签： android jquery jquery-mobile jquery-plugins cordova

【解决方案1】：

用于 jQuery mobile 的简单日期时间选择器。

试试这个解决方案：

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8" />
    <meta content="text/html; charset=windows-1255" http-equiv="content-type">
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothnes/jquery-ui.css" />   
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

 <script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>

</head> 
<body>

   <div id="page" data-role="page" data-theme="c">
       <div id="header" data-role="header">
          <h1>Play</h1>
            <p>Date: </p>     
               <label for="date">Select Date Range:</label>
               <input type="date" name="date" id="datepicker" value=""  />

</body>
</html>

【讨论】：

它对我有用。再次检查。你也可以参考这个-demos.jquerymobile.com/1.0a4.1/experiments/ui-datepicker
参考可用插件-jquery4u.com/plugins/10-jquery-time-picker-plugins
您可能想在手机上尝试一下。我的也不能在我的模拟器上运行，但是当我在手机上尝试时，它运行良好。

【解决方案2】：

我认为您忘记更新访问策略以允许所有 url，使用以下代码更新您的 config.xml 文件：

<access origin="*" />

【讨论】：

jquery插件也需要添加访问策略啊
此访问策略将允许您项目中的所有 url，只是为了确保您的问题不是策略问题