如何将颤动的日期选择器值添加到文本字段？

Posted 2023-02-23

【中文标题】如何将颤动的日期选择器值添加到文本字段？

【英文标题】：How to get flutter datepicker value to the textfield?

【发布时间】：2020-10-13 03:01:51

【问题描述】：

如何将颤振日期选择器值添加到文本字段？当我单击文本字段时，它会在选择日期后弹出日期选择器。我想成为文本字段中的那个日期

还有。

我想自定义日期选择器的颜色

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

【参考方案1】：

我将您的代码修复如下（您可以从 DatePicker 中选择日期，您可以自定义 DatePicker 的主题）：

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;

您还必须在 pubspec.yaml 中添加 Intl 依赖项：

dev_dependencies:
  flutter_test:
    sdk: flutter
  intl: ^0.16.1

最后在你的 main 中调用 TestPickerWidget 来测试它。

【参考方案2】：

你可以这样使用

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

【参考方案3】：

试试这个。 首先，您需要定义一个 TextEditing 控制器。 然后您可以访问该控制器来设置选定的日期。

这是您可自定义的日期选择器。

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2019, 1),
  lastDate: DateTime(2021,12),
  builder: (context,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();
     
 );

You can try this live preview.