JQuery mobile datepicker не работает

Я пытаюсь использовать стандартный datepicker для HTML, JQuery Mobile. Но почему-то любая версия, которую я пытаюсь, не работает. Я думаю, что это может быть что-то со списком стилей, который я выбрал, или с мобильными ссылками JQuery.JQuery mobile datepicker не работает

Вот код:

<!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 .... Спасибо заранее.

источник

2013-08-16 David Faiz

Ваш код слишком сбит с толку. Вам не нужны все эти ссылки для использования простого datetimepicker для 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="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>

источник

2013-08-16 16:37:56 user2232273

Это довольно легко. Сначала вы использовали множество ссылок, которые могли вызвать конфликт.

Кроме того, ссылка 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

источник

2013-08-16 16:49:04

JQuery mobile datepicker не работает

ответ

Смежные вопросы