# customfields.py from django import forms from django.conf import settings from django.db import models from django.template.loader import render_to_string class ColorWidget(forms.Widget): class Media: js = [settings.ADMIN_MEDIA_PREFIX + "js/ColorPicker2.js"] def render(self, name, value, attrs=None): return render_to_string("widget/color.html", locals()) class ColorField(models.CharField): def __init__(self, *args, **kwargs): kwargs['max_length'] = 10 super(ColorField, self).__init__(*args, **kwargs) def formfield(self, **kwargs): kwargs['widget'] = ColorWidget return super(ColorField, self).formfield(**kwargs) # templates/widget/color.html {% load common %} <script type="text/javascript" charset="utf-8"> var picker_{{ name }} = new ColorPicker('window'); </script> <input type="text" readonly="true" tabindex="-1" size="2" style="background-color: {{ value }};" id="{{ attrs.id }}-sample"/> <input type="text" name="{{ name }}" size="8" value="{{ value }}" id="{{ attrs.id }}" onChange="alert('changed');"/> <a href="#" onclick="picker_{{ name }}.select(document.getElementById('{{ attrs.id }}'),document.getElementById('{{ attrs.id }}-sample'),'{{ attrs.id }}-pick');return false;" name="{{ attrs.id }}-pick" id="{{ attrs.id }}-pick">Pick</a> <script type="text/javascript" charset="utf-8"> picker_{{ name }}.writeDiv(); </script>