CODEWITHSUNDEEP
androidjqueryjquery-mobilejquery-pluginscordova
Naresh
Naresh

Reputation: 143

Phonegap Android: DateTime Picker using jquery mobile is not working?

Hi friends am new to mobile app developing(using jquery mobile and phonegap). In my project i have a task where i need set a date-time picker. i set it using some code but its not working. pls help me how to do it using jquery mobile.Am i need to any plugins or js. pls help me Thanks in advance. 

<!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 file: // Main 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'))));
    });
});

});

But Its not working.. tell me any other ideas to do it using jquery mobile

Upvotes: 0

Views: 2443

Answers (2)

Suhas Gosavi
Suhas Gosavi

Reputation: 2170

simple datetimepicker for jQuery mobile.

try this solution:

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

Upvotes: 1

Hazem Hagrass
Hazem Hagrass

Reputation: 9808

I think you forgot to update your access policy to allow all urls, update your config.xml file with the following code:

<access origin="*" />

Upvotes: 0

Related Questions