Persian Datepicker #

A persian ( farsi ) datepicker for flutter.

Installation #

Depend on it

dependencies:
  persian_datepicker: ^0.2.1

Install it

flutter packages get

Import it

import 'package:persian_datepicker/persian_datepicker.dart';

Usage #

A simple example with a TextField which turns into a datepicker

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,
            ),
          );



        }),
      ),
    );
  }
}

HOW IT LOOKS #

Simple Datepicker

[]

Range Datepicker

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

[]

Inline Datepicker

/*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,
    ),
  ],
);

[]

Customized Datepicker

You can customize datepicker as you wish, there are a lot of options to set, below code is just a few of them.

/*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();

[]

Options #

The controller of the input which you want to connect it to datepicker. This parameter is required
کنترلر تکست فیلدی که میخواهید به دیت پیکر تبدیل کنید

TextEditingController controller @required

Persian input datetime
ورودی دیت پیکر به فرمت تاریخ پارسی

String datetime

Persian input finish datetime, if this option is set, then datepicker changes to range datepicker
ورودی دیت پیکر برای تاریخ پایان به فرمت پارسی، اگر این ورودی ست شود، دیت پیکر به صورت محدوده ای خواهد بود

String finishDatetime

Gregorian input datetime
ورودی دیت پیکر به فرمت تاریخ میلادی

String gregorianDatetime

Gregorian finish datetime, if this option is set, then datepicker changes to range datepicker
ورودی دیت پیکر برای تاریخ پایان به فرمت گرگورین، اگر این ورودی ست شود، دیت پیکر به صورت محدوده ای خواهد بود

String gregorianFinishDatetime

Output format of the datepicker ( display format ) فرمت خروجی نمایش تاریخ

• YYYY ( four digits year سال به صورت چهار رقمی )
• YY ( two digits year سال به صورت دو رقمی )
• MM ( 0 lead month ماه با صفر در ابتدای عددهای کمتر از 10 )
• M ( month number ماه بدون صفر در ابتدای عددهای کمتر از 10 )
• DD ( 0 lead day number روز با صفر در ابتدای اعداد کمتر از 10 )
• D ( day number روز بدون صفر در ابتدای اعداد کمتر از 10 )

String outputFormat

Range output or input is two dates beside to each other with a separator between them which is rangeSeparator, default value is #
فرمت ورودی یا خروجی محدوده به صورت دو تاریخ کنار هم با یک جدا کننده است. این ورودی همان جدا کننده است که مقدار پیش فرض آن # میباشد

String rangeSeparator

double datePickerHeight

int yearSelectionAnimationDuration

Curve yearSelectionAnimationCurve

int monthSelectionAnimationDuration

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

Important Notes نکات مهم #

rangeSeparator and your custom date separator should not be equal, otherwise datepicker will return null

You can find the full example in the Git Repository , example directory