textformfield_datetime_range_picker #

A customizable date and time range picker widget for Flutter applications.

The TextFormFieldDateTimeRangePicker allows users to select a range of dates and times. It supports three modes: full date-time, time-only, and date-only selection. This widget is useful for scenarios where you need users to specify a range of dates and/or times, such as booking systems, scheduling apps, or event management.

💰 You can help me by Donating #

Demo #

Demo timeonly	Demo fullDateTime	Demo dateonly

Features #

• Three selection modes: full date-time, time only, and date only
• Customizable time range (minimum and maximum hours)
• Customizable icon, title, and hint text
• Automatic validation to ensure end date/time is always after start date/time
• Callback for range changes

Supported platforms #

• Flutter Android
• Flutter iOS
• Flutter web
• Flutter desktop

Installation #

Add textformfield_datetime_range_picker.dart: ^0.0.1 to your pubspec.yaml dependencies. And import it:

import 'package:textformfield_datetime_range_picker/textformfield_datetime_range_picker.dart';

Add the following line to your pubspec.yaml file:

flutter pub add auto_size_text_field

dependencies:
  textformfield_datetime_range_picker: ^1.0.0

Example #

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:textformfield_datetime_range_picker/textformfield_datetime_range_picker.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var dateTtime = DateTime.now();
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            'TextFormField DateTime Range picker',
            style: TextStyle(fontSize: 18),
          ),
        ),
        body: Padding(
          padding: const EdgeInsets.all(14.0),
          child: Center(
            child: TextFormFieldDateTimeRangePicker(
              selectedOption: DateTimeOption.fullDateTime,
              initialDate: dateTtime,
              hintTextDate: 'Select Date',
              onChanged: (date) {
                setState(() {
                  dateTtime = date.start;
                  dateTtime = date.end;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}

Example Use Bloc #

   TextFormFieldDateTimeRangePicker(
     selectedOption: DateTimeOption.fullDateTime
     initialDate: state.dateTime ?? DateTime.now(),
     hintTextDate: 'Select Date',
     onChanged: (date) {
       context.read<SecurityFormBloc>().add(
             SecurityFormEvent.dateTimeChanged(
               dateTime: date.start,
               endTime: date.end,
             ),
           );
     },
   ),

License #

MIT