Question 78710 in Flutter Question posted in
The official Flutter documentation can be found here.

How to change CupertinoDatePicker dateFormat? – Flutter

enter image description here

As you can see the dateFormat of CupertinoDatePicker is year month day.

But I want show year and month only.

How can I do it?

Here is my code:

SizedBox(
  width: 500,
  height: 250,
  child: CupertinoDatePicker(
    mode: CupertinoDatePickerMode.date,
    backgroundColor: Colors.black54,
    dateOrder: DatePickerDateOrder.ymd,
    onDateTimeChanged: (date) {
      print(date);
    },
  ),
),
Tags:

4

Answers


  1. 0

    Please try to use flutter_cupertino_date_picker and flutter_cupertino_datetime_pickerhope this is help to you.

    DatePicker.showDatePicker(
    context,
    maxDateTime: DateTime.now(),
    dateFormat:'yyyy-MMMM'//your expected date format
);
    Login or Signup to reply.
  2. 0

    You cannot hide it directly as there is no such method for hiding it. But what you can do is go to the '/Users/your_user_name/developer/flutter/packages/flutter/lib/src/cupertino/date_picker.dart' and copy the complete code from that file. Now go to your project directory and create a new dart file with anyName.dart and paste the whole code there. And search for the below Text widget in the file.

              Text(
              localizations.datePickerDayOfMonth(day),
              style:
                  _themeTextStyle(context, isValid: day <= daysInCurrentMonth),
            ),

    Here replace the localizations.datePickerDayOfMonth(day) with empty string ‘ ‘ like that.
    Then where you need to use the customed Picker call it like:

    import 'package:local_app/ui/widgets/anyName.dart' as customizedDatePicker;

    and use it

      customizedDatePicker.CupertinoDatePicker(
   
    initialDateTime: DateTime.now(),
    mode: customizedDatePicker.CupertinoDatePickerMode.date,
  ),
    Login or Signup to reply.
  3. 0 
    CupertinoDatePicker(
          mode: CupertinoDatePickerMode.date,
          onDateTimeChanged: (DateTime value) {
            // handle changes to the selected date
          },
          dateFormat: 'dd/MM/yyyy', // specify the date format
        );

    Here are some examples of formatting symbols that you can use in the dateFormat string:

    • d: The day of the month, as a single digit or double digit number
      (e.g. 1, 2, 3, 11, 12, etc.).
    • dd: The day of the month, as a double digit number (e.g. 01, 02, 03,
      11, 12, etc.).
    • ddd: The abbreviated name of the day of the week (e.g. Sun, Mon, Tue,
      etc.).
    • dddd: The full name of the day of the week (e.g. Sunday, Monday,
      Tuesday, etc.).
    • M: The month as a single digit or double digit number (e.g. 1, 2, 3,
      11, 12, etc.).
    • MM: The month as a double digit number (e.g. 01, 02, 03, 11, 12,
      etc.).
    • MMM: The abbreviated name of the month (e.g. Jan, Feb, Mar, etc.).
    • MMMM: The full name of the month (e.g. January, February, March,
      etc.).
    • y: The year as a two-digit number (e.g. 20, 21, etc.).
    • yy: The year as a two-digit number (e.g. 20, 21, etc.).
    • yyyy: The year as a four-digit number (e.g. 2020, 2021, etc.).

    date formats:

    1. ‘dd/MM/yyyy’: ’01/01/2021′ (1st January 2021)
    2. ‘dddd, MMMM d, yyyy’: ‘Monday, January 4, 2021’ (4th January 2021)
    3. ‘MM/dd/yy’: ’01/04/21′ (4th January 2021)
    Login or Signup to reply.
  4. 0

    enter image description here

    copy the code from URL and save it anywhere in the lib. use code

    CustomCupertinoDatePicker(
            mode: CustomCupertinoDatePickerMode.yearAndMonth,
            dateOrder: DatePickerDateOrder.dmy,
            backgroundColor: Colors.black54,
            onDateTimeChanged: (date) {
              print(date);
            },
          )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search