mytooyo / board_datetime_picker

Picker to select date and time for Flutter. It is both a calendar and a picker, offering a variety of options as a package.
BSD 3-Clause "New" or "Revised" License
6 stars 6 forks source link

New feature - textfield date picker widget #21

Closed matteoberla closed 2 months ago

matteoberla commented 3 months ago

Hi, i've been developing with your package and it works perfecty for mobile device. I'm now developing a web platform and your package is still working perfecty but the UX is very slow as the user can't select a date by compiling a textfield and maybe autocompile it even if all the info are not provided (like the year, minutes, seconds)

I've looked for a package that already handles all these things but i cannot find it, i've also noticed that flutter provides a date input field (https://api.flutter.dev/flutter/material/InputDatePickerFormField-class.html) but i think it's not what i was expecting, so 've tried to develop a widget that autocompile and accepts valid date/hours formats only.

I think it can be done better as i've faced many problems and i was wondering if you could take a look and maybe consider to add something similar to your package.

https://github.com/mytooyo/board_datetime_picker/assets/69200334/ed28964a-2bf4-44b2-9686-6a94e3db26b3

-For now it handles dd/mm/yyyy and HH:MM:ss, the autocompiling feature expects to receive at least dd/MM or HH, and the remaining data is automatically generated. -I was not able to set fixed length of the fields and automatically jump between the different parts of the dates so the user is forced to insert valid formats, but for now returning null if it's not valid is enough. -only digits are accepted and the date divider is always replaced by an "/" or ":" (i can input dots, slash, columns...)

I think it would be useful to add this type of widget as in many websites the date input is writable by the user using the keyboard and it's faster. it may become useful in some cases also for the mobile world as someone could prefere to let the user input the data.

Let me know what do you think about it.

P.S. i'm sorry to ask you for the second time, but i've noticed that the support of the intl package is now forced to 0.19 as i've asked last time but i've encoutered many versioning problems with other packages that expects the 0.18 and the developers are not going to update it for me. is it possible to support both 0.18 and 0.19 for you? Thanks

matteoberla commented 2 months ago

Thank you very much, i'll try this version now and i'll investigate more if the issue happens again.

matteoberla commented 2 months ago

Tested on Web.

You can reproduce it by: -Press on the field to focus -Press outside of the field -> you'll see that the field is updated two times instead of one.

While

-if you focus it and just press "enter" to unfocus, it works fine.

import 'package:board_datetime_picker/board_datetime_picker.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ProviderData extends ChangeNotifier {
  DateTime start = DateTime(2024, 10, 11, 12, 0);

  DateTime datetime = DateTime(2024, 10, 11, 12, 0);
  BoardDateTimeTextController controller = BoardDateTimeTextController();

  updateDateTime() {
    start = start.add(const Duration(minutes: 1));
    //controller.setText(start.toString());
    controller.setText("${start.hour}:${start.minute}");
    datetime = start;
    //print(datetime);
    //notifyListeners();
  }
}

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

  @override
  Widget build(BuildContext context) {
    var providerData = Provider.of<ProviderData>(context, listen: true);
    return Scaffold(
      body: Align(
        alignment: Alignment.topCenter,
        child: BoardDateTimeInputField(
          controller: providerData.controller,
          pickerType: DateTimePickerType.time,
          options: const BoardDateTimeOptions(
            languages: BoardPickerLanguages.en(),
          ),
          initialDate: providerData.datetime,
          maximumDate: DateTime(2040),
          minimumDate: DateTime(1900, 1, 1),
          textStyle: Theme.of(context).textTheme.bodyMedium,
          onChanged: (date) {},
          onFocusChange: (val, date, text) {
            if (!val && date != null) {
              providerData.updateDateTime();
            }
          },
        ),
      ),
    );
  }
}

I think it is the last thing to fix, then it's perfect, thank you.

mytooyo commented 2 months ago

@matteoberla Thank you for confirming the operation. Some initialization was omitted, so I fixed it.

matteoberla commented 2 months ago

Seems to be fixed now, i think the package is now ready to be published. Once again, thank you very much, i appreciate a lot what you have done

mytooyo commented 2 months ago

Thank you too! You've been extremely helpful.

I have published v1.6.2, please refer to it

matteoberla commented 2 months ago

Can i reach you on tg or something else? I've been looking on a contact info on your profile but didn't find anything. Thanks

mytooyo commented 2 months ago

Can i reach you on tg or something else? I've been looking on a contact info on your profile but didn't find anything. Thanks

I put a link to the Twitter account I created in my profile. Can you contact me from there?

matteoberla commented 2 months ago

I've followed you but i can't write a message to you

mytooyo commented 2 months ago

I followed and sent you a message!