Flutter将日期时间选择器限制为AM或PM选择

Question

嗨，我正在使用flutter_datetime_picker。 （https://pub.dev/packages/flutter_datetime_picker）

我想根据较早的条件将时间选择限制为AM或PM。我可以知道该怎么做吗？

我的代码现在是：

DatePicker.showTime12hPicker(context,
  showTitleActions: true, 
  onChanged: (date) {
    print('$date');
  }, 
  onConfirm: (date) {
    ...
  }, 
  currentTime: DateTime.now()
);

Answer 1

您可以在下面复制粘贴运行完整代码
您可以扩展CommonPickerModel并将String AM PM提供给pickerModel
代码段

DatePicker.showPicker(
...
pickerModel:
    CustomPicker(currentTime: DateTime.now(), amPm: "AM"),
...

class CustomPicker extends CommonPickerModel {
  int _currentLeftIndex;
  int _currentMiddleIndex;
  int _currentRightIndex;
  String _amPm;

  CustomPicker({DateTime currentTime, LocaleType locale, String amPm})
      : super(locale: locale) {
    this.currentTime = currentTime ?? DateTime.now();

    _currentLeftIndex = this.currentTime.hour % 12;
    _currentMiddleIndex = this.currentTime.minute;
    _currentRightIndex = 0;

    this.setLeftIndex(this.currentTime.hour);
    this.setMiddleIndex(this.currentTime.minute);
    this.setRightIndex(_currentRightIndex);
    _amPm = amPm;
  }

工作演示

完整代码

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

String digits(int value, int length) {
  return '$value'.padLeft(length, "0");
}

class CustomPicker extends CommonPickerModel {
  int _currentLeftIndex;
  int _currentMiddleIndex;
  int _currentRightIndex;
  String _amPm;

  CustomPicker({DateTime currentTime, LocaleType locale, String amPm})
      : super(locale: locale) {
    this.currentTime = currentTime ?? DateTime.now();

    _currentLeftIndex = this.currentTime.hour % 12;
    _currentMiddleIndex = this.currentTime.minute;
    _currentRightIndex = 0;

    this.setLeftIndex(this.currentTime.hour);
    this.setMiddleIndex(this.currentTime.minute);
    this.setRightIndex(_currentRightIndex);
    _amPm = amPm;
  }

  @override
  String leftStringAtIndex(int index) {
    if (index >= 0 && index < 12) {
      if (index == 0) {
        return digits(12, 2);
      } else {
        return digits(index, 2);
      }
    } else {
      return null;
    }
  }

  @override
  String middleStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String rightStringAtIndex(int index) {
    if (index == 0) {
      return _amPm;
    } else {
      return null;
    }
  }

  @override
  String leftDivider() {
    return ":";
  }

  @override
  String rightDivider() {
    return ":";
  }

  @override
  List<int> layoutProportions() {
    return [1, 1, 1];
  }

  @override
  DateTime finalTime() {
    int rightIndex = 0;
    if (_amPm == "AM") {
      rightIndex = 0;
    } else {
      rightIndex = 1;
    }
    int hour = this.currentLeftIndex() + 12 * rightIndex;

    return currentTime.isUtc
        ? DateTime.utc(currentTime.year, currentTime.month, currentTime.day,
            hour, this.currentMiddleIndex(), 0)
        : DateTime(currentTime.year, currentTime.month, currentTime.day, hour,
        this.currentMiddleIndex(), 0);
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
                onPressed: () {
                  DatePicker.showPicker(
                    context,
                    showTitleActions: true,
                    onChanged: (date) {
                      print('change $date in time zone ' +
                          date.timeZoneOffset.inHours.toString());
                    },
                    onConfirm: (date) {
                      print('confirm $date');
                    },
                    pickerModel:
                        CustomPicker(currentTime: DateTime.now(), amPm: "AM"),
                    locale: LocaleType.en,
                  );
                },
                child: Text(
                  'AM',
                  style: TextStyle(color: Colors.blue),
                )),
            FlatButton(
                onPressed: () {
                  DatePicker.showPicker(
                    context,
                    showTitleActions: true,
                    onChanged: (date) {
                      print('change $date in time zone ' +
                          date.timeZoneOffset.inHours.toString());
                    },
                    onConfirm: (date) {
                      print('confirm $date');
                    },
                    pickerModel:
                        CustomPicker(currentTime: DateTime.now(), amPm: "PM"),
                    locale: LocaleType.en,
                  );
                },
                child: Text(
                  'PM',
                  style: TextStyle(color: Colors.blue),
                )),
          ],
        ),
      ),
    );
  }
}