SfDateRangePicker无法选中今日日期及高亮异常问题求助

问题1：今日日期未高亮显示 #

你的代码里monthCellStyle中，todayTextStyle的颜色设为了Colors.white，todayCellDecoration的背景色也是Colors.white，和普通日期的背景/文字颜色完全一致，导致今日视觉上没有任何高亮标识。

修复方法： #

修改todayTextStyle和todayCellDecoration，给今日设置明显的样式区分，比如：

todayCellDecoration: BoxDecoration(
  color: Colors.blueAccent.withOpacity(0.2),
  borderRadius: BorderRadius.circular(4),
),
todayTextStyle: const TextStyle(
  color: Colors.blueAccent,
  fontFamily: "bold",
  fontSize: 15,
),

问题2：点击今日日期无法选中 #

主要原因是日期时区不匹配：你定义的previousDate和nextDate是UTC时间（带Z后缀），而DateTime.now()是本地时间，控件内部日期比较时会出现逻辑错误，导致今日被判定为不可选。另外初始选中范围的UTC日期也可能干扰选择逻辑。

修复方法： #

1. 统一所有日期的时区，比如将UTC日期转换为本地时间：

DateTime previousDate = DateTime.parse("2024-02-06 20:30:00.000Z").toLocal();
DateTime nextDate = DateTime.parse("2024-02-08 21:30:00.000Z").toLocal();

或者直接用本地时间格式创建日期：

DateTime previousDate = DateTime(2024, 2, 6);
DateTime nextDate = DateTime(2024, 2, 8);

2. 确保minDate的设置不会限制今日的选择，比如如果今日是2024-02-07，minDate设为2024-02-06是没问题的，但时区统一后才能正确判断。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key,});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _datetimeController = DateRangePickerController();

  @override
  Widget build(BuildContext context) {
    // 统一转换为本地时间
    DateTime previousDate = DateTime.parse("2024-02-06 20:30:00.000Z").toLocal();
    DateTime nextDate = DateTime.parse("2024-02-08 21:30:00.000Z").toLocal();
    DateTime today = DateTime.now();
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Calender range"),
      ),
      body: Column(
        children: [
          Text("Today -- $today",
              style: const TextStyle(
              fontFamily: "regular",
              fontSize: 18,
              letterSpacing: 1.5,
              color: Colors.black)),
          Center(
            child: SfDateRangePicker(
              controller: _datetimeController,
              view: DateRangePickerView.month,
              headerStyle: const DateRangePickerHeaderStyle(
                backgroundColor: Colors.white,
                textAlign: TextAlign.left,
                textStyle: TextStyle(
                    fontFamily: "regular",
                    fontSize: 18,
                    letterSpacing: 1.5,
                    color: Colors.black),
              ),
              monthViewSettings: const DateRangePickerMonthViewSettings(
                firstDayOfWeek: 1,
                dayFormat: 'EEE',
                viewHeaderStyle: DateRangePickerViewHeaderStyle(
                  textStyle: TextStyle(
                    fontFamily: "semibold",
                    fontSize: 12,
                    letterSpacing: 0.2,
                    color: Color(0xFFC8C9CC),
                  ),
                ),
              ),
              enablePastDates: true,
              minDate: previousDate,
              monthCellStyle: const DateRangePickerMonthCellStyle(
                cellDecoration: BoxDecoration(
                  color: Colors.white,
                ),
                textStyle: TextStyle(
                  color: Colors.black,
                  fontFamily: "bold",
                  fontSize: 14,
                ),
                leadingDatesTextStyle: TextStyle(
                    color: Colors.white,
                    backgroundColor: Colors.white),
                trailingDatesTextStyle: TextStyle(
                  color: Color(0xFFC8C9CC),
                  backgroundColor: Colors.white,
                  fontFamily: "bold",
                  fontSize: 15,
                ),
                // 修改今日样式，实现高亮
                todayCellDecoration: BoxDecoration(
                  color: Colors.blueAccent.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(4),
                ),
                todayTextStyle: TextStyle(
                  color: Colors.blueAccent,
                  fontFamily: "bold",
                  fontSize: 15,
                ),
              ),
              initialSelectedRange: PickerDateRange(previousDate, nextDate),
              selectionMode: DateRangePickerSelectionMode.range,
              selectionTextStyle: const TextStyle(
                color: Colors.white,
                fontFamily: "bold",
                fontSize: 14,
              ),
              selectionColor: Colors.black,
              startRangeSelectionColor: Colors.black,
              endRangeSelectionColor: Colors.black,
              rangeSelectionColor: Colors.black26,
              rangeTextStyle: const TextStyle(
                color: Colors.white,
                fontFamily: "bold",
                fontSize: 14,
              ),
              onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
                print(args.value);
              },
            ),
          ),
        ],
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Shanmukha