20

Is it possible have a YEAR-MONTH picker with only the month and the year with the current showDatePicker without using third-party PLUGINS!!

Note: As a result the day selection layout should not be visible.

1

5 Answers 5

15

The stock pickers do not allow to have month and year only.

You could use the month_picker_dialog package available in the pub page by Dimitri Krivoj.

enter image description here

5
  • thank you so much, this is almost perfect to me, just not have PT-BR support. But is exactly what i was looking for. Dec 13, 2018 at 11:42
  • 1
    Its clashing with firebase_auth: ^0.20.1 (because flutter_app depends on both firebase_auth ^0.20.1 and month_picker_dialog any, version solving failed)
    – STG
    Feb 24, 2021 at 9:49
  • Is it possible to change the blue color of this widget? May 31, 2021 at 13:49
  • 1
    @AashwiinRoghan yes, by changing the primarySwatch in the theme of the application.
    – Phanindra
    Dec 29, 2022 at 3:58
  • For those are facing issues with UI out of bounds, I suggest switch to month_picker_dialog package Apr 27 at 16:22
8

Use flutter_datetime_picker with custom model which disables the last column

class CustomMonthPicker extends DatePickerModel {
  CustomMonthPicker({DateTime currentTime, DateTime minTime, DateTime maxTime,
    LocaleType locale}) : super(locale: locale, minTime: minTime, maxTime:
  maxTime, currentTime: currentTime);

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

and show the picker with custom model

DatePicker.showPicker(context,
  ...
  pickerModel: CustomMonthPicker(
    minTime: DateTime(2020, 1, 1),
    maxTime: DateTime.now(),
    currentTime: DateTime.now()
  )
  ...
)

enter image description here

1
6

You can use the YearPicker widget to show only a yearly calendar. A typical example is:

TextFormField(
  validator: value.isEmpty ? 'this field is required' : null,
  readOnly: true,
  style: TextStyle(fontSize: 13.0),
  decoration: InputDecoration(
    hintStyle: TextStyle(fontSize: 13.0),
    hintText: 'Pick Year',
    contentPadding: EdgeInsets.symmetric(horizontal: 10.0),
    border: OutlineInputBorder(),
    suffixIcon: Icon(Icons.calendar_today),
  ),
  onTap: () => handleReadOnlyInputClick(context),
)

void handleReadOnlyInputClick(context) {
  showBottomSheet(
      context: context,
      builder: (BuildContext context) => Container(
        width: MediaQuery.of(context).size.width,
        child: YearPicker(
          selectedDate: DateTime(1997),
          firstDate: DateTime(1995),
          lastDate: DateTime.now(),
          onChanged: (val) {
            print(val);
            Navigator.pop(context);
          },
        ),
    )
  );
}

Note: you don't have to use a bottomSheet, you can nest it anywhere a widget is valid.

4

For someone else that needs a different approach, setting the dateFormat to 'yyyy-mm' would hide the day field.

DatePicker.showDatePicker(
  ...
  dateFormat:'yyyy-mm',
  ...
);

you can find this widget from this package

3
  • What package did you use for DatePicker.showDatePicker()? Jul 30, 2019 at 23:00
  • 1
    I used 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart'
    – Myorh
    Aug 5, 2019 at 13:33
  • this is unlisted Apr 19, 2022 at 7:33
1

It's not possible to remove "day" from the official DatePicker widget. You should create a copy of the DatePicker Widget and remove the "day" part. Then use your own class in your project instead of the "original" one.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.