Question

我正在尝试使用标准的datepicker for 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链接.... 提前谢谢。

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

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

此外，链接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

查看解决方案

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

2 个答案: