【问题标题】:popup calendar by clicking on image: django forms通过单击图像弹出日历:django forms
【发布时间】:2012-08-29 11:53:05
【问题描述】:

我想在我的网页中有一个文本框,旁边有一个图像。当用户点击图像时,它会显示帮助用户选择日期的日历(弹出日历)。我已经在原始 html 中完成了它。但现在我想使用 django 表单(虽然我没有任何模型)所以我搜索并发现我必须在 forms.py 中编写自己的小部件。 s.th 喜欢:

class CalendarWidget(forms.TextInput):
        css = ('/media/css/main.css', '/media/css/js-cal.css')
        js = ('/media/js/js-cal.min.js')

我在forms.py 中有一个类backupForm,其中包含所有表单字段。

我的问题是:要使用上面的CalendarWidget,我应该像这样在backupForm 类中定义一个字段吗?

date1 = forms.CharField(widget=CalendarWidget)

如何将图像绑定到此文本框并强制用户仅在此日历中输入他的日期?

【问题讨论】:

    标签: django django-forms django-templates


    【解决方案1】:

    您可以使用输入字段(文本框)的表单字段并将CalendatWidget 应用为该字段的小部件。小部件负责创建/绑定用作按钮的图像。

    Django 管理员在model.DateField 的表单字段上自动使用AdminDateWidget,尽管有modelform 部分,您可以在django/contrib/admin/widgets.py 中检查它。检查django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js 中的init() 函数,了解Django 如何创建/绑定日历按钮到一个输入字段。

    你甚至可以在首页中使用AdminDateWidget,只要页面加载了所需的CSS/JS资源并设置了某些属性......

    【讨论】:

    • 谢谢,但是“小部件负责创建/绑定用作按钮的图像”是什么意思?我无法理解如何将图像绑定到文本框。这行代码/之后我应该做什么?
    • @user1597122 以内置的DateTimeShortcuts.js 为例,它通过输入(你的话中的文本框)被调用并动态创建一个<img> 标签,它对鼠标点击事件做出反应,呈现日历并将所选值填充回输入,一切都在javascript中完成,参考the code here
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多