Phonegap Android：使用jquery mobile的DateTime Picker无法正常工作？

Question

嗨，朋友是移动应用开发的新手（使用jquery mobile和phonegap）。 在我的项目中，我有一个需要设置日期时间选择器的任务。 我使用一些代码设置了它，但是它不起作用。 请帮助我如何使用jquery mobile.am我需要任何插件或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

Answer 1

jQuery mobile的简单datetimepicker。

试试这个解决方案：

<!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> 

Answer 2

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

<access origin="*" />