波斯日期选择器

一个波斯（Farsi）日期选择器 for Flutter。

安装

依赖它

dependencies:
  persian_datepicker: ^0.2.1

安装它

flutter packages get

导入它

import 'package:persian_datepicker/persian_datepicker.dart';

用法

一个简单的 TextField 示例，它将变成一个日期选择器

main.dart


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


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

class Home extends StatefulWidget {
  @override
  HomeState createState() {
    return new HomeState();
  }
}

class HomeState extends State<Home> {

  // our text controller
  final TextEditingController textEditingController = TextEditingController();

  PersianDatePickerWidget persianDatePicker;

  @override
  void initState() {


    /*Simple DatePicker*/
    persianDatePicker = PersianDatePicker(
      controller: textEditingController,
      datetime: '1397/06/09',
      outputFormat: 'YYYY/MM/DD',
    ).initialize();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('تقویم ساده'),),
        body: Builder(builder: (BuildContext context) {


          return Container(
            child: TextField(
              onTap: () {
                FocusScope.of(context).requestFocus(new FocusNode()); // to prevent opening default keyboard
                showModalBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
                      return persianDatePicker;
                    });
              },
              controller: textEditingController,
            ),
          );



        }),
      ),
    );
  }
}

效果展示

简单日期选择器

simple





范围日期选择器

/*Range DatePicker*/
persianDatePicker = PersianDatePicker(
  controller: textEditingController,
  datetime: '1397/06/09',
  finishDatetime: '1397/06/15',
  outputFormat: 'YYYY/MM/DD',
).initialize();

range

内联日期选择器

/*Inline DatePicker*/
persianDatePicker = PersianDatePicker(
  controller: textEditingController,
  datetime: '1397/06/19',
  outputFormat: 'YYYY/MM/DD',
).initialize();


....


return Column(
  children: <Widget>[
    // Simple Date Picker
    Container(
      child: persianDatePicker, // just pass `persianDatePicker` variable as child with no ( )
    ),
    TextField(
      controller: textEditingController,
    ),
  ],
);

inline

自定义日期选择器

您可以根据需要自定义日期选择器，有很多选项可以设置，下面的代码只是其中一些。

/*Customized DatePicker*/
persianDatePicker = PersianDatePicker(
    controller: textEditingController,
    outputFormat: 'YYYY/MM/DD',
    datetime: '1397/08/13',
    finishDatetime: '1397/08/17',
    daysBorderWidth: 3,
    weekCaptionsBackgroundColor: Colors.red,
    headerBackgroundColor: Colors.blue.withOpacity(0.5),
    headerTextStyle: TextStyle(color: Colors.blue, fontSize: 17),
    headerTodayText: Text('امروز', style: TextStyle(fontSize: 15),),
    headerTodayIcon: Icon(Icons.access_alarm, size: 15,),
    datePickerHeight: 280
).initialize();

customized

选项

您希望将其连接到日期选择器的输入控件的控制器。此参数是必需的
用于连接日期选择器的文本字段控制器

TextEditingController controller @required

波斯日期时间输入
波斯日期时间输入格式

String datetime     Default: today date

波斯结束日期时间，如果设置了此选项，则日期选择器将变为范围日期选择器
波斯结束日期时间输入，如果设置了此选项，日期选择器将变为范围日期选择器

String finishDatetime

公历日期时间输入
公历日期时间输入格式

String gregorianDatetime

公历结束日期时间，如果设置了此选项，则日期选择器将变为范围日期选择器
公历结束日期时间输入，如果设置了此选项，日期选择器将变为范围日期选择器

String gregorianFinishDatetime

日期选择器的输出格式（显示格式）
日期显示输出格式

  • YYYY（年份显示为四位数）
  • YY（年份显示为两位数）
  • MM（月份小于10时，前面带0）
  • M（月份小于10时，不带0）
  • DD（日期小于10时，前面带0）
  • D（日期小于10时，不带0）
String outputFormat     Default: YYYY/MM/DD

范围输入或输出是两个日期并排显示，中间用rangeSeparator分隔，默认值为#
范围输入或输出是以分隔符隔开的两个日期，分隔符的默认值为#

String rangeSeparator     Default: #

您的日期选择器的高度
日期选择器的高度

double datePickerHeight     Default: 320

当您点击年份标题时，会出现一个带有动画的小对话框，此选项处理对话框出现的持续时间
当您点击年份标题时，会出现一个带有动画的小对话框，此选项处理对话框出现的持续时间

Duration yearSelectionAnimationDuration      Default: 400 milliseconds

年份对话框的曲线类型
年份对话框的动画类型

Curve yearSelectionAnimationCurve     Default: elasticOut

当您点击月份标题时，会出现一个带有动画的小对话框，此选项处理对话框出现的持续时间
当您点击月份标题时，会出现一个带有动画的小对话框，此选项处理对话框出现的持续时间

Duration monthSelectionAnimationDuration     Default: 400 milliseconds

月份对话框的曲线类型
月份对话框的动画类型

Curve monthSelectionAnimationCurve

年份选择对话框中选定年份的背景颜色
年份选择对话框中选定年份的背景颜色

Color yearSelectionBackgroundColor

Color yearSelectionFontColor

Color yearSelectionHighlightBackgroundColor

Color yearSelectionHighlightFontColor

Color monthSelectionBackgroundColor

Color monthSelectionFontColor

Color monthSelectionHighlightBackgroundColor

Color monthSelectionHighlightFontColor

Color weekCaptionsBackgroundColor

Color weekCaptionsFontColor

Color headerBackgroundColor

TextStyle headerTextStyle

Color daysBackgroundColor

Color daysFontColor

Color currentDayBackgroundColor

Color currentDayFontColor

Color selectedDayBackgroundColor

Color selectedDayFontColor

Color headerTodayBackgroundColor

Color disabledDayBackgroundColor

Color disabledDayFontColor

Text headerTodayText

Icon headerTodayIcon

Color daysBorderColor

Color selectedDayBorderColor

Color selectedDaysInnerBorderColor

Color todayBorderColor

double daysBorderWidth

重要提示

rangeSeparator和您自定义的日期分隔符不应相同，否则日期选择器将返回 null
rangeSeparator和您自定义的日期分隔符不应相同，否则日期选择器将返回 null

您可以在示例目录中找到完整的示例

GitHub

https://github.com/Ali-Azmoud/persian_datepicker