Question

我正在使用框架codeigniter并尝试使用jquery来显示并允许用户选择他想要预先形成搜索的时间段。我显示了日期和文本字段，但是当我单击文本字段时，我没有获得任何日历来选择日期。这是我的观点：

<html>
<head>
<script type="text/javascript" src="<?php echo $jquery?>"></script>          
<script type="text/javascript">
$(function() {
    $( "#datepicker" ).ui-datepicker();
});

</script>
</head>
<body>
<div class="demo">

<p>Date: <input id="datepicker" type="text"></p>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->

<a href="">www.msn.ca</a>
<?php echo form_open('search/submit'); ?>
</body>
</html>

它来自示例代码：http://jqueryui.com/demos/datepicker/ 仅供参考我使用的是jQuery UI 1.8.16 不知道这里有什么问题。如果有人认为控制器是相关的，那么这里是：

<?php
class calendarController extends CI_Controller{

    public function index()
    {
        $this->load->helper('url');
        $data['jquery'] = base_url("jquery.js");
        $this->load->view("jqueryView", $data);
    }
}
?>

Answer 1

我没有在你的页面上看到jQuery JS和CSS文件的链接。尝试这样的事情：

<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>    
<script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>

您可以将它们放在页面的任何位置。最后更好，以便您的网页显示更快。在jQuery加载函数中使用datepicker（），就像在代码中一样，确保没有任何内容被破坏

Answer 2

你不应该将你的datepicker初始化放在jquery ready事件处理程序中吗？

像这样：

$(document).ready(function(){

   $( "#datepicker" ).datepicker();

 });

Answer 3

你正在构建你的网址错误。

应该是：

$data['jquery'] = base_url().'jquery.js';

在您的观点中提供：http://www.yoursite.com/jquery.js.

我对该脚本的实际位置有疑问。相应地更改它的文件夹结构，请记住，base_url()会返回这样的网址，并带有斜杠：

http://www.yoursite.com/

另外，你不加载jQuery UI，所以也加上（与上面相同）

另一件事，你的输入缺少name属性，如果你想让它被php获取，你需要它。并且，它在表单之外，所以它不起作用。这只是一个注释，也许你不想那样使用它，但以防万一...

尝试使用jquery ui显示日历

3 个答案: