如何在 Django admin 中使用 HTML5 颜色选择器

Posted 2023-02-23

【中文标题】如何在 Django admin 中使用 HTML5 颜色选择器

【英文标题】：How to use HTML5 color picker in Django admin

【发布时间】：2017-02-13 00:40:50

【问题描述】：

我正在尝试在 Django 的管理页面中实现 html5 颜色选择器。

这是我的模型：

#model.py
...

class Category(models.Model):
    ...
    color = models.CharField(max_length=7)

这是表格：

#form.py
from django.forms import ModelForm
from django.forms.widgets import TextInput
from .models import Category

class CategoryForm(ModelForm):
    class Meta:
        model = Category
        fields = '__all__'
        widgets = 
            'color': TextInput(attrs='type': 'color'),
        

class CategoryAdminForm(ModelForm):
    form = CategoryForm

最后是管理员：

#admin.py
...
from .forms import CategoryAdminForm

...
class CategoryAdmin(admin.ModelAdmin):
    form_class = CategoryAdminForm
    filter_horizontal = ('questions',)
    fieldsets = (
        (None, 
            'fields': (('name', 'letter'), 'questions', 'color')
            ),
        )

但是，该字段的类型仍然是文本。如何在管理页面中将输入字段的类型更改为颜色？

【参考方案1】：

我在文档中找到了答案：

forms.py 中的额外类是不必要的

#form.py
from django.forms import ModelForm
from django.forms.widgets import TextInput
from .models import Category

class CategoryForm(ModelForm):
    class Meta:
        model = Category
        fields = '__all__'
        widgets = 
            'color': TextInput(attrs='type': 'color'),
        

在管理员中：

#admin.py
...
from .forms import CategoryForm

...
class CategoryAdmin(admin.ModelAdmin):
    form = CategoryForm
    filter_horizontal = ('questions',)
    fieldsets = (
        (None, 
            'fields': (('name', 'letter'), 'questions', 'color')
            ),
        )

【参考方案2】：

你可以使用这个库 https://github.com/jaredly/django-colorfield

安装：

运行pip install django-colorfield 将colorfield 添加到您的INSTALLED_APPS 用./manage.py collectstatic收集静态文件

用法：

在你的模型中，你可以这样使用它：

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

class MyModel(model.Model):

     color = ColorField(default='#FF0000')

【讨论】：

无法使其工作（不显示字段）。我在forms.Form 中使用它而不是model.Model，这是为什么呢？有没有办法只在表单中使用它？

【参考方案3】：

如果您想将颜色选择器添加到 forms.Form 而不是 model.Model 这将是要走的路：

from django import forms

class GaeParamsForm(forms.Form):
    hex_color = forms.CharField(label='hex_color', max_length=7,
        widget=forms.TextInput(attrs='type': 'color'))
    font_size = forms.IntegerField(label='font_size', 
        min_value=1, max_value=400)

这实质上是写输入HTML标签的type属性，即

<input id="id_hex_color" maxlength="7" name="hex_color" type="color">

您将收到带有 # 符号的十六进制字符串形式的数据，例如#ff0000.