1
votes

Comment obtenir la valeur de flutter datepicker dans le champ de texte?

Comment obtenir la valeur du sélecteur de date flottant dans le champ de texte? Lorsque je clique sur le champ de texte, le sélecteur de date apparaît après avoir choisi la date. je voulais aussi être cette date dans le champ de texte

je veux personnaliser la couleur du sélecteur de date

     onTap: () {
       FocusScope.of(context).requestFocus(new FocusNode());
       showDatePicker(
       context: context,
       initialDate: DateTime.now(),
       firstDate: DateTime(2019, 1),
       lastDate: DateTime(2021,12),
        );
       },

android flutter ios dart flutter-layout

0 commentaires

3 Réponses :

1
votes

Vous pouvez utiliser comme ceci

showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime(2019, 1),
                lastDate: DateTime(2021, 12),
              ).then((pickedDate) {
                //do whatever you want
              });

0 commentaires

1
votes

Essayez ceci. Tout d'abord, vous devez créer un contrôleur TextEditing. Ensuite, vous pouvez accéder à ce contrôleur pour définir la date sélectionnée.

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2019, 1),
  lastDate: DateTime(2021,12),
  builder: (BuildContext context, Widget picker){
    return Theme(
    //TODO: change colors
    data: ThemeData.dark().copyWith(
      colorScheme: ColorScheme.dark(
        primary: Colors.deepPurple,
        onPrimary: Colors.white,
        surface: Colors.pink,
        onSurface: Colors.yellow,
      ),
      dialogBackgroundColor:Colors.green[900],
     ),
     child: picker,);
   })
   .then((selectedDate) {
     //TODO: handle selected date
     if(selectedDate!=null){
       _controller.text = selectedDate.toString();
     }
 });

Voici votre sélecteur de date personnalisable.

TextField(
  controller: _controller,
),

Vous pouvez essayer cet aperçu en direct .

0 commentaires

4
votes

Je corrige votre code comme ci-dessous (vous pouvez sélectionner la date dans DatePicker et vous pouvez personnaliser le thème de DatePicker):

dev_dependencies:
  flutter_test:
    sdk: flutter
  intl: ^0.16.1

et vous devez également ajoutez la dépendance Intl dans votre pubspec.yaml:

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

class TestPickerWidget extends StatefulWidget {
  @override
  _TestPickerWidgetState createState() => _TestPickerWidgetState();
}

class _TestPickerWidgetState extends State<TestPickerWidget> {
  DateTime _selectedDate;
  TextEditingController _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextField(
          focusNode: AlwaysDisabledFocusNode(),
          controller: _textEditingController,
          onTap: () {
            _selectDate(context);
          },
        ),
      ),
    );
  }

  _selectDate(BuildContext context) async {
    DateTime newSelectedDate = await showDatePicker(
        context: context,
        initialDate: _selectedDate != null ? _selectedDate : DateTime.now(),
        firstDate: DateTime(2000),
        lastDate: DateTime(2040),
        builder: (BuildContext context, Widget child) {
          return Theme(
            data: ThemeData.dark().copyWith(
              colorScheme: ColorScheme.dark(
                primary: Colors.deepPurple,
                onPrimary: Colors.white,
                surface: Colors.blueGrey,
                onSurface: Colors.yellow,
              ),
              dialogBackgroundColor: Colors.blue[500],
            ),
            child: child,
          );
        });

    if (newSelectedDate != null) {
      _selectedDate = newSelectedDate;
      _textEditingController
        ..text = DateFormat.yMMMd().format(_selectedDate)
        ..selection = TextSelection.fromPosition(TextPosition(
            offset: _textEditingController.text.length,
            affinity: TextAffinity.upstream));
    }
  }
}

class AlwaysDisabledFocusNode extends FocusNode {
  @override
  bool get hasFocus => false;
}

Enfin, appelez TestPickerWidget dans votre main pour le tester.

0 commentaires