Question

我从here安装了jquery ui插件。我在该页面上执行了一个简单的示例，将我的视图文件生成为：

<%@ page import="mnm.schedule.*" %> 
<!doctypte html>
<html>
<head>
<meta name="layout" content="main" />
<title><g:message code="User's profile" /></title>
<g:javascript library="jquery" />
<r:require module="jquery-ui"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js">
 $(document).ready(function() 
{ ("#datepicker").datepicker({dateFormat: 'yy/mm/dd'}); 
}) 
</script>        
</head>
  <body>
  <div role="main" class="content scaffold-create">
  <g:form controller="tasks" action ="test">
  date :  <input type="text" id="datepicker" />
  <g:submitButton name="click" />
  </g:form>
  </div>
  </body>
</html>

当我看到我的页面时，我可以看到文本框，但是当我在文本框内单击时，我看不到弹出的日期日历。哪里弄错了？我甚至在我的chrome上看到了开发者控制台，它没有抛出任何错误。

提前致谢

Answer 1

在选择datepicker $时，您的代码中缺少textbox。

$(document).ready(function(){ 
    $("#datepicker").datepicker({ dateFormat: 'yy/mm/dd' }); 
});

Answer 2

我将script标记替换为grails g:javascript标记为：

<g:javascript>
        $(document).ready(function()
        {
          $("#datepicker").datepicker({dateFormat: 'dd/mm/yy'});
          console.log('has been invoked');
        })
</g:javascript>

现在它有效。

Answer 3

实际问题是你在这里包含了jquery：

<g:javascript library="jquery" />

然后在这里包括jquery：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js">

可能有不同版本的jquery，我想一切都搞砸了

将script标记更改为：

<script type="text/javascript">

应该解决这个问题......

Answer 4

网站上的datepicker示例提供了一个正确的示例： http://jqueryui.com/demos/datepicker/ 您可以使用以下额外功能调整日期选择器： changeMonth：是的， changeYear：true， showOtherMonths：是的， selectOtherMonths：true， dateFormat：'d-m-yy'， firstDay：1， minDate：-365， maxDate：+ 0，

在jquery ui插件中显示日历

4 个答案: