我问了一个问题here,但我认为它已经死了。我甚至用我的进步更新了它。所以在那之后我使用firebug为firefox工作了一些,发现了一些对我来说毫无意义的错误。但在此之前我的代码是:(我的应用名称是ui
)
UI / admin.py
class MyModelAdmin(admin.ModelAdmin):
class Media:
css = {
"all": ("style/jquery-ui.css",
"style/jquery-ui-timepicker-addon.css",)
}
js = ("js/jquery-ui.js",
"js/jquery-ui-timepicker-addon.js",
"js/tz_widget.js",)
formfield_overrides = {
models.DateTimeField : {'widget': TimezoneDate()},
}
widgets.py
DATE_FORMAT = "%m-%d-%y"
class TimezoneDate(forms.widgets.Widget):
def __init__(self, attrs=None):
super(TimezoneDate, self).__init__(attrs)
def render(self, name, value, attrs=None):
if value is None:
vstr = ''
elif hasattr(value, 'strftime'):
vstr = datetime_safe.new_datetime(value).stftime(DATE_FORMAT)
else:
vstr = value
id = "%s" % name
args = \
"<input type=\"text\" value=\"%s\" name=\"%s\" id=\"date_time_tz\" />" % \
(vstr, name)
return mark_safe(u"\n".join(args))
这是tz_widget.js:
$(window).load(function(){
$(function() {
$('#date-time-tz').datetimepicker({
dateFormat: $.datepicker.RFC_2822,
timeFormat: 'hh:mm:ss z',
showTimezone: true,
timezoneList: [
{"value": "0", "label": "UTC"},
{"value": "+60", "label": "FRANCE"},
{"value": "+330", "label": "INDIA"},
{"value": "-240", "label": "US EAST"},
{"value": "-420", "label": "US SF"}
]
});
});
});
所以我想用jQuery UI datetime picker
替换django的默认日期时间小部件
现在,输入字段中的id
为date_time_tz
tz_widget.js
中包含的相同ID
我把它作为一个独立的文件运行,我将tz_widget.js
包含在我的html文件的src
中。有用。但在django它没有。
错误:
TypeError:$未定义
tz_widget.js(第1行)
这是:$(window).load(function(){
TypeError:$未定义
js / jquery-ui-timepicker-addon.js(第20行)
这是:$.ui.timepicker = $.ui.timepicker || {};
我认为它在两个地方产生它的错误相同。我有点无能为力。下面是link到jQuery-UI-datetimepicker。请一些指导?
**更新:**
我已将此部分添加到widget.py
中,但HTML
源代码中仍未添加任何窗口小部件。
class TimezoneDateForm(forms,Form):
test = forms.DateTimeField(label="", widget=TimezoneDate())
答案 0 :(得分:1)
对于jQuery
小部件,您需要在html标头中包含jQuery.js
(或您拥有的任何名称)核心库文件。在
TypeError: $ is undefined ...
看起来好像你可能忘了那样做。
TimeZoneDate
窗口小部件声称窗口小部件名为
id=\"date_time_tz\"
但js
正在尝试使用名为
$('#date-time-tz')
我建议改变其中一个,以便它们匹配!也许在小部件中;
id=\"date-time-tz\"