Cant get Custom widget to work by replacing django's default date time widget in django admin

Question

I had asked a question here but I think its dead. I even updated it with my progress. So after that I worked a little more with firebug for firefox and discovered some errors that make no sense to me. But before that heres my code: (My app name is 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))

And here is 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"}
        ]
    });       
});
});

So I want to replace the default date time widget of django by jQuery UI datetime picker Now the id in the input field is date_time_tz the same id contained in tz_widget.js I ran it as an independent file, where I included tz_widget.js in the src of my html file. It works. But in django it doesnt.

The errors:

TypeError: $ is undefined tz_widget.js (Line 1) which is : $(window).load(function(){

TypeError: $ is undefined js/jquery-ui-timepicker-addon.js (Line 20) which is : $.ui.timepicker = $.ui.timepicker || {};

I think its the same error that producing it in both the places. I am a little clueless. Heres a link to jQuery-UI-datetimepicker. Some guidance please?

**Update: **

I added this part into widget.py but still no widget in HTML source code.

class TimezoneDateForm(forms,Form):
    test = forms.DateTimeField(label="", widget=TimezoneDate())

I dont get it. What would be the admin view? I have to override that too? Didnt see it mentioned anywhere in any other SO answer for custom widgets. — Indradhanush Gupta
– Indradhanush Gupta, Commented Jul 12, 2013 at 8:48
What do you see when you render the widget? >>> tz = TimeZoneDate() >>> tz.render('A name', 'A value') — danodonovan
– danodonovan, Commented Jul 12, 2013 at 9:00
>>> tz = TimezoneDate() >>> tz.render('A name', 'A value') Output: u'<input id="date_time_tz" type="text" value="A value" name="A name">' — Indradhanush Gupta
– Indradhanush Gupta, Commented Jul 12, 2013 at 9:04
So you need to tell JS to work on id=date_time_tz not id=date-time-tz - see additional answer below. — danodonovan
– danodonovan, Commented Jul 12, 2013 at 13:13

danodonovan · Accepted Answer · 2013-07-12 09:14:13Z

1

For a jQuery widget you'll need to include the jQuery.js (or whatever name you have) core library file in your html header. The

TypeError: $ is undefined ...

makes it seem as if you might have forgotten to do that.

The TimeZoneDate widget is claiming the widget is called

id=\"date_time_tz\"

but the js is attempting to work with something called

$('#date-time-tz')

I'd suggest changing one or the other so that they match! Maybe in the widget;

id=\"date-time-tz\"

edited Jul 12, 2013 at 9:14

answered Jul 12, 2013 at 8:33

danodonovan

20.5k10 gold badges74 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

danodonovan Over a year ago

What does the HTML source code look like? Is the widget there?

Indradhanush Gupta Over a year ago

No. No widget. I am using the correct id to reference. But still no widget.

Collectives™ on Stack Overflow

Cant get Custom widget to work by replacing django's default date time widget in django admin

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related