CODEWITHSUNDEEP
jqueryhtmljquery-mobiledatepicker
David Faizulaev
David Faizulaev

Reputation: 5721

JQuery mobile datepicker doesn't work

I'm trying to use a standard datepicker for HTML, JQuery Mobile. But for some reason any version i try doesn't work. I think it might be something with the stylesheet I have selected or the JQuery Mobile links.

Here is the code:

 <!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="/resources/demos/style.css" /> 
     <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />   
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
       <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">           </script>
         <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest /jqm-datebox.core.min.js"></script>

        <link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
          <script src="jquery.ui.datepicker.mobile.js"></script>

    <script>
      $( document ).bind( "mobileinit", function(){
        .mobile.page.prototype.options.degradeInputs.date = true;});</script>

   <style>
    #activ  { position : absolute ; top : 40px ; right: 100px; background-color:#33CCFF;     text-align:justify; }    
   .container { border:2px solid #ccc; width:150px; height: 100px; overflow-y: scroll;    direction: rtl; }
  .container2 { width:100px; height: 70px; direction: rtl; }
  </style>
    <title></title>

     </head>
    <body>


      <div id="page" data-role="page" data-theme="c">

    <div id="header" data-role="header">

     <h1>Play</h1>


  <!--end of popup window-->
        <p>Date: </p>           <!---need to find jquery mobile datepicker-->
                    <label for="date">Select Date Range:</label>
        <input type="date" name="date" id="date" value=""  />

I think I'm overusing the JQuery links.... Thanks in advance.

Upvotes: 0

Views: 7496

Answers (2)

The Dark Knight
The Dark Knight

Reputation: 5585

This is quite easy. First you were using a lot of links, which might have caused conflict.

Further more , the link jquery.ui.datepicker.mobile.css is incorrect , there is no protocol(http/https) defined here. Instead use https://code.google.com/p/eeplat-social-api/source/browse/trunk/WebContent/mobile/css/jquery.ui.datepicker.mobile.css?r=32

Next see my code :

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.google.com/p/eeplat-social-api/source/browse/trunk/WebContent/mobile/css/jquery.ui.datepicker.mobile.css?r=32" />
     <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>
<meta charset=utf-8 />
<title>JS Bin</title>
</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" class="pickMe" value=""  />
</body>
</html>

JS :

$(function() {
$('. pickMe').datepicker();
});

Here, you can see the solution by running with js : http://jsbin.com/oqivax/1/edit

Upvotes: 1

user2232273
user2232273

Reputation: 4964

Your code is too confused. You don't need all those links to use a 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

Related Questions