django的jsCalendar的widget

表单时间输入组件

最新推荐文章于 2024-09-16 07:12:00 发布

最新推荐文章于 2024-09-16 07:12:00 发布 · 197 阅读

文章标签：

#Django #CSS #Python #Google #thread

python 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种在网页表单中使用自定义组件JsCalendarWidget实现日期时间选择的方法。通过覆盖默认的输入框，该组件引入了日历插件来方便用户选择日期时间，并提供了相应的JavaScript初始化代码。

要在form中输入时间


class JsCalendarWidget(forms.TextInput):
    class Media:
        js = (
              settings.MEDIA_URL+"js/jscalendar/calendar_stripped.js",
              settings.MEDIA_URL+"js/jscalendar.setup.js",
              settings.MEDIA_URL+"js/jscalendar/calendar-setup_stripped.js",
              settings.MEDIA_URL+"js/jscalendar/lang/calendar-en.js",             
              )
        css = {
                 'all': (settings.MEDIA_URL+'/js/jscalendar/skins/aqua/theme.css',)
               }

    def __init__(self, attrs={}):
      super(JsCalendarWidget, self).__init__(attrs)

class IssueForm(ModelForm):
    issue_occur_date =  forms.DateTimeField(widget=JsCalendarWidget(attrs={'class':'vDateField','size':'50'}))

对应的js设置代码是：


function initCalendar() {
  Calendar.setup(
    {
      inputField : "id_issue_occur_date", //我的设置字段
      ifFormat    : "%Y-%m-%d %H:%M:%S",
      button      : "trigger"
    }
  );
}

if(document.all) {
  window.attacheEvent('onload',initCalendar);
} else {
  window.addEventListener('load',initCalendar,false);
}