如何使用 jQuery UI Datepicker 作为 Django 小部件？

Posted 2023-02-23

技术标签:

【中文标题】如何使用 jQuery UI Datepicker 作为 Django 小部件？【英文标题】：How to use jQuery UI Datepicker as a Django Widget? 【发布时间】：2012-03-24 13:03:41 【问题描述】：

我的一些 Django 1.3 模型具有 DateField 属性。生成表单时，我想使用 jQuery UI Datepicker 而不是纯文本字段。我知道我可以创建新的小部件，但我不明白如何。另外，我不确定是否已经为 Django 做过类似的事情（我用谷歌搜索过，没有机会）。

如何为 jQuery UI Datepicker 创建一个可以跨多个模型（和页面）重用的 Django 小部件？

【问题讨论】：

【参考方案1】：

您应该查看DateInput - 您需要从中继承您的小部件。另请查看admin widgets - 附加了一些 JS。所以拿 DateInput，添加一些 JS 就完成了。

【讨论】：

【参考方案2】：

JQueryUI 有一个非常好的日期 UI 选择器。你可以在这里得到它：http://jqueryui.com

比如说你有以下表格：

class DateForm(forms.Form):
   myDate = forms.DateField()

您想从这里将 JQuery 日期小部件绑定到您的模板中的字段。

我在这里假设您将 DateForm 传递给您的模板，并且您的 JQuery 路径是正确的。

<head>
    <link rel="stylesheet" href="/themes/base/jquery.ui.all.css">
    <script src="/jquery.js"></script>
    <script src="/ui/jquery.ui.core.js"></script>
    <script src="/ui/jquery.ui.widget.js"></script>
    <script src="/ui/jquery.ui.datepicker.js"></script>
    <script>
    $(function() 
        $( "#id_myDate" ).datepicker();
    );
    </script>
</head>
<body>

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

</body>

请注意myDate 前面是id_。 Django 透明地执行此操作，因此请确保您匹配它：id_myDate。

希望这对您有所帮助。

【讨论】：

你能告诉我如果我使用的是模型表单而不是，如何呈现日期选择器我试过了，我还必须添加 name="myDate" 才能让它工作。 @user2086641 我认为您应该从模型表单中排除 myDate 字段（谷歌它，这很容易）并像答案建议的那样手动将其放置在页面中。 @dave：仅供参考，您的链接已损坏

以上是关于如何使用 jQuery UI Datepicker 作为 Django 小部件？的主要内容，如果未能解决你的问题，请参考以下文章

如何通过 npm jquery-ui-datepicker-with-i18n 导入 laravel？