How to use django-colorfield in a forms.py file in django?

Question:

I’m trying to use Django-colorfield to create a drop-down from which a color can be selected. However, the priority section in the output just says <colorfield.fields.ColorField>.I tried this answer but it didn’t work. Output, Code:

#models.py

from django.db import models
from colorfield.fields import ColorField

class Todo(models.Model):
    text = models.CharField(max_length=40)
    complete = models.BooleanField(default=False)
    COLOR_CHOICES = [
        ("#8b0000", "red"),
        ("#ffff00", "yellow"),
        ("#006400","green")
    ]

    priority = ColorField(choices=COLOR_CHOICES)
    
    
    def __str__(self):
        return self.text
#forms.py
from django import forms 
from colorfield.fields import ColorField
from .models import Todo


class TodoForm(forms.Form):
    text = forms.CharField(max_length=40,
    
        widget=forms.TextInput(
            attrs={'class' : 'form-control', 'placeholder' : 'Enter todo here', 'aria-label' : 'Todo', 'aria-describedby' : 'add-btn'}))


    COLOR_CHOICES = [
        ("#8b0000", "red"),
        ("#ffff00", "yellow"),
        ("#006400","green")
    ]

    priority = ColorField(choices=COLOR_CHOICES) 
Asked By: ayu_j

||

Answers:

The ColorField only works in Django Admin. If you would like a colorpicker in your template, I would suggest creating CharField, like:

priority = models.CharField(max_length=7)

Add in your template add either a JS plugin for showing a colorpicker or use the HTML5 colorpicker, for example:

<input id="id_priority" maxlength="7" name="priority" type="color">
Answered By: Vincent

If you want to use the colorpicker from django-colorfield in your templates (outside of Django admin) you just have to set the field to type CharField and pass the widget ColorWidget to it. That’s it.

For your case that would be something like this:

class TodoForm(forms.Form):
    COLOR_CHOICES = ['#8b0000', '#ffff00', '#006400']
    text = forms.CharField(max_length=40, widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Enter todo here', 'aria-label': 'Todo', 'aria-describedby': 'add-btn'}))
    priority = ColorField(widget=ColorWidget(attrs={'palette': COLOR_CHOICES}))

Note that you have to pass the COLOR_CHOICES as list as well as attribute to the ColorWidget with the key palette in order to have the color palette.

Answered By: Smort

color=forms.CharField(max_length=7,widget=TextInput(attrs={"type": "color", }))

this works form well.

Answered By: mes

by fallowing @Smort solution, I figured out that colorfield works by default in frontend (template) we just need to as necessary javascript files to the template.

in model I have:

header_color = ColorField(default=’#FF0000′)

and I use ModelForm with just defined fields, nothing else is needed

In forms.py
class MyForm(ModelForm):
    class Meta:
        model = MyModel
        fields = ['header_color',]
        labels = {
            'header_color': 'My color',
        }
In template:
<!--    Colorfield-->
   <script src="{% static 'colorfield/jscolor/jscolor.js' %}"></script>
    <script src="{% static 'colorfield/colorfield.js' %}"></script>

Answered By: user364577
Categories: questions Tags: ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.