Question

这是我的代码，没有错误，但是我有一个疑问，我正在尝试创建一个默认的日期范围选择器，更具体地说，是7天范围，我的意思是一个只能选择几周的日期选择器，因此我无法在日期选择器中选择多于或少于7天的数据。

但是我无法对此进行编码，我需要一些帮助哈哈。

import 'package:date_range_picker/date_range_picker.dart' as DateRangePick;
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';

import '../constants.dart';
import '../components/chart_bar.dart';

class DetailsScreen extends StatefulWidget {
  @override
  _DetailsScreenState createState() => _DetailsScreenState();
}

class _DetailsScreenState extends State<DetailsScreen> {
  DateTime _startDate = DateTime.now().subtract(Duration(days: 7));
  DateTime _endDate = DateTime.now();

  Future displayDateRangePicker(context) async {
    final List<DateTime> picked = await DateRangePick.showDatePicker(
      context: context,
      initialFirstDate: _startDate,
      initialLastDate: _endDate,
      firstDate: DateTime(DateTime.now().year - 10),
      lastDate: DateTime.now(),
    );
    if (picked != null && picked.length == 2) {
      setState(() {
        _startDate = picked[0];
        _startDate = picked[1];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    _detailsScreen() {
      return Scaffold(
        backgroundColor: kBlackColor,
        body: SafeArea(
          child: Center(
            child: Column(
              children: <Widget>[
                FlatButton(
                  child: Text(
                    '${DateFormat('d / MM / y').format(_startDate)} - ${DateFormat('d / MM / y').format(_endDate)}',
                    style: kWhite20RegularTextStyle,
                  ),
                  onPressed: () async {
                    await displayDateRangePicker(context);
                  },
                ),
              ],
            ),
          ),
        ),
      );
    }

    return _detailsScreen();
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用webp
演示开始日期和结束日期之间的有效演示限制范围，您可以看到超出限制的范围显示为灰色

代码段

selectableDayPredicate

工作演示

完整代码

bool checkLimit(DateTime limitDay) {
    if (limitDay.isBefore(_startDate)) {
      return false;
    } else if (limitDay.isAfter(_endDate)) {
      return false;
    }
    return true;
  }

  Future displayDateRangePicker(context) async {
    final List<DateTime> picked = await DateRangePick.showDatePicker(
        context: context,
        initialFirstDate: _startDate,
        initialLastDate: _endDate,
        firstDate: DateTime(DateTime.now().year - 10),
        lastDate: DateTime.now(),
        selectableDayPredicate: checkLimit
        );

如何设置特定的日期范围选择器

1 个答案: