DV-admin日期与时间范围查询-解决

日期年月日范围查询过滤

最近在用这套系统试一试，然后表中有一个时间字段，类型为
date_time date NOT NULL,

单个日期查找

起初在搜索栏中进行日期的搜索只是单个按照一个日期进行搜索的，如下所示：这样只能单个日期进行查找，如果要过滤日期范围怎么办呢？

{
        title: '日期',
        key: 'date_time',
        align: 'center',
        width: 130,
        type: 'date',
        search: {
          // 在搜索处显示
          disabled: false,
          component: {
            name: 'el-date-picker',
            style: {width: '150px'},
            props: {
              clearable: false,
              format: 'yyyy-MM-dd',
              valueFormat: 'yyyy-MM-dd'
            }
          }
        },
        form: {
          editDisabled: true,
          rules: [
            // 表单校验规则
            { required: true, message: '日期必填项' }
          ],
          component: {
            placeholder: '请输入日期',
            clearable: true,
            style:{width:'180px'},
            props: {
              clearable: true,
              format: 'yyyy-MM-dd',
              valueFormat: 'yyyy-MM-dd'
            }
          },
          itemProps: {
            class: { yxtInput: true }
          }
        }
      },

日期范围查找

前端

要用到日期范围，首先使用的日期选择器类型应为daterange，
然后重新设置获取到的日期范围。

valueResolve: 这是一个函数，用于解析每一行的值。如果有，就将这两个时间分别存储在start_time和stop_time中。否则，将这两个属性设为null。

这样请求会携带start_time和stop_time。/?date_time=2023-08-01&date_time=2023-08-09&start_time=2023-08-01&stop_time=2023-08-09&limit=20&page=1

 {
        title: '日期',
        key: 'date_time',
        align: 'center',
        width: 130,
        // type: 'daterange',
        type: 'daterange',
        search: {
          // 在搜索处显示
          disabled: false,
          width: 500,
          type: 'daterange',
          component: {
            // name: 'el-date-picker',
            style: {width: '400px'},
            props: {
              "time-arrow-control": false,
              'picker-options': { shortcuts: shortcuts },
              clearable: false,
              format: 'yyyy-MM-dd',
              valueFormat: 'yyyy-MM-dd'
            },
          }
        },
        form: {
          editDisabled: true,
          rules: [
            // 表单校验规则
            { required: true, message: '日期必填项' }
          ],
          component: {
            placeholder: '请输入日期',
            clearable: true,
            style:{width:'180px'},
            props: {
              clearable: true,
              format: 'yyyy-MM-dd',
              valueFormat: 'yyyy-MM-dd'
            }
          },
          itemProps: {
            class: { yxtInput: true }
          }
        },
        valueResolve(row, key) {
            row.start_time = row.date_time[0];
            row.stop_time = row.date_time[1];
        },
      },

后端

自己创建的筛选类类继承了FilterSet类，它是Django Rest Framework中用于创建筛选器集的类。通过继承这个类，可以利用它提供的功能来定义你的筛选器集。

在该类中，由于我们的字段为date_time，但是我们要根据日期范围进行筛选，所以应该设置start_time和stop_time。
最后的fields不应该包含date_time。
如下所示：

class hole6_1Filter(django_filters.rest_framework.FilterSet):
    # 指定区间过滤
    start_time = django_filters.DateFilter(field_name="date_time", lookup_expr='gte')
    stop_time = django_filters.DateFilter(field_name="date_time", lookup_expr='lte')

    class Meta:
        model = hole6_1
        # fields = '__all__'
        fields = (
            'id',
        )
  

解决

这样就解决了，例如选择一个日期范围，9天：

可以看到按照日期进行筛选后返回了 9 条数据