CODEWITHSUNDEEP
flutterdatepickerdateformatter
Bala
Bala

Reputation: 1375

Change date format in edit mode instead of picking a date in flutter showDatePicker()

i am using showDatePicker() to pick a date in my flutter app. I changed the dateformat to my requirement i.e dd/MM/yyyy. everyting works fine but if i click the edit pen icon from the date picker and enter dd/MM/yyyy (15/10/2020)format then its shows invalid format.

please help me anyone on this. Here is my code.

TextFormField(
  controller: startDateAnnuityCtl,
  validator: (String value) {
    if (value.isEmpty) {
      return 'Enter Start date of annuity *';
    } else {
          _formObject.amrfNoAnnuityStartString = value;
    }
    return null;
  },
  onSaved: (String value) {
    _formObject.amrfNoAnnuityStartString = value;
  },
  decoration: InputDecoration(
      isDense: true, // Added this
      contentPadding: EdgeInsets.all(12),
      filled: true,
      fillColor: Color(0xff5a9fd6).withOpacity(0.15),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Color(0xff5a9fd6).withOpacity(1.0),
        ),
        borderRadius: BorderRadius.circular(2.0),
      ),
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.transparent,
        ),
        borderRadius: BorderRadius.circular(1.0),
      )),
  onTap: () async {
    formKey1.currentState.save();
    DateTime date = DateTime(1900);
    FocusScope.of(context).requestFocus(new FocusNode());
    date = await showDatePicker(
        context: context,

        initialDate: DateTime.now(),
        firstDate: DateTime(1900),
        lastDate: DateTime(2100));
    if (date != null) {
      setState(() {
        var dtnew =
        new DateFormat('dd/MM/yyyy').format(date);
        _formObject.amrfNoAnnuityStartString = dtnew;
        startDateAnnuityCtl.text = _formObject.amrfNoAnnuityStartString;
      });
    }
  },
),

enter image description here

Upvotes: 3

Views: 3422

Answers (5)

Nayana Jangale
Nayana Jangale

Reputation: 11

Include the following line in 'ShowDatePicker'; it works for me to display the date format as dd/mm/yyyy.

  locale: appBloc.language == "mr"
      ? const Locale('mr', 'IN')
      : const Locale('en', 'GB'),

Upvotes: 0

MDias
MDias

Reputation: 59

The date format will be set to US as default. This means that if the fieldHintText is null then the default date format is en_US, the same thing for the locale.

    locale:  const Locale('en','GB'), 
won't work unless US format even though you set `fieldHintText: 'dd/mm/yyyy'`

You will be able to see the hint text in the format you want however the date format will still be US. Unfortunately, it seems that non_US formats are not yet implemented in the package. I found an alternate solution in another thread and used it in my code and it worked.

in your YAML add

flutter_localizations:
    sdk: flutter

in your main file import and add

import 'package:flutter_localizations/flutter_localizations.dart';

    localizationsDelegates: const [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ],
          supportedLocales: const [
            Locale('en', 'GB'),
          ],

and then all you need in your showDatePicker is fieldHintText: 'dd/mm/yyyy',

I hope this helps you.

Upvotes: 0

Muhammed Shibin
Muhammed Shibin

Reputation: 11

You can do this by adding the following lines in datepicker.

locale:  const Locale('en','IN'),
fieldHintText: 'dd/mm/yyyy',

showDatePicker(
                 locale:  const Locale('en','IN'),
                 context: context,
                 initialDate: DateTime.now(),
                 firstDate:DateTime.now(),
                 lastDate: DateTime.now(),
                 fieldHintText: 'dd/mm/yyyy',
                 builder: (BuildContext context, Widget child){
                 .................... 
                 }
              );

Upvotes: 1

malvern
malvern

Reputation: 1

not sure if this is the best method but I created my own DefaultMaterialLocalizations and changed the behaviour of parseCompactDate method.

Upvotes: 0

Poujhit
Poujhit

Reputation: 136

while entering date in the date picker, it takes the input in the format MM/dd/yyyy. Hence you are getting an error saying invalid format. Currently I found no solution to changing the textfield format in the date picker.

Upvotes: 1

Related Questions