A Persian Date & Time picker inspired by Material Design's DateTime picker, built on the shamsi_date library. It offers full support for the Persian (Jalali) calendar and is highly customizable, including compatibility with Material 3.
Additionally, it supports multiple languages, including Persian, Dari, Kurdish, Pashto, and custom locales, all while ensuring seamless integration with Flutter and maintaining Material Design standards.
- 🌟 Fully supports Persian (Jalali) calendar
- 🛠 Highly customizable
- 💻 Supports Material 3
- 🌎 Multi-language support: Persian, Dari, Kurdish, Pashto, and custom locales
- 📱 Compatible with Material Design standards
- 🧑💻 Simple integration with Flutter
To use the Persian DateTime Picker, add the package to your pubspec.yaml
:
dependencies:
persian_datetime_picker: <latest_version>
Then, import it in your Dart code:
import 'package:persian_datetime_picker/persian_datetime_picker.dart';
Add localization to MaterialApp
:
return MaterialApp(
title: 'Date and Time Pickers',
locale: const Locale("fa", "IR"),
supportedLocales: const [
Locale("fa", "IR"),
Locale("en", "US"),
],
localizationsDelegates: const [
// Add Localization
PersianMaterialLocalizations.delegate,
PersianCupertinoLocalizations.delegate,
//
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
...
);
Jalali picked = await showPersianDatePicker(
context: context,
initialDate: Jalali.now(),
firstDate: Jalali(1385, 8),
lastDate: Jalali(1450, 9),
);
var label = picked.formatFullDate();
var picked = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
var label = picked.persianFormat(context);
Jalali pickedDate = await showModalBottomSheet<Jalali>(
context: context,
builder: (context) {
Jalali tempPickedDate;
return Container(
height: 250,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CupertinoButton(
child: Text('لغو', style: TextStyle(fontFamily: 'Dana')),
onPressed: () => Navigator.of(context).pop(),
),
CupertinoButton(
child: Text('تایید', style: TextStyle(fontFamily: 'Dana')),
onPressed: () => Navigator.of(context).pop(tempPickedDate ?? Jalali.now()),
),
],
),
Divider(height: 0, thickness: 1),
Expanded(
child: CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(dateTimePickerTextStyle: TextStyle(fontFamily: "Dana")),
),
child: PCupertinoDatePicker(
mode: PCupertinoDatePickerMode.dateAndTime,
onDateTimeChanged: (Jalali dateTime) {
tempPickedDate = dateTime;
},
),
),
),
],
),
);
},
);
var picked = await showPersianDateRangePicker(
context: context,
initialEntryMode: PDatePickerEntryMode.input,
initialDateRange: JalaliRange(
start: Jalali(1400, 1, 2),
end: Jalali(1400, 1, 10),
),
firstDate: Jalali(1385, 8),
lastDate: Jalali(1450, 9),
);
You can customize the styles of the PersianDateTimePicker
and PersianCupertinoDatePicker
using the DatePickerTheme
within your app's ThemeData
. Additionally, you can apply specific styles by wrapping the date picker with Theme
in the builder.
Add the DatePickerTheme
to your ThemeData
:
return MaterialApp(
theme: ThemeData(
// Other theme properties...
datePickerTheme: DatePickerTheme(
backgroundColor: Colors.white, // Background color of the date picker
primaryColor: Colors.teal, // Primary color for the date picker
textColor: Colors.black, // Text color
// Customize more properties as needed
),
),
// ...
);
You can also customize the Persian date picker on a per-instance basis by wrapping it with a Theme
in the builder:
Jalali? picked = await showPersianDatePicker(
context: context,
initialDate: Jalali.now(),
firstDate: Jalali(1385, 8),
lastDate: Jalali(1450, 9),
builder: (context, child) {
return Theme(
data: Theme.of(context).copyWith(
primaryColor: Colors.teal, // Override primary color
accentColor: Colors.amber, // Override accent color
// Add more customization here
),
child: child!,
);
},
);
To customize the PersianCupertinoDatePicker
, you can similarly apply a Theme
:
showCupertinoModalPopup(
context: context,
builder: (context) {
return Theme(
data: Theme.of(context).copyWith(
primaryColor: Colors.teal, // Override primary color
// Add more customization here
),
child: Container(
height: 300,
child: PersianCupertinoDatePicker(
mode: PersianCupertinoDatePickerMode.dateAndTime,
onDateTimeChanged: (Jalali dateTime) {
// Handle date change
},
),
),
);
},
);
If you prefer to use Material 2 instead of Material 3 for your application, you can do so by setting the useMaterial3
parameter to false
in the MaterialApp
widget. This ensures that the application uses the Material 2 design principles.
Here’s how to set up your MaterialApp
to use Material 2:
return MaterialApp(
title: 'Persian DateTime Picker',
theme: ThemeData(
useMaterial3: false, // Set to false to use Material 2
datePickerTheme: DatePickerTheme(
backgroundColor: Colors.white,
primaryColor: Colors.teal,
textColor: Colors.black,
// Additional customizations
),
),
home: MyHomePage(),
);
Feel free to check it out and give it a ️ if you love it. Follow me for more updates and projects!
Pull requests and feedback are always welcome!
Feel free to reach out at mem.amir.m@gmail.com or connect with me on LinkedIn.
Banner designed by Nader Mozaffari
This project is licensed under the MIT License.