从jQuery datepicker内联中选择日期时打开jQuery对话框

时间:2013-03-18 04:01:36

标签: jquery dialog datepicker

目前,我的项目页面在页面的一个部分上放置了一个jQuery datepicker inline。以下代码用于实现相同的目标。

<link rel="stylesheet" href="~/Scripts/Calendar/jquery-ui-1.10.1.custom.css">
<script src="~/Scripts/Calendar/jquery-1.9.1.js"></script>
<script src="~/Scripts/Calendar/jquery-ui-1.10.1.custom.js"></script>
<script>
$(document).on("change", "#datepicker", function () {
    var date = $(this).val();
    $( "#dialog" ).dialog();
});
</script>

// The below section is in one of the sections
<div id="datepicker" style="font: 80% 'Trebuchet MS', sans-serif;"></div>
<script>
    $("#datepicker").datepicker();
</script>
.
.
.
<div id="dialog-modal" title="Basic modal dialog">
   <p>Adding the modal overlay screen.</p>
 </div>

现在,当用户在特定日期点击时,我必须显示带有信息的jQuery对话框。

我试着打电话给对话

$(document).on("change", "#datepicker", function () {
    var date = $(this).val();
    $( "#dialog" ).dialog();
});

但它显示错误,因为Object不支持属性或方法对话框。

任何身体都可以让我朝着正确的方向前进。

谢谢

2 个答案:

答案 0 :(得分:1)

看看这个小提琴,看看这是否有帮助。

http://jsfiddle.net/qqabC/

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

$("#datepicker").change(function(){
     var date = $(this).val();
    $('<div>' + date + '</div>').dialog();
});

答案 1 :(得分:0)

我认为你包括jquery两次。您有一个jquery-1.9.1.js以及其他一些jquery-1.x.x.js脚本文件,或者相同jquery-1.9.1.js第二次所有内容似乎都插入第一个实例,然后最后一个包含覆盖$ 。这就是你看到这个错误信息的原因。

请再次检讨..

还在您的脚本代码中加入$j = jQuery.noConflict();以避免冲突!