datetime_picker_custom_qk 1.5.6

A date time picker for flutter, you can choose date / time / date&time in English Dutch and Việt Nam.

example/lib/main.dart

import 'package:datetime_picker_custom_qk/datetime_picker_custom_qk.dart'
    as picker;
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class CustomPicker extends picker.CommonPickerModel {
  String digits(int value, int length) {
    return '$value'.padLeft(length, "0");
  }

  CustomPicker({DateTime? currentTime, super.locale}) {
    this.currentTime = currentTime ?? DateTime.now();
    setLeftIndex(this.currentTime.hour);
    setMiddleIndex(this.currentTime.minute);
    setRightIndex(this.currentTime.second);
  }

  @override
  String? leftStringAtIndex(int index) {
    if (index >= 0 && index < 24) {
      return digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String? middleStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String? rightStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String leftDivider() {
    return "|";
  }

  @override
  String rightDivider() {
    return "|";
  }

  @override
  List<int> layoutProportions() {
    return [1, 2, 1];
  }

  @override
  DateTime finalTime() {
    return currentTime.isUtc
        ? DateTime.utc(currentTime.year, currentTime.month, currentTime.day,
            currentLeftIndex(), currentMiddleIndex(), currentRightIndex())
        : DateTime(currentTime.year, currentTime.month, currentTime.day,
            currentLeftIndex(), currentMiddleIndex(), currentRightIndex());
  }
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final TextEditingController _dateController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Datetime Picker'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: picker.InputDateTimePicker(
                isDiaLog: false,
                controller: _dateController,
                minDate: DateTime(2018, 1, 1),
                decoration: const InputDecoration(
                  labelText: 'Input Select Date Custom Bottom',
                  hintText: 'Input Enter Date Custom Bottom',
                  suffixIcon: Icon(Icons.calendar_today),
                ),
                onConfirm: (date) {
                  _dateController.text = date.toString();
                  print('confirm $date');
                },
                locale: picker.LocaleType.vi),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _dateController,
              decoration: const InputDecoration(
                labelText: 'Input Select Date DiaLog',
                hintText: 'Input Enter Date DiaLog',
                suffixIcon: Icon(Icons.calendar_today),
              ),
              readOnly: true,
              onTap: () {
                picker.DatePicker.showDatePicker(
                  context,
                  isDiaLog: true,
                  showTitleActions: true,
                  minTime: DateTime(2018, 3, 5),
                  // maxTime: DateTime(2019, 6, 7),
                  // theme: const picker.DatePickerTheme(
                  //     headerColor: Colors.orange,
                  //     backgroundColor: Colors.black,
                  //     itemStyle: TextStyle(
                  //         color: Colors.white,
                  //         fontWeight: FontWeight.bold,
                  //         fontSize: 18),
                  //     doneStyle:
                  //         TextStyle(color: Colors.white, fontSize: 16)),
                  onChanged: (date) {
                    print(
                        'change $date in time zone ${date.timeZoneOffset.inHours}');
                  },
                  onConfirm: (date) {
                    _dateController.text =
                        '${date.day}-${date.month}-${date.year}';
                    print('confirm $date');
                  },
                  currentTime: DateTime.now(),
                  locale: picker.LocaleType.vi,
                );
              },
            ),
          ),
          TextButton(
              onPressed: () {
                picker.DatePicker.showDatePicker(context,
                    showTitleActions: true, minTime: DateTime(2018, 3, 5),
                    // maxTime: DateTime(2019, 6, 7),
                    // theme: const picker.DatePickerTheme(
                    //     headerColor: Colors.orange,
                    //     backgroundColor: Colors.black,
                    //     itemStyle: TextStyle(
                    //         color: Colors.white,
                    //         fontWeight: FontWeight.bold,
                    //         fontSize: 18),
                    //     doneStyle:
                    //         TextStyle(color: Colors.white, fontSize: 16)),
                    onChanged: (date) {
                  print(
                      'change $date in time zone ${date.timeZoneOffset.inHours}');
                }, onConfirm: (date) {
                  print('confirm $date');
                }, currentTime: DateTime.now(), locale: picker.LocaleType.vi);
              },
              child: const Text(
                'Show date ',
                style: TextStyle(color: Colors.black),
              )),
          TextButton(
              onPressed: () {
                picker.DatePicker.showTimePicker(context,
                    showTitleActions: true, onChanged: (date) {
                  print(
                      'change $date in time zone ${date.timeZoneOffset.inHours}');
                }, onConfirm: (date) {
                  print('confirm $date');
                }, currentTime: DateTime.now());
              },
              child: const Text(
                'Show time',
                style: TextStyle(color: Colors.black),
              )),
          TextButton(
              onPressed: () {
                picker.DatePicker.showTime12hPicker(context,
                    showTitleActions: true, onChanged: (date) {
                  print(
                      'change $date in time zone ${date.timeZoneOffset.inHours}');
                }, onConfirm: (date) {
                  print('confirm $date');
                }, currentTime: DateTime.now());
              },
              child: const Text(
                'Show 12H time picker with AM/PM',
                style: TextStyle(color: Colors.black),
              )),
          TextButton(
              onPressed: () {
                picker.DatePicker.showDateTimePicker(context,
                    showTitleActions: true,
                    minTime: DateTime(2020, 5, 5, 20, 50),
                    maxTime: DateTime(2020, 6, 7, 05, 09), onChanged: (date) {
                  print(
                      'change $date in time zone ${date.timeZoneOffset.inHours}');
                }, onConfirm: (date) {
                  print('confirm $date');
                }, locale: picker.LocaleType.vi);
              },
              child: const Text(
                'Show date time picker',
                style: TextStyle(color: Colors.black),
              )),
          TextButton(
              onPressed: () {
                picker.DatePicker.showDateTimePicker(context,
                    showTitleActions: true, onChanged: (date) {
                  print(
                      'change $date in time zone ${date.timeZoneOffset.inHours}');
                }, onConfirm: (date) {
                  print('confirm $date');
                },
                    currentTime: DateTime.utc(2019, 12, 31, 23, 12, 34),
                    locale: picker.LocaleType.vi);
              },
              child: const Text(
                'Show date time picker in UTC (VN)',
                style: TextStyle(color: Colors.black),
              )),
          // TextButton(
          //     onPressed: () {
          //       picker.DatePicker.showPicker(context, showTitleActions: true,
          //           onChanged: (date) {
          //         print(
          //             'change $date in time zone ${date.timeZoneOffset.inHours}');
          //       }, onConfirm: (date) {
          //         print('confirm $date');
          //       },
          //           pickerModel: CustomPicker(currentTime: DateTime.now()),
          //           locale: picker.LocaleType.en);
          //     },
          //     child: const Text(
          //       'show custom time picker,\nyou can custom picker model like this',
          //       style: TextStyle(color: Colors.black),
          //     )),
        ],
      ),
    );
  }
}