JQuery 移动日期选择器不起作用答案

【问题标题】：JQuery mobile datepicker doesn't workJQuery 移动日期选择器不起作用
【发布时间】：2013-08-16 16:17:38
【问题描述】：

我正在尝试使用标准的 HTML 日期选择器 JQuery Mobile。但由于某种原因，我尝试的任何版本都不起作用。我认为这可能与我选择的样式表或 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="/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=""  />

我认为我过度使用了 JQuery 链接.... 提前致谢。

【问题讨论】：

标签： jquery html jquery-mobile datepicker

【解决方案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>

【讨论】：

【解决方案2】：

这很容易。首先，您使用了很多链接，这可能会导致冲突。

另外，链接jquery.ui.datepicker.mobile.css不正确，这里没有定义protocol(http/https)。而是使用https://code.google.com/p/eeplat-social-api/source/browse/trunk/WebContent/mobile/css/jquery.ui.datepicker.mobile.css?r=32

接下来看我的代码：

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();
});

在这里，您可以通过running with js 看到解决方案：http://jsbin.com/oqivax/1/edit

【讨论】：