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.
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.
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.
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()
)
...
)
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.
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
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.