DEV Community

Cover image for A Hebrew & Gregorian date picker for Flutter
blimyp
blimyp

Posted on

A Hebrew & Gregorian date picker for Flutter

#dart #flutter #opensource #showdev

If you've ever built a Flutter app for a Hebrew-speaking or Jewish audience, you've probably needed users to pick a date — and see the Hebrew date along with the Gregorian one.

Flutter's built-in showDatePicker only knows the Gregorian calendar, so I built hebrew_date_picker: a Material-style date picker that shows both calendars side by side.

What it does

  • Every day cell shows the Gregorian day and the Hebrew day in letters (12 / א׳)
  • The month title shows the Hebrew months it covers (September 2026 / אלול–תשרי תשפ״ז)
  • The header shows the full Hebrew date of the selected day
  • Tapping the month title opens a year grid with both Gregorian and Hebrew years
  • A range picker for selecting start and end dates
  • Optional marking of Yamim Tovim

Installation 

dependencies:
  hebrew_date_picker: ^0.5.0
Enter fullscreen mode Exit fullscreen mode

Usage

The simplest way is a ready-made form field:

HebrewDateFormField(
  firstDate: DateTime(2020),
  lastDate: DateTime(2030),
  decoration: const InputDecoration(
    labelText: 'Date',
    suffixIcon: Icon(Icons.calendar_today),
  ),
  validator: (date) => date == null ? 'Pick a date' : null,
  onChanged: (date) => print(date),
)
Enter fullscreen mode Exit fullscreen mode

Or open it as a dialog:

final DateTime? date = await showHebrewDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2020),
  lastDate: DateTime(2030),
);
Enter fullscreen mode Exit fullscreen mode

Hebrew-only mode

With CalendarMode.hebrew, each page is a whole Hebrew month:

showHebrewDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2020),
  lastDate: DateTime(2030),
  calendarMode: CalendarMode.hebrew,
);
Enter fullscreen mode Exit fullscreen mode

Picking a birth date

For dates far from today, open the picker on the year grid:

showHebrewDatePicker(
  context: context,
  initialDate: DateTime(1990, 1, 1),
  firstDate: DateTime(1900),
  lastDate: DateTime.now(),
  initialDatePickerMode: DatePickerMode.year,
);
Enter fullscreen mode Exit fullscreen mode

Under the hood

Hebrew dates are calculated with kosher_dart, and the calendar grid is built on table_calendar.

Try it

GitHub logo blimyp / hebrew_date_picker

Flutter date picker that shows the Hebrew (Jewish) date in every day cell

hebrew_date_picker

A Material-style Flutter date picker that shows the Hebrew (Jewish) date alongside the Gregorian one:

  • every day cell shows the Gregorian day and the Hebrew day in letters (e.g. 12 / א׳),
  • the month title shows the Gregorian month and the Hebrew months it covers (e.g. September 2026 / אלול–תשרי תשפ״ז),
  • the header shows the full Hebrew date of the selected day (e.g. א׳ תשרי תשפ״ז),
  • tapping the month title opens a year grid with the Gregorian and the Hebrew years (e.g. 1990 / תש״נ–תשנ״א), so far-away dates are a couple of taps away,
  • a range picker selects a start and an end date, with the Hebrew dates of both in the header.

▶ Try the live demo — no installation needed.

Hebrew date picker Hebrew date range picker Hebrew date picker with CalendarMode.hebrew

Hebrew dates are calculated with kosher_dart and the calendar grid is built on table_calendar.

Installation

dependencies:
  hebrew_date_picker: ^0.5.0
Enter fullscreen mode Exit fullscreen mode

Usage

As

…
View on GitHub

Feedback, issues and stars are very welcome! 🙏

Top comments (0)