Date picker


A date picker is an efficient interface for selecting a specific date or a range of dates.


  minDate: Duration(days: 365)),
  monthOffset: 12,
  selectedDate: Duration(days: 3)),
  prevMonthIcon: Icon(Icons.chevron_left, color: _isDark ? XelaColor.Gray11 : XelaColor.Gray3,),
  nextMonthIcon: Icon(Icons.chevron_right, color: _isDark ? XelaColor.Gray11 : XelaColor.Gray3,),
  mode: XelaDatePickerMode.SINGLE_DATE,
  localeName: "en",
  monthHeaderColor: _isDark ? XelaColor.Gray11 : XelaColor.Gray2,
  yearHeaderColor: _isDark ? XelaColor.Gray7 : XelaColor.Gray7,
  textColor: _isDark ? XelaColor.Gray11 : XelaColor.Gray3,
  todayColor: _isDark ? XelaColor.Blue3 : XelaColor.Blue3,
  todayBackground: _isDark ? Colors.transparent : Colors.white,
  selectedColor: _isDark ? Colors.white : Colors.white,
  disabledColor: _isDark ? XelaColor.Gray6 : XelaColor.Gray9,
  betweenStartAndEndColor: _isDark ? XelaColor.Gray11 : XelaColor.Gray3,
  selectedBackground: _isDark ? XelaColor.Blue5 : XelaColor.Blue3,
  weekdayHeaderColor: _isDark ? XelaColor.Gray6 : XelaColor.Gray9,
  dividerColor: _isDark ? XelaColor.Gray3 : XelaColor.Gray11,
  changeMonthBackground: _isDark ? Colors.transparent : Colors.white,
  changeMonthBorderColor: _isDark ? XelaColor.Gray3 : XelaColor.Gray11,

Properties XelaDatePicker

Name Type Default Value Required Description
minData DateTime? NO DatePicker min date
maxData DateTime? Duration(days: 365)) NO DatePicker max date
disabledDates List<DateTime>? null NO Array of disabled dates
selectedDates List<DateTime>? null NO Array of selected dates for mode = 2
selectedDate DateTime? null NO Selected date value for mode = 0
startDate DateTime? null NO Start date for range selected dates mode = 1
endDate DateTime? null NO End date for range selected dates mode = 1
mode XelaDatePickerMode XelaDatePickerMode.SINGLE_DATE NO DatePicker mode: (SINGLE_DATE, RANGE_DATES, MULTIPLY_DATES)
monthOffset Int 0 NO Display month offset from minDate
textColor Color XelaColor.Gray3 NO Default day color
todayColor Color XelaColor.Blue3 NO Today day color
selectedColor Color Colors.white NO Selected day color
disabledColor Color XelaColor.Gray9 NO Disabled day color
betweenStartAndEndColor Color XelaColor.Gray3 NO Between start and end range day color
textBackground Color Colors.transparent NO Default day background
todayBackground Color Colors.white NO Today day background
selectedBackground Color XelaColor.Blue3 NO Selected day background
disabledBackground Color Colors.transparent NO Disabled day background
betweenStartAndEndBackground Color XelaColor.Blue8 NO Between start and end range day background
weekdayHeaderColor Color XelaColor.Gray7 NO Weekdays color
monthHeaderColor Color XelaColor.Gray2 NO Month color
yearHeaderColor Color XelaColor.Gray9 NO Year color
changeMonthBackground Color Colors.white NO Change month background color
changeMonthBorderColor Color XelaColor.Gray11 NO Change month border color
dividerColor Color XelaColor.Gray9 NO Divider color
prevMonthIcon Widget? null NO Change month to prev icon widget
nextMonthIcon Widget? null NO Change month to next icon widget
onTapDate Function(DateTime)? null NO On tap date action
localeName String "en" NO Locale name for month and weekdays