Flutter日期选择器插件jalalidatepicker的使用

Flutter日期选择器插件jalalidatepicker的使用

JalaLi/Shamsi日历 日期选择器和时间选择器

适用于Android和iOS的波斯日期（Jalali/Shamsi日期）的日历、日期选择器和日期转换器。

使用方法

在Flutter的pubspec.yaml文件中添加依赖

jalalidatepicker: <Last Version>

导入插件到你的Dart文件

import 'package:jalalidatepicker/jalalidatepicker.dart';

导入日期转换器到你的Dart文件

import 'package:persian_date/persian_date.dart';

显示日历

如果想将选中的日期以Jalali（Shamsi）格式返回，可以使用jalaliCalendarPicker()构造函数，并设置convertToGregorian为false。如果你想将日期以Gregorian（Miladi）格式返回，则设置convertToGregorian为true。

示例代码：返回选中的日期为Jalali格式

Future _selectDate() async {
  String? picked = await jalaliCalendarPicker(
    context: context, 
    convertToGregorian: false
  );
  if (picked != null) setState(() => _value = picked);
  print(_value);
}

示例代码：返回选中的日期为Gregorian格式

Future _selectDate() async {
  String? picked = await jalaliCalendarPicker(
    context: context, 
    convertToGregorian: true
  );
  if (picked != null) setState(() => _value = picked);
  print(_value);
}

使用时间选择器

要显示时间选择器，可以使用以下参数：

  • showTimePicker: 设置为true以显示时间选择器。
  • hore24Format: 设置为true以返回24小时制的时间。
  • initialTime: 使用TimeOfDay来设置初始时间。

使用日期选择器

要显示日期选择器，需要以下参数：

  • minYear: 设置最小年份。
  • maxYear: 设置最大年份。
  • confirm 和 cancel: 设置确认和取消按钮的文本。
  • _format: 设置返回日期的格式。
  • onChanged: 当用户更改日期时触发。
  • onConfirm: 当用户点击确认按钮时触发。

示例代码：完整的日期选择器

void _showDatePicker() {
  final bool showTitleActions = false;
  DatePicker.showDatePicker(
    context,
    minYear: 1300,
    maxYear: 1450,
    confirm: Text(
      '确认',
      style: TextStyle(color: Colors.red),
    ),
    cancel: Text(
      '取消',
      style: TextStyle(color: Colors.cyan),
    ),
    dateFormat: _format,
    onChanged: (year, month, day) {
      if (!showTitleActions) {
        _changeDatetime(year, month, day);
      }
    },
    onConfirm: (year, month, day) {
      _changeDatetime(year, month, day);
      _valuePiker = " 完整日期 : $_datetime \n 年 : $year \n 月 : $month \n 日 : $day";
    }
  );
}

void _changeDatetime(int year, int month, int day) {
  setState(() {
    _datetime = '$year-$month-$day';
  });
}

全部日期转换器示例

void main() {
  PersianDate pDate = PersianDate(gregorian: "1989-01-29");
  print("现在 ${pDate.getDate}");

  PersianDate persianDate = PersianDate();
  print("现在 ${persianDate.now}");
  print(persianDate.hour);
  print("年 ${persianDate.year}");
  print("是否节假日 ${persianDate.isHoliday}");
  print("星期几 ${persianDate.weekdayname}");
  print(persianDate.monthname); // 月份名称
  print(persianDate.month); // 月份
  print(persianDate.day); // 日期
  print(persianDate.hour); // 小时
  print(persianDate.minute); // 分钟
  print(persianDate.second); // 秒
  print(persianDate.millisecond); // 毫秒
  print(persianDate.microsecond); // 微秒

  print("将公历转换为波斯历 ${persianDate.gregorianToJalali("2019-02-20T00:19:54.000Z","yyyy-m-d hh:nn")}");
  print("将波斯历转换为公历 ${persianDate.jalaliToGregorian("1368-05-30 19:54", "yyyy-m-d hh:nn")}");
}

支持的日期转换格式

"2012-02-27 13:27:00"
"2012-02-27 13:27:00.123456z"
"2012-02-27 13:27:00,123456z"
"20120227 13:27:00"
"20120227T132700"
"20120227"
"+20120227"
"2012-02-27T14Z"
"2012-02-27T14+00:00"
"-123450101 00:00:00 Z": 在公元前12345年。
"2002-02-27T14:00:00-0500": 同等于 "2002-02-27T19:00:00Z"

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

1 回复

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


当然，关于在Flutter中使用jalalidatepicker插件来实现日期选择器的功能，以下是一个简单的代码示例，展示了如何集成和使用该插件。

首先，确保你已经在pubspec.yaml文件中添加了jalalidatepicker依赖：

dependencies:
  flutter:
    sdk: flutter
  jalalidatepicker: ^最新版本号  # 请替换为实际发布的最新版本号

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

接下来，在你的Flutter项目中，你可以按照以下方式使用jalalidatepicker：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Jalali Date Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Jalali Date Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDate == null
                  ? 'No date selected'
                  : 'Selected date: ${selectedDate!.toLocal()}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final DateTime? pickedDate = await showJalaliDatePicker(
                  context: context,
                  initialDate: selectedDate ?? DateTime.now(),
                  firstDate: DateTime(1300), // Jalali year 1300
                  lastDate: DateTime(1500), // Jalali year 1500
                );
                if (pickedDate != null && pickedDate != selectedDate) {
                  setState(() {
                    selectedDate = pickedDate;
                  });
                }
              },
              child: Text('Select Date'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个文本显示当前选中的日期和一个按钮用于打开日期选择器。当用户点击按钮时，会弹出一个Jalali（波斯历）日期选择器，用户可以选择一个日期，选择完成后，选中的日期会显示在文本控件中。

  • showJalaliDatePicker函数用于显示日期选择器对话框。
  • initialDate参数设置初始显示的日期。
  • firstDate和lastDate参数限制了可选日期的范围。

请确保在实际使用中替换最新版本号为jalalidatepicker插件的实际最新版本号。

这个示例应该能够帮助你快速上手在Flutter项目中使用jalalidatepicker插件。

回到顶部