Was ist der richtige Weg, um eine Datumsauswahl in der Flatter-App hinzuzufügen?

77

In meiner App erstelle ich eine Anmeldeseite, auf der ich DOB hinzufügen muss. Ich möchte eine Datumsauswahl hinzufügen, aber ich bekomme keine korrekte Methode, um dies zu tun.

Code Hunter
quelle

Antworten:

175

Eine einfache App, die ihre Verwendung demonstriert:

import 'dart:async';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  DateTime selectedDate = DateTime.now();

  Future<void> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2015, 8),
        lastDate: DateTime(2101));
    if (picked != null && picked != selectedDate)
      setState(() {
        selectedDate = picked;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("${selectedDate.toLocal()}".split(' ')[0]),
            SizedBox(height: 20.0,),
            RaisedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select date'),
            ),
          ],
        ),
      ),
    );
  }
}

Und ein Dartpad dazu:

https://dartpad.dev/e5a99a851ae747e517b75ac221b73529

Chemamoline
quelle
Sie könnten ein Dartpad damit erstellen, das Sie kennen. Dartpad Sharing Guide
sudo_kaizen
1
Getan. Dartpad erstellt;)
Chemamoline
Wie entferne ich die Uhrzeit, die ich nur Datum möchte?
Nbn
Sie können Ihre eigene Version erstellen, die das Jahr, den Monat und das Datum verwendet, oder Sie können die folgenden verwendenText("${selectedDate.toLocal()}".split(' ')[0]),
Chemamoline
Sie können auch Future <Null> aus: Future <Null> _selectDate (BuildContext-Kontext) asynchron entfernen und nur: _selectDate (BuildContext-Kontext) async {.....}
DARKVIDE
10

Das Flattern bietet eine showDatePickerFunktion, um dies zu erreichen. Es ist Teil der Flattermaterialbibliothek.

Eine vollständige Dokumentation finden Sie unter showDatePicker .

Ein implementiertes Beispiel finden Sie auch hier: Datums- und Zeitauswahl

Piyush Maurya
quelle
Beispiellink ist 404. Würden Sie bitte in Betracht ziehen, ihn zu aktualisieren?
Lafi
5

für Zeitwähler-

Deklarieren Sie diese Variable auf Klassenebene

TimeOfDay selectedTime =TimeOfDay.now();

und rufen Sie diese Methode auf: -

Future<Null> _selectTime(BuildContext context) async {
    final TimeOfDay picked_s = await showTimePicker(
        context: context,
        initialTime: selectedTime, builder: (BuildContext context, Widget child) {
           return MediaQuery(
             data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
            child: child,
          );});

    if (picked_s != null && picked_s != selectedTime )
      setState(() {
        selectedTime = picked_s;
      });
  }
user12231234
quelle
3

Ein einfacher Weg ist die Verwendung der CupertinoDatePicker- Klasse:

Importieren Sie zuerst das Paket, welches Gebäude flattert:

import 'package:flutter/cupertino.dart';

Fügen Sie dann einfach dieses Widget in Ihr Formular ein:

            Container(
              height: 200,
              child: CupertinoDatePicker(
                mode: CupertinoDatePickerMode.date,
                initialDateTime: DateTime(1969, 1, 1),
                onDateTimeChanged: (DateTime newDateTime) {
                  // Do something
                },
              ),
            ),

Das Ergebnis ist wie folgt:

Datumsauswahl mit CupertinoDatePicker

Sie können den Modus auch in (dateAndTime, time) ändern ... zum Beispiel für den dateAndTime-Modus:

            Container(
              height: 200,
              child: CupertinoDatePicker(
                mode: CupertinoDatePickerMode.dateAndTime,
                initialDateTime: DateTime(1969, 1, 1, 11, 33),
                onDateTimeChanged: (DateTime newDateTime) {
                  //Do Some thing
                },
                use24hFormat: false,
                minuteInterval: 1,
              ),
            ),

Das Ergebnis ist wie folgt:

DateAndTime-Beispiel

AnasSafi
quelle
Wie öffne ich den Code des ersten Bildes auf Knopfdruck und setze den Wert im Textfeld?
Chinmaay
Sollte die akzeptierte Antwort sein. Die einzige Möglichkeit, ein Datum und eine Uhrzeit nativ in Flutter zusammenzustellen.
Giorgio79
2

Zunächst müssen Sie eine Variable erstellen. In dieser Variablen können Sie das ausgewählte Datum wie folgt speichern:

import 'package:flutter/material.dart';
import 'package:intl/intl.dart'; //this is an external package for formatting date and time

class DatePicker extends StatefulWidget {
  @override
  _DatePickerState createState() => _DatePickerState();
}

class _DatePickerState extends State<DatePicker> {
  DateTime _selectedDate;

  //Method for showing the date picker
  void _pickDateDialog() {
    showDatePicker(
            context: context,
            initialDate: DateTime.now(),
            //which date will display when user open the picker
            firstDate: DateTime(1950),
            //what will be the previous supported year in picker
            lastDate: DateTime
                .now()) //what will be the up to supported date in picker
        .then((pickedDate) {
      //then usually do the future job
      if (pickedDate == null) {
        //if user tap cancel then this function will stop
        return;
      }
      setState(() {
        //for rebuilding the ui
        _selectedDate = pickedDate;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(child: Text('Add Date'), onPressed: _pickDateDialog),
        SizedBox(height: 20),
        Text(_selectedDate == null //ternary expression to check if date is null
            ? 'No date chosen!'
            : 'Picked Date: ${DateFormat.yMMMd().format(_selectedDate)}'),
      ],
    );
  }
}
Delowar Hossain
quelle
0

Dies ist auch ein sehr guter Weg:

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

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

  class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new MyHomePage(title: 'Flutter Date Picker Example'),
      );
    }
  }

  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;
    @override
    _MyHomePageState createState() => new _MyHomePageState();
  }

  class _MyHomePageState extends State<MyHomePage> {
    var finaldate;

    void callDatePicker() async {
      var order = await getDate();
      setState(() {
        finaldate = order;
      });
    }

    Future<DateTime> getDate() {
      // Imagine that this function is
      // more complex and slow.
      return showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(2018),
        lastDate: DateTime(2030),
        builder: (BuildContext context, Widget child) {
          return Theme(
            data: ThemeData.light(),
            child: child,
          );
        },
      );
    }

    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(color: Colors.grey[200]),
                padding: EdgeInsets.symmetric(horizontal: 30.0),
                child: finaldate == null
                    ? Text(
                        "Use below button to Select a Date",
                        textScaleFactor: 2.0,
                      )
                    : Text(
                        "$finaldate",
                        textScaleFactor: 2.0,
                      ),
              ),
              new RaisedButton(
                onPressed: callDatePicker,
                color: Colors.blueAccent,
                child:
                    new Text('Click here', style: TextStyle(color: Colors.white)),
              ),
            ],
          ),
        ),
      );
    }
  }

Dies ist von https://fluttercentral.com/Articles/Post/1199/Flutter_DatePicker_Example

Álvaro Agüero
quelle