Unable to select the today's date in SfDateRangePicker calendar

Question

I am trying show the initial date range from yesterday to tomorrow date, but today's date is not highlighted, and I tried to change range like today to tomorrow and I clicked on today's date it was not selecting. I am using package called SfDateRangePicker.

syncfusion_flutter_datepicker: ^22.2.10

Below I provided screenshot & code for this

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});

  // This widget is the root of your application.
  @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");
    DateTime nextDate = DateTime.parse("2024-02-08 21:30:00.000Z");
    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',
                //numberOfWeeksInView: 5,
                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.white),
                todayTextStyle: TextStyle(
                  color: Colors.white,
                  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);
              },
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

Checked the query with the help of a shared code snippet, and we found that you have time-based values like hours and minutes in your start and end date values. Here, we like to let you know that in the SfDateRangePicker the range gets selected based on the year, month, and date only. So we request you to remove the time values from the start and end DateTime, then it will work properly. We have shared the screenshot for your reference. We hope it will help you to achieve your requirements, if you have any further queries please get back to us.

Screenshot: