2013-04-16 2 views
3

Я столкнулся некоторые проблемы при использовании DatePicker из JQuery мобильный (datepicker)версии JQuery Mobile Datepicker вопросы

Когда я использую версию 1.5 из JQuery и 1.0a4.1 из JQuery мобильный, то DatePicker показано, как ожидается, , Вот код:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 

    <link href="~/Content/jquery.ui.datepicker.mobile.css" rel="stylesheet" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.5.min.js"></script> 
    <script> 
     //reset type=date inputs to text 
     $(document).bind("mobileinit", function() { 
      $.mobile.page.prototype.options.degradeInputs.date = true; 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
    <script src="~/Scripts/jquery.ui.datepicker.js"></script> 
    <script src="~/Scripts/jquery.ui.datepicker.mobile.js"></script> 

</head> 
<body> 

    @RenderBody() 
    <div data-role="page"> 

     <div data-role="content"> 
      <p>Hello world</p> 
      <form action="#" method="get"> 
        <div data-role="fieldcontain"> 
         <label for="date">Date Input:</label> 
         <input type="date" name="date" id="date" value="" /> 
        </div> 
       </form> 
</div> 
</body> 

Но когда я использую JQuery 1.9.1 и JQuery мобильный 1.3.1 генерируя следующую ошибку:

TypeError: Object [object Object] has no method 'live' [http://localhost:62799/Scripts/jquery.ui.datepicker.mobile.js:50]

Код:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 

    <link href="~/Content/jquery.ui.datepicker.mobile.css" rel="stylesheet" /> 
    <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> 
     //reset type=date inputs to text 
     $(document).bind("mobileinit", function() { 
      $.mobile.page.prototype.options.degradeInputs.date = true; 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <script src="~/Scripts/jquery.ui.datepicker.js"></script> 
    <script src="~/Scripts/jquery.ui.datepicker.mobile.js"></script> 

</head> 
<body> 

    @RenderBody() 
    <div data-role="page"> 
     <div data-role="content"> 
      <p>Hello world</p> 
      <form action="#" method="get"> 
        <div data-role="fieldcontain"> 
         <label for="date">Date Input:</label> 
         <input type="date" name="date" id="date" value="" /> 
        </div> 
       </form> 
</div> 
</body> 

Там есть некоторые обходные пути?

ответ

4

В основном вы, вероятно, используете устаревшую версию datepicker.

Ваша версия по-прежнему использует функцию live для привязки события. Эта же функция устарела в версиях jQuery 1.9+.

У вас есть 2 решения:

  1. Используйте новую версию datepicker
  2. Или использовать JQuery версии 1.8.3, потому что он все равно будет иметь функцию живой и JQuery Mobile отлично работает с ним.
+1

Но этот datepicker может использоваться в мобильных устройствах? Это не только для «рабочего стола»? Я хотел бы использовать самую последнюю версию API ... – amp

+0

Как я уже сказал, есть 2 решения, выберите один. – Gajotres

+0

@Gajotres не могли бы вы просто ответить на вопрос с усилителем более четко? Это было бы полезно для всех других пользователей здесь. – superjos

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