CODEWITHSUNDEEP
pythondjangodjango-admindjango-widget
Indradhanush Gupta
Indradhanush Gupta

Reputation: 4237

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

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())

Upvotes: 1

Views: 469

Answers (1)

danodonovan
danodonovan

Reputation: 20353

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\"

Upvotes: 1

Related Questions