【问题标题】:Flutter | How to validate time picker颤振 |如何验证时间选择器
【发布时间】:2020-06-28 04:27:10
【问题描述】:

在这里我想验证时间选择器。当我要从时间选择器中选择时间时,它必须只允许我选择当前时间或当前时间之前。我不应该允许选择未来的时间。

这是我试过的时间选择器 sn-p。

DateTimeField(
      format: format,
      autocorrect: true,
      autovalidate: false,
      controller: _serviceDate,
      readOnly: true,
      validator: (date) => (date == null || _serviceDate.text == '')
          ? 'Please enter valid date'
          : null,
      onShowPicker: (context, currentValue) async {
        final date = await showDatePicker(
            context: context,
            firstDate: DateTime.now(),
            initialDate: currentValue ?? DateTime.now(),
            lastDate: DateTime(2100));
        if (date != null) {
          final time = await showTimePicker(
            context: context,
            initialTime: TimeOfDay.fromDateTime(
              currentValue ?? DateTime.now(),
            ),
          );
          return DateTimeField.combine(date, time);
        } else {
          return currentValue;
        }
      },
    );

【问题讨论】:

  • 将您的 firstDate 更改为 firstDate:DateTime(1900) 并将 lastDate 更改为 lastDate:DateTime.now()
  • 我说的是时间而不是日期

标签: flutter dart flutter-layout timepicker


【解决方案1】:

您可以在 DateTimeField 上启用 autovalidateMode,然后检查所选 DateTime 与当前 DateTime 的 DateTime 差异。如果时差为负数,则表示选择的 DateTime 是过去的。

DateTimeField(
  format: format,
  autocorrect: true,
  readOnly: true,
  autovalidateMode: AutovalidateMode.onUserInteraction,
  validator: (DateTime? selectedDateTime) {
    if (selectedDateTime != null) {
      // If the DateTime difference is negative,
      // this indicates that the selected DateTime is in the past
      if (selectedDateTime.difference(DateTime.now()).isNegative) {
        debugPrint('Selected DateTime is in the past');
      } else {
        debugPrint('Selected DateTime is in the future');
      }
    }
  },
  onShowPicker: ...
),

除此之外,您可能还需要考虑将showDatePicker 上的lastDate 设置为DateTime.now(),以便无法选择未来的日期。

这是您可以试用的完整示例。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final format = DateFormat("yyyy-MM-dd HH:mm");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DateTimeField(
              format: format,
              autocorrect: true,
              readOnly: true,
              autovalidateMode: AutovalidateMode.onUserInteraction,
              validator: (DateTime? selectedDateTime) {
                if (selectedDateTime != null) {
                  // If the DateTime difference is negative,
                  // this indicates that the selected DateTime is in the past
                  if (selectedDateTime.difference(DateTime.now()).isNegative) {
                    debugPrint('Selected DateTime is in the past');
                  } else {
                    debugPrint('Selected DateTime is in the future');
                  }
                }
              },
              onShowPicker: (context, currentValue) async {
                final date = await showDatePicker(
                    context: context,
                    firstDate: DateTime(1900),
                    initialDate: DateTime.now(),
                    lastDate: DateTime.now());
                if (date != null) {
                  final time = await showTimePicker(
                    context: context,
                    initialTime: TimeOfDay.fromDateTime(
                      currentValue ?? DateTime.now(),
                    ),
                  );
                  return DateTimeField.combine(date, time);
                } else {
                  return currentValue;
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】:

    猜你喜欢
    • 2021-09-05
    • 1970-01-01
    • 1970-01-01
    • 2018-07-21
    • 1970-01-01
    • 2023-03-25
    • 1970-01-01
    • 2022-11-21
    • 2020-03-07
    相关资源
    最近更新 更多