django的jsCalendar的widget

iteye_16590

于 2009-07-02 10:47:05 发布

阅读量189

点赞数

分类专栏： python 文章标签： Django CSS Python Google thread

python 专栏收录该内容

36 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要在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);
}