Login

jQuery color picker model field

Author:
fneumann
Posted:
December 23, 2008
Language:
Python
Version:
1.0
Score:
2 (after 3 ratings)

This uses the Really Simple Color Picker in jQuery:

http://www.web2media.net/laktek/2008/10/27/really-simple-color-picker-in-jquery/

Get source from there or GitHub:

http://github.com/laktek/really-simple-color-picker/tree/master

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
# =============================================================================
# yourapp/widgets.py
# =============================================================================

from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe

class ColorPickerWidget(forms.TextInput):
    class Media:
        css = {
            'all': (
                settings.MEDIA_URL + 'cssjs/colorPicker.css',
            )
        }
        js = (
            'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js',
            settings.MEDIA_URL + 'cssjs/jquery.colorPicker.js',
        )

    def __init__(self, language=None, attrs=None):
        self.language = language or settings.LANGUAGE_CODE[:2]
        super(ColorPickerWidget, self).__init__(attrs=attrs)

    def render(self, name, value, attrs=None):
        rendered = super(ColorPickerWidget, self).render(name, value, attrs)
        return rendered + mark_safe(u'''<script type="text/javascript">
            $('#id_%s').colorPicker();
            </script>''' % name)


# =============================================================================
# yourapp/models.py
# =============================================================================

from yourapp.widgets import ColorPickerWidget

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'] = ColorPickerWidget
        return super(ColorField, self).formfield(**kwargs)


class YourModel(models.Model):
    # ...
    font_color = ColorField(blank=True) 
    # ...


# =============================================================================
# static/cssjs/colorPicker.css
# =============================================================================

/*
    see: http://github.com/laktek/really-simple-color-picker/tree/master/colorPicker.css

    To render nicely in the Django admin I added these lines to the bottom:
*/

.form-row div .color_picker {
float:left;
}

More like this

  1. Template tag - list punctuation for a list of items by shapiromatron 10 months, 3 weeks ago
  2. JSONRequestMiddleware adds a .json() method to your HttpRequests by cdcarter 11 months ago
  3. Serializer factory with Django Rest Framework by julio 1 year, 5 months ago
  4. Image compression before saving the new model / work with JPG, PNG by Schleidens 1 year, 6 months ago
  5. Help text hyperlinks by sa2812 1 year, 7 months ago

Comments

guettli (on December 5, 2011):

Related: django-colorful

#

jtoonyspe (on April 28, 2016):

8 years since this was posted, and I just used it. Works perfectly, thanks!

#

ppython (on March 20, 2017):

Just an update for the css hack, the class selector should be :

.form-row div .color_picker {
  float:left;
}

#

ppython (on March 20, 2017):

.form-row div .colorPicker-picker instead of .form-row div .color_picker

#

Please login first before commenting.