CODEWITHSUNDEEP
dartflutter
Deepak Gehlot
Deepak Gehlot

Reputation: 2971

How can i hide day from cupertino date picker

i need to pic only year and month from the date picker, so how can i hide day from date picker.

CupertinoDatePicker(
    initialDateTime: DateTime.now(),
    onDateTimeChanged: (DateTime newdate) {
        print(newdate);
        widget.card.expDateTime = newdate.toString();
         dateCnt.text = newdate.toString().split(" ")[0];
    },
    minimumYear: DateTime.now().year,
    minimumDate: DateTime.now(),
    mode: CupertinoDatePickerMode.date,
)

Upvotes: 10

Views: 13241

Answers (5)

Syed Asfar Ali
Syed Asfar Ali

Reputation: 21

Easy Way to do this is to just add

mode: CupertinoDatePickerMode.monthYear

and whole code will be

CupertinoDatePicker(
       mode: CupertinoDatePickerMode.monthYear,
       initialDateTime: DateTime.now().add(const Duration(days: 2)),
       onDateTimeChanged: (value) {
          setState(() {
            _expireDateController.text = DateFormat('MM/yy').format(value);
          });
       },
       minimumDate: DateTime.now(),
 ),

Upvotes: 0

Marcos Maliki
Marcos Maliki

Reputation: 600

There has been updates on the flutter_cupertino_date_picker package. You can now specify a date format

 DatePicker.showDatePicker(context,
            maxDateTime: DateTime.now(),
              dateFormat:'MMMM-yyyy'
            );

enter image description here

Upvotes: 1

Daniel
Daniel

Reputation: 1079

I had this problem, tried the package flutter_cupertino_date_picker but it looks like it don't have the hability to format only month and year excluding day, so you need to program on it to extend the capabilities. To me seemed more logical to change the build in CupertinoDatePicker that comes with Flutter, what I did was copy all the content of '/Users/your_user_name/developer/flutter/packages/flutter/lib/src/cupertino/date_picker.dart' in another file in my local envirronment, I called cupertino_picker_extended.dart, then (because I wanted a quick way) on line 1182 I changed: Text(localizations.datePickerDayOfMonth(day),... for Text('',...

Then where you need to use the customed Picker call it like: 

import 'package:local_app/ui/widgets/cupertino_picker_extended.dart' as CupertinoExtended;

and use it:

  CupertinoExtended.CupertinoDatePicker(
    onDateTimeChanged: (DateTime value) {
      setDate('${value.month}/${value.year}', setDateFunction,
          section, arrayPos);
    },
    initialDateTime: DateTime.now(),
    mode: CupertinoExtended.CupertinoDatePickerMode.date,
  ),

This is the result: screenshot

Hope it help someone and save the time I been looking for a easy and quick solution for my problem.

Upvotes: 14

Kalimwenjuma Robbyn
Kalimwenjuma Robbyn

Reputation: 42

This is the way to go

  Widget datetime() {
return CupertinoDatePicker(
  initialDateTime: DateTime.now(),
  onDateTimeChanged: (DateTime newdate) {
    print(newdate);
  },
  minimumYear: 2010,
  maximumYear: 2030,
  mode: CupertinoDatePickerMode.date,
);

}

Upvotes: -3

Viren V Varasadiya
Viren V Varasadiya

Reputation: 27137

you have to look at flutter_cupertino_date_picker package this to do so. you can avoid picking date from user.

like below example i edited as you wish. i hope that it help you to achieve what you want.

  import 'package:flutter/material.dart';
  import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Date Picker Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      );
    }
  }

  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key}) : super(key: key);

    @override
    _MyHomePageState createState() => _MyHomePageState();
  }

  class _MyHomePageState extends State<MyHomePage> {
    String _datetime = '';
    int _year = 2018;
    int _month = 11;

    String _lang = 'en';
    String _format = 'yyyy-mm';
    bool _showTitleActions = true;

    TextEditingController _langCtrl = TextEditingController();
    TextEditingController _formatCtrl = TextEditingController();

    @override
    void initState() {
      super.initState();
      _langCtrl.text = 'zh';
      _formatCtrl.text = 'yyyy-mm';

      DateTime now = DateTime.now();
      _year = now.year;
      _month = now.month;
    }

    /// Display date picker.
    void _showDatePicker() {
      final bool showTitleActions = false;
      DatePicker.showDatePicker(
        context,
        showTitleActions: _showTitleActions,
        minYear: 1970,
        maxYear: 2020,
        initialYear: _year,
        initialMonth: _month,
        confirm: Text(
          'custom ok',
          style: TextStyle(color: Colors.red),
        ),
        cancel: Text(
          'custom cancel',
          style: TextStyle(color: Colors.cyan),
        ),
        locale: _lang,
        dateFormat: _format,
        onChanged: (year, month,date) {
          debugPrint('onChanged date: $year-$month');

          if (!showTitleActions) {
            _changeDatetime(year, month);
          }
        },
        onConfirm: (year, month,date) {
          _changeDatetime(year, month);
        },
      );
    }

    void _changeDatetime(int year, int month) {
      setState(() {
        _year = year;
        _month = month;
        _datetime = '$year-$month';
      });
    }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Date Picker Demo'),
        ),
        body: Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          child: Column(
            children: <Widget>[
              // show title actions checkbox
              Row(
                children: <Widget>[
                  Text(
                    'Show title actions',
                    style: TextStyle(fontSize: 16.0),
                  ),
                  Checkbox(
                    value: _showTitleActions,
                    onChanged: (value) {
                      setState(() {
                        _showTitleActions = value;
                      });
                    },
                  )
                ],
              ),

              // Language input field
              TextField(
                controller: _langCtrl,
                keyboardType: TextInputType.url,
                decoration: InputDecoration(
                  labelText: 'Language',
                  hintText: 'en',
                  hintStyle: TextStyle(color: Colors.black26),
                ),
                onChanged: (value) {
                  _lang = value;
                },
              ),

              // Formatter input field
              TextField(
                controller: _formatCtrl,
                keyboardType: TextInputType.url,
                decoration: InputDecoration(
                  labelText: 'Formatter',
                  hintText: 'yyyy-mm-dd / yyyy-mmm-dd / yyyy-mmmm-dd',
                  hintStyle: TextStyle(color: Colors.black26),
                ),
                onChanged: (value) {
                  _format = value;
                },
              ),

              // Selected date
              Container(
                margin: EdgeInsets.only(top: 40.0),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'Selected Date:',
                      style: Theme.of(context).textTheme.subhead,
                    ),
                    Container(
                      padding: EdgeInsets.only(left: 12.0),
                      child: Text(
                        '$_datetime',
                        style: Theme.of(context).textTheme.title,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _showDatePicker,
          tooltip: 'Show DatePicker',
          child: Icon(Icons.date_range),
        ),
      );
    }
  }

Upvotes: 1

Related Questions