Flutter日期时间选择器插件lunar_datetime

Flutter 农历日期选择器

阳历显示	阴历显示

引用

lunar_datetime_picker: ^0.0.3

使用

DatePicker.showDatePicker(
  context,
  lunarPicker: false,
  theme: const LunarDatePickerTheme(
    doneStyle: TextStyle(color: Colors.green)),
  dateInitTime: DateInitTime(
    currentTime: DateTime.now(),
    maxTime: DateTime(2026, 12, 12),
    minTime: DateTime(2018, 3, 4)),
  onConfirm: (time) {
    debugPrint(time.toString());
  },
  onChanged: (time) {
    debugPrint("change:${time.toString()}");
  },
);

感谢

flutter_datetime_picker 提供 PickerView 方案
lunar_flutter 提供农历日期算法
flutter_lunar_datetime_picker 提供农历日期

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用lunar_datetime_picker插件来选择阳历和阴历日期。

import 'package:flutter/material.dart';

import 'package:intl/intl.dart';
import 'package:lunar_datetime_picker/date_init.dart';
import 'package:lunar_datetime_picker/datetime_picker_theme.dart';
import 'package:lunar_datetime_picker/lunar_datetime_picker.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 HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  /// 日期
  String? time = '1995-11-8 12:12';

  /// 是否是农历
  bool lunar = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("日期选择器"),
      ),
      body: Center(
          child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            "日期:$time",
            style: const TextStyle(fontSize: 30),
          ),
          const SizedBox(height: 100),
          ElevatedButton(
            onPressed: () {
              DatePicker.showDatePicker(
                context,
                lunarPicker: lunar,
                theme: const LunarDatePickerTheme(
                    backgroundColor: Colors.white,
                    doneStyle: TextStyle(color: Colors.green)),
                dateInitTime: time == null
                    ? DateInitTime(
                        currentTime: DateTime.now(),
                        maxTime: DateTime(2026, 12, 12),
                        minTime: DateTime(1990, 3, 4))
                    : DateInitTime(
                        currentTime:
                            DateFormat("yyyy-MM-dd h:m").parse(time ?? ""),
                        maxTime: DateTime(2026, 12, 12),
                        minTime: DateTime(1990, 3, 4)),
                onConfirm: (time, lunar) {
                  debugPrint(time.toString());
                  setState(() {
                    this.time =
                        "${time.year}-${time.month}-${time.day} ${time.hour}:${time.minute}";
                    this.lunar = lunar;
                  });
                },
                onChanged: (time, lunar) {
                  debugPrint("change:${time.toString()}");
                },
              );
            },
            child: const Text("选择"),
          )
        ],
      )),
    );
  }
}

代码解释

导入必要的包：

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:lunar_datetime_picker/date_init.dart';
import 'package:lunar_datetime_picker/datetime_picker_theme.dart';
import 'package:lunar_datetime_picker/lunar_datetime_picker.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 HomePage(),
    );
  }
}

定义主页面：

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

定义状态类：

class _HomePageState extends State<HomePage> {
  String? time = '1995-11-8 12:12'; // 当前选中的日期
  bool lunar = true; // 是否使用农历

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("日期选择器"),
      ),
      body: Center(
          child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            "日期:$time",
            style: const TextStyle(fontSize: 30),
          ),
          const SizedBox(height: 100),
          ElevatedButton(
            onPressed: () {
              DatePicker.showDatePicker(
                context,
                lunarPicker: lunar,
                theme: const LunarDatePickerTheme(
                    backgroundColor: Colors.white,
                    doneStyle: TextStyle(color: Colors.green)),
                dateInitTime: time == null
                    ? DateInitTime(
                        currentTime: DateTime.now(),
                        maxTime: DateTime(2026, 12, 12),
                        minTime: DateTime(1990, 3, 4))
                    : DateInitTime(
                        currentTime:
                            DateFormat("yyyy-MM-dd h:m").parse(time ?? ""),
                        maxTime: DateTime(2026, 12, 12),
                        minTime: DateTime(1990, 3, 4)),
                onConfirm: (time, lunar) {
                  debugPrint(time.toString());
                  setState(() {
                    this.time =
                        "${time.year}-${time.month}-${time.day} ${time.hour}:${time.minute}";
                    this.lunar = lunar;
                  });
                },
                onChanged: (time, lunar) {
                  debugPrint("change:${time.toString()}");
                },
              );
            },
            child: const Text("选择"),
          )
        ],
      )),
    );
  }
}

更多关于Flutter日期时间选择器插件lunar_datetime_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 1楼

更多关于Flutter日期时间选择器插件lunar_datetime_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

lunar_datetime_picker 是一个 Flutter 插件，用于选择农历日期和时间。它结合了公历和农历的功能，适用于需要同时显示或选择农历日期的场景。以下是使用 lunar_datetime_picker 的基本步骤和示例代码。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 lunar_datetime_picker 依赖：

dependencies:
  flutter:
    sdk: flutter
  lunar_datetime_picker: ^0.1.0  # 请确保使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 基本使用

以下是一个简单的示例，展示如何使用 lunar_datetime_picker 来选择日期。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  DateTime? _selectedDate;

  Future<void> _showLunarDatePicker() async {
    final DateTime? picked = await showLunarDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(1900),
      lastDate: DateTime(2100),
    );
    if (picked != null && picked != _selectedDate) {
      setState(() {
        _selectedDate = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lunar Date Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _selectedDate == null
                  ? 'No date selected.'
                  : 'Selected Date: ${_selectedDate!.toString()}',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _showLunarDatePicker,
              child: Text('Pick a Date'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 解释代码

showLunarDatePicker: 这是 lunar_datetime_picker 提供的一个方法，用于显示日期选择器。它返回一个 DateTime 对象，用户选择的日期。
initialDate: 设置日期选择器的初始日期。
firstDate 和 lastDate: 分别设置用户可以选择的最早和最晚日期。

4. 更多功能

lunar_datetime_picker 还提供了其他功能，比如自定义日期格式、显示农历信息等。你可以根据需要进行更详细的配置。

例如，如果你想显示农历日期，可以在选择日期后，使用 Lunar 类来获取农历信息：

import 'package:lunar_datetime_picker/lunar.dart';

void _showLunarDatePicker() async {
  final DateTime? picked = await showLunarDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(1900),
    lastDate: DateTime(2100),
  );
  if (picked != null) {
    final Lunar lunar = Lunar.fromDateTime(picked);
    setState(() {
      _selectedDate = picked;
      _lunarDate = lunar.toString();  // 显示农历日期
    });
  }
}