SimplePro日期选择器

SimplePro日期选择器

🚀simpleui 是django admin的一个主题 是一个基于element-ui+vue开发，重写和优化90%以上的页面。 与suit是同类产品.100%兼容原生Django-admin.

SimpleUI官方文档

models.py

from django.db import models
from django.utils import timezone

class TestModel(models.Model):
    ...
    start_time = models.DateField(default=timezone.now,verbose_name='开始时间')
    end_time = models.DateField(default=timezone.now,verbose_name='结束时间')

但是DateField类型的字段在后台中的显示是这样的:

只能选择本月的日期,对于我们的业务需求来说肯定是不行的,所以我们需要完整的日期选择器组件,能自由的选择年月日.我们在models.py中加入以下代码:

from django.db import models
from django.utils import timezone
from simplepro.components import fields

class TestModel(models.Model):
    options1 = """
    {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        }
    """
    ...
    start_time = fields.DateField(default=timezone.now,verbose_name='开始时间',options=options1)
    end_time = fields.DateField(default=timezone.now,verbose_name='结束时间',options=options1)

使用SimplePro提供的字段类型可以加载自定义前端组件,然后它的效果就变成了这样:

这样我们就能自由的选择年月日了.

SimplePro还提供了很多前端组件,详情请见官方Demo:SimplePro官方文档

SimpleUI是免费开源的,但是SimplePro需要付费使用