Flutter波斯语日期时间选择器插件persian_datetimepickers的使用

Flutter波斯语日期时间选择器插件persian_datetimepickers的使用

轻量级 - 简单


如何使用它?

  1. 在pubspec.yaml中添加依赖包
dependencies:
  persian_datetimepickers: ^1.0.3
  1. 导入包
import 'package:persian_datetimepickers/persian_datetimepickers.dart';
  1. 调用选择器
onTap: () async {
    // 时间选择器
    final TimeOfDay? time = await showPersianTimePicker(
      context: context,
    );

    setState(() {
      _pickedTime = time;
    });

    // 日期选择器
    final DateTime? date = await showPersianDatePicker(
      context: context,
    );

    setState(() {
      _pickedDate = date;
    });
},

开发者

Hossein Yousefpour 开发

版权所有 ©

捐赠

如果您觉得这个插件有用,可以考虑捐赠支持作者:


完整示例Demo

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

void main() {
  ThemeData themeData = ThemeData();

  runApp(
    MaterialApp(
      home: const PersianDatePickersExample(),
      theme: themeData.copyWith(
        colorScheme: themeData.colorScheme.copyWith(
          secondary: Colors.purple,
        ),
      ),
    ),
  );
}

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

  [@override](/user/override)
  _PersianDatePickersExampleState createState() => _PersianDatePickersExampleState();
}

class _PersianDatePickersExampleState extends State<PersianDatePickersExample> {
  TimeOfDay? _pickedTime;
  DateTime? _pickedDate;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('波斯语日期时间选择器示例')),
      body: Column(
        children: <Widget>[
          ListTile(
            title: _pickedTime == null
                ? const Text('选择一个时间')
                : const Text('已选时间:'),
            trailing: _pickedTime == null ? null : Text(_pickedTime!.toFancyString()),
            onTap: () async {
              final TimeOfDay? time = await showPersianTimePicker(
                context: context,
              );

              setState(() {
                _pickedTime = time;
              });
            },
          ),
          const SizedBox(height: 16),
          ListTile(
            title: _pickedDate == null
                ? const Text('选择一个日期')
                : const Text('已选日期:'),
            trailing: _pickedDate == null
                ? null
                : Text(
                    _pickedDate!.toFancyString(),
                  ),
            onTap: () async {
              final DateTime? date = await showPersianDatePicker(
                context: context,
              );

              setState(() {
                _pickedDate = date;
              });
            },
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


persian_datetimepickers 是一个用于 Flutter 的插件,专门用于选择波斯(伊朗)日期和时间的控件。这个插件提供了符合波斯日历(Jalali Calendar)的日期选择器和时间选择器,适用于需要支持波斯日历的应用。

使用方法

  1. 添加依赖

    首先,在你的 pubspec.yaml 文件中添加 persian_datetimepickers 依赖:

    dependencies:
      flutter:
        sdk: flutter
      persian_datetimepickers: ^1.1.0
    

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

  2. 导入包

    在你的 Dart 文件中导入 persian_datetimepickers 包:

    import 'package:persian_datetimepickers/persian_datetimepickers.dart';
    
  3. 使用日期选择器

    你可以使用 pDtp.showDatePicker 来显示波斯日期选择器。以下是一个简单的示例:

    ElevatedButton(
      onPressed: () async {
        final selectedDate = await pDtp.showDatePicker(
          context: context,
          initialDate: DateTime.now(),
          firstDate: DateTime(1300),
          lastDate: DateTime(1500),
        );
        if (selectedDate != null) {
          print("Selected Date: $selectedDate");
        }
      },
      child: Text("Select Date"),
    );
    
  4. 使用时间选择器

    你可以使用 pDtp.showTimePicker 来显示波斯时间选择器。以下是一个简单的示例:

    ElevatedButton(
      onPressed: () async {
        final selectedTime = await pDtp.showTimePicker(
          context: context,
          initialTime: TimeOfDay.now(),
        );
        if (selectedTime != null) {
          print("Selected Time: $selectedTime");
        }
      },
      child: Text("Select Time"),
    );
    
  5. 自定义日期格式

    你可以根据需要自定义日期和时间的显示格式。persian_datetimepickers 使用 Jalali 类来处理波斯日期,你可以使用 Jalali 类的格式化方法来显示日期。

    例如:

    Jalali now = Jalali.now();
    String formattedDate = "${now.year}/${now.month}/${now.day}";
    print("Today's Date: $formattedDate");
    

完整示例

以下是一个完整的示例,展示如何使用 persian_datetimepickers 插件来选择日期和时间:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PersianDateTimePickerDemo(),
    );
  }
}

class PersianDateTimePickerDemo extends StatefulWidget {
  [@override](/user/override)
  _PersianDateTimePickerDemoState createState() => _PersianDateTimePickerDemoState();
}

class _PersianDateTimePickerDemoState extends State<PersianDateTimePickerDemo> {
  DateTime? _selectedDate;
  TimeOfDay? _selectedTime;

  Future<void> _selectDate(BuildContext context) async {
    final selectedDate = await pDtp.showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(1300),
      lastDate: DateTime(1500),
    );
    if (selectedDate != null) {
      setState(() {
        _selectedDate = selectedDate;
      });
    }
  }

  Future<void> _selectTime(BuildContext context) async {
    final selectedTime = await pDtp.showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );
    if (selectedTime != null) {
      setState(() {
        _selectedTime = selectedTime;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Persian DateTime Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: Text("Select Date"),
            ),
            Text(_selectedDate != null ? "Selected Date: $_selectedDate" : "No Date Selected"),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectTime(context),
              child: Text("Select Time"),
            ),
            Text(_selectedTime != null ? "Selected Time: $_selectedTime" : "No Time Selected"),
          ],
        ),
      ),
    );
  }
}
回到顶部