jquery mobile datepicker不工作o单击文本框答案

【问题标题】：jquery mobile datepicker not working o clicking textboxjquery mobile datepicker不工作o单击文本框
【发布时间】：2015-12-17 15:49:33
【问题描述】：

您好，我是 jQuerymobile 的新手。我正在尝试实现一个日期选择器，它需要在单击文本框时作为弹出窗口出现。但是 onSelect 不起作用，并且没有发生单击操作。代码是

<head>
<meta charset="utf-8">

<!-- Need to get a proper redirect hooked up. Blech. -->



<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RideMix</title>
<link rel="stylesheet"  href="jquery.mobile-1.3.2.min.css">
<link rel="shortcut icon" href="demos/_assets/favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">


<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="jquery.js"></script>

<link rel="stylesheet" href="style.css">

<script>
    $( document ).on( "pageshow", function(){
        $( "p.message" ).hide().delay( 1500 ).show( "fast" );
    });
</script>
 <script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker1" ).datepicker();

}); 
</script>

<div class="productimage">  

                <input data-theme="c" type="search" name="search" id="search-basic" value="" placeholder="Leaving from"/>
                <input data-theme="c" type="search" name="search" id="search-basic" value="" placeholder="Going to"/>
                <p>&nbsp</p>
                <div class="ui-bar ui-bar-b datetime">
                <h3 class="">Date and time </h3>
                </div>
                <div style="width:90%;">
                <br />
                <label>From Date</label>
                <input type="date" name="date" id="datepicker" value=""  />
                <label>To Date</label>
                <input type="date" name="date" id="datepicker" value=""  />

                </div>  
                    <p>&nbsp</p>
                <a href="#" data-transition="fade" data-role="button" data-theme="b"  style="width:70%;margin:auto">Next Step</a>
        </div>

提前致谢。

【问题讨论】：

如果你只使用jquery mobile 如果我没记错就足够了。编辑;没关系，我使用另一个插件使用它。尝试从jqueryui.com/datepicker 复制粘贴代码是否有效。可能是别的东西。或者看看demos.jquerymobile.com/1.0a4.1/experiments/ui-datepicker
我遵循了这些参考资料中的方法..但我仍然无法..可能与 jquery 版本存在一些冲突问题

标签： jquery html datepicker

【解决方案1】：

试试：

更改input type="text"
在初始化日期选择器时指定日期格式
将唯一的ids 分配给您的input 字段

这是一个例子：

$(function() {
  $("#datepicker-from").datepicker({
    dateFormat: 'yy-MM-dd'
  });
  $("#datepicker-to").datepicker({
    dateFormat: 'yy-MM-dd'
  });
});

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<div class="productimage">
  <div class="ui-bar ui-bar-b datetime">
    <h3 class="">Date and time </h3>
  </div>
  <div style="width:90%;">
    <br />
    <label>From Date</label>
    <input type="text" name="date-from" id="datepicker-from" value="" />
    <label>To Date</label>
    <input type="text" name="date-to" id="datepicker-to" value="" />
  </div>
</div>

【讨论】：

@rphv..谢谢你的努力。但代码仍然不适合我。:(
@AmitNair 很遗憾听到这个消息 - 当您单击“运行代码 sn-p”时，上面的代码 sn-p 是否对您有效？您在控制台中看到任何错误吗？
是的，sn-p 运行良好..很棒的工作..但不知道为什么它在我的应用程序中不起作用..控制台中没有显示错误..:(
我的第一个想法是查看标题中包含的 css 和 js 文件 - 可能那里存在冲突，或者可能以某种方式覆盖了 datepicker css。你能提供更多信息吗？单击日期字段时会发生什么？您使用的是什么浏览器/版本/操作系统？您的应用程序的其余部分工作正常吗？上面的 sn-p 可以在你的本地机器上运行吗？
是的...单击文本字段时没有任何反应...控制台中也没有显示任何错误...我在 windows7 操作系统、Chrome 浏览器中运行该应用程序...以及其余的除了日期选择器和时间选择器之外，具有 jquery mobile 的应用程序似乎对我来说工作正常