在金字塔项目中使用datepickerjquery小部件

Question

我想在金字塔项目中使用jquery小部件。 特别是我想使用一个datepicker小部件。在

我将来自http://jqueryui.com/demos/datepicker/的jquery日期选择器代码复制到模板（.pt）文件中。在

<script type="text/javascript">
    jQuery(function() {
        jQuery( "#datepicker" ).datepicker();
    });
</script>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>

我下载了jquery，我把它的js文件包括在下面：

^{pr2}$

但是，在页面中只有文本输入表单出现，没有日期选择器日历，我做错了什么？在

编辑：在我的浏览器javascript控制台中，我得到错误：

Uncaught TypeError: Object [object Object] has no method 'datepicker'

当我这么做的时候

jQuery('#datepicker').datepicker(

Answer 1

在您的代码中，日历应该出现，但只有在您单击输入框时才会出现。在

要在输入旁边显示默认日历图标，请执行以下操作：

$(function(){
  $('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: 'calendar.gif',
    buttonImageOnly: true           
  });
  $('#datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd');
});

你必须提供日历.gif你自己的偶像。在

回应你的编辑：你打电话了吗jQuery.noConflict()? 在

Answer 2

你查过deform了吗？这使得金字塔中的这种形式非常简单。您可能会发现在服务于表单的视图中使用get_widget_resources方法更容易，并在模板中注入任何变形小部件（包括日期选择器小部件）所需的每一个资源，例如this

请确保在配置应用程序时使用a static view for deform assets。对于datepicker小部件，我认为您还需要在模板末尾的某处插入<script>deform.load()</script>，但我可能不这样做。在