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)
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">
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.
color=forms.CharField(max_length=7,widget=TextInput(attrs={"type": "color", }))
this works form well.
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>
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)
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">
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.
color=forms.CharField(max_length=7,widget=TextInput(attrs={"type": "color", }))
this works form well.
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>