尝试使用jquery ui显示日历


Trying to display a calendar using jquery ui

我正在使用框架编码器,并尝试使用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);
    }
}
?>

我在你的页面上没有看到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(),就像在您的代码中一样,以确保没有损坏

你的url建错了。

应:

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

在您的视图中给出:http://www.yoursite.com/jquery.js.

我对那个剧本的真实位置有些怀疑。根据你的文件夹结构改变它,只要记住base_url()返回你的url,像这样,以斜杠结尾:

http://www.yoursite.com/

同样,你不是加载jQuery UI,所以也添加(与上面相同的方法)

另一件事,你的输入缺乏name属性,你需要它的情况下,你想要它被php获取。它在形式之外,所以不起作用。这只是一个提示,也许你不想这样使用,但以防万一。

你不应该把你的日期picker初始化在jquery ready事件处理程序中吗?

一样:

$(document).ready(function(){
   $( "#datepicker" ).datepicker();
 });