duobaseio · Pante · Apr 11, 2026 · Apr 11, 2026 · Apr 11, 2026
diff --git a/docs_snippets/lib/usages/widgets/date_field.dart b/docs_snippets/lib/usages/widgets/date_field.dart
@@ -70,7 +70,7 @@ final calendar = FDateField.calendar(
   formFieldKey: null,
   // {@endcategory}
   // {@category "Field"}
-  format: null,
+  format: FDateField.defaultFormat,
   hint: null,
   textAlign: .start,
   textAlignVertical: null,

diff --git a/docs_snippets/lib/usages/widgets/time_field.dart b/docs_snippets/lib/usages/widgets/time_field.dart
@@ -3,7 +3,6 @@
 import 'package:flutter/widgets.dart';
 
 import 'package:forui/forui.dart';
-import 'package:intl/intl.dart';
 
 final timeField = FTimeField(
   // {@category "Control"}
@@ -67,7 +66,7 @@ final timeFieldPicker = FTimeField.picker(
   formFieldKey: null,
   // {@endcategory}
   // {@category "Field"}
-  format: DateFormat.jm(),
+  format: FTimeField.defaultFormat,
   hint: 'Select time',
   textAlign: .start,
   textAlignVertical: null,

diff --git a/forui/CHANGELOG.md b/forui/CHANGELOG.md
@@ -28,6 +28,13 @@
   `FCheckboxStyle.trailingLabelStyle` instead.
 
 
+### `FDateField`
+* Add `FDateField.defaultFormat`.
+
+* **Breaking** Change `FDateField.calendar(format: ...)` from `DateFormat?` to
+  `String Function(BuildContext, DateTime, DateFormat)`.
+
+
 ### `FDateTimePicker`
 * Add `FDateTimePicker`.
 * Add `FDateTimePickerController`.
@@ -139,6 +146,13 @@ We've changed `FLineCalendar`'s default styling to be more aesthetically pleasin
 * Add `FTileGroupStyle.slidePressHapticFeedback`.
 
 
+### `FTimeField`
+* Add `FTimeField.defaultFormat`.
+
+* **Breaking** Change `FTimeField.picker(format: ...)` from `DateFormat?` to
+  `String Function(BuildContext, FTime, DateFormat)`.
+
+
 ### `FTimePicker`
 * Add `FTimePickerStyle.hapticFeedback`.
 * Add `FTimePickerStyle.hourFlex`.

diff --git a/forui/lib/src/widgets/date_field/calendar/calendar_date_field.dart b/forui/lib/src/widgets/date_field/calendar/calendar_date_field.dart
@@ -3,7 +3,7 @@ part of '../date_field.dart';
 // ignore: avoid_implementing_value_types
 class _CalendarDateField extends FDateField implements FDateFieldCalendarProperties {
   final FPopoverControl popoverControl;
-  final DateFormat? format;
+  final String Function(BuildContext context, DateTime value, DateFormat format) format;
   final String? hint;
   final TextAlign textAlign;
   final TextAlignVertical? textAlignVertical;
@@ -53,7 +53,7 @@ class _CalendarDateField extends FDateField implements FDateFieldCalendarPropert
 
   const _CalendarDateField({
     this.popoverControl = const .managed(),
-    this.format,
+    this.format = FDateField.defaultFormat,
     this.hint,
     this.textAlign = .start,
     this.textAlignVertical,
@@ -184,7 +184,7 @@ class _CalendarDatePickerState extends _FDateFieldState<_CalendarDateField> {
 
   void _updateTextController() {
     if (_controller.value case final value?) {
-      _textController.text = widget.format?.format(value) ?? _format?.format(value) ?? '';
+      _textController.text = widget.format(context, value, _format!);
     } else {
       _textController.text = '';
     }

diff --git a/forui/lib/src/widgets/date_field/date_field.dart b/forui/lib/src/widgets/date_field/date_field.dart
@@ -50,6 +50,9 @@ abstract class FDateField extends StatefulWidget {
   static Widget defaultIconBuilder(BuildContext context, FTextFieldStyle style, Set<FTextFieldVariant> variants) =>
       FTextField.prefixIconBuilder(context, style, variants, const Icon(FIcons.calendar));
 
+  /// The default format for [FDateField.calendar], which formats [value] using [format].
+  static String defaultFormat(BuildContext context, DateTime value, DateFormat format) => format.format(value);
+
   /// The control for managing the date field's state.
   final FDateFieldControl control;
 
@@ -228,8 +231,7 @@ abstract class FDateField extends StatefulWidget {
 
   /// Creates a [FDateField] that allows a date to be selected using only a calendar.
   ///
-  /// The [format] customizes the appearance of the date in the input field. Defaults to the `d MMM y` in the current
-  /// locale.
+  /// The [format] customizes the appearance of the date in the input field.
   ///
   /// The [hint] is displayed when the input field is empty. Defaults to the current locale's
   /// [FLocalizations.dateFieldHint].
@@ -282,7 +284,7 @@ abstract class FDateField extends StatefulWidget {
     FPopoverControl popoverControl,
     FTextFieldSizeVariant size,
     FDateFieldStyleDelta style,
-    DateFormat? format,
+    String Function(BuildContext context, DateTime value, DateFormat format) format,
     TextAlign textAlign,
     TextAlignVertical? textAlignVertical,
     TextDirection? textDirection,

diff --git a/forui/lib/src/widgets/time_field/picker/picker_time_field.dart b/forui/lib/src/widgets/time_field/picker/picker_time_field.dart
@@ -2,7 +2,7 @@ part of '../time_field.dart';
 
 // ignore: avoid_implementing_value_types
 class _PickerTimeField extends FTimeField implements FTimeFieldPickerProperties {
-  final DateFormat? format;
+  final String Function(BuildContext context, FTime value, DateFormat format) format;
   final String? hint;
   final TextAlign textAlign;
   final TextAlignVertical? textAlignVertical;
@@ -44,7 +44,7 @@ class _PickerTimeField extends FTimeField implements FTimeFieldPickerProperties
   final int minuteInterval;
 
   const _PickerTimeField({
-    this.format,
+    this.format = FTimeField.defaultFormat,
     this.hint,
     this.textAlign = .start,
     this.textAlignVertical,
@@ -187,10 +187,7 @@ class _PickerTimeFieldState extends _FTimeFieldState<_PickerTimeField> {
     SchedulerBinding.instance.addPostFrameCallback((_) {
       _textController.text = switch (_controller.value) {
         null => '',
-        final value =>
-          widget.format?.format(value.withDate(DateTime(1970))) ??
-              _format?.format(value.withDate(DateTime(1970))) ??
-              '',
+        final value => widget.format(context, value, _format!),
       };
     });
   }

diff --git a/forui/lib/src/widgets/time_field/time_field.dart b/forui/lib/src/widgets/time_field/time_field.dart
@@ -56,6 +56,10 @@ abstract class FTimeField extends StatefulWidget {
   static Widget defaultIconBuilder(BuildContext context, FTextFieldStyle style, Set<FTextFieldVariant> variants) =>
       FTextField.prefixIconBuilder(context, style, variants, const Icon(FIcons.clock4));
 
+  /// The default format for [FTimeField.picker], which formats [value] using [format].
+  static String defaultFormat(BuildContext context, FTime value, DateFormat format) =>
+      format.format(value.withDate(DateTime(1970)));
+
   /// The control for managing the time field's state.
   final FTimeFieldControl control;
 
@@ -238,8 +242,7 @@ abstract class FTimeField extends StatefulWidget {
 
   /// Creates a [FTimeField] that allows a time to be selected using only a picker.
   ///
-  /// The [format] customizes the appearance of the time in the input field. Defaults to the [DateFormat.Hm] if
-  /// [hour24] is true or [DateFormat.jm] if false.
+  /// The [format] customizes the appearance of the time in the input field.
   ///
   /// The [hint] is displayed when the input field is empty. Defaults to the current locale's
   /// [FLocalizations.timeFieldHint].
@@ -289,7 +292,7 @@ abstract class FTimeField extends StatefulWidget {
     FTextFieldSizeVariant size,
     FTimeFieldStyleDelta style,
     bool hour24,
-    DateFormat? format,
+    String Function(BuildContext context, FTime value, DateFormat format) format,
     TextAlign textAlign,
     TextAlignVertical? textAlignVertical,
     TextDirection? textDirection,

diff --git a/forui/test/src/widgets/date_field/calendar/calendar_date_field_test.dart b/forui/test/src/widgets/date_field/calendar/calendar_date_field_test.dart
@@ -3,6 +3,8 @@ import 'package:flutter/widgets.dart';
 
 import 'package:flutter_test/flutter_test.dart';
 
+import 'package:intl/intl.dart';
+
 import 'package:forui/forui.dart';
 import '../../../test_scaffold.dart';
 
@@ -166,7 +168,11 @@ void main() {
     await tester.pumpWidget(
       TestScaffold.app(
         locale: const Locale('en', 'SG'),
-        child: FDateField.calendar(key: key, format: .yMMMMd('en_SG'), today: .utc(2025, 1, 15)),
+        child: FDateField.calendar(
+          key: key,
+          format: (_, date, _) => DateFormat.yMMMMd('en_SG').format(date),
+          today: .utc(2025, 1, 15),
+        ),
       ),
     );
 

diff --git a/forui/test/src/widgets/time_field/picker/picker_time_field_test.dart b/forui/test/src/widgets/time_field/picker/picker_time_field_test.dart
@@ -3,6 +3,8 @@ import 'package:flutter/widgets.dart';
 
 import 'package:flutter_test/flutter_test.dart';
 
+import 'package:intl/intl.dart';
+
 import 'package:forui/forui.dart';
 import 'package:forui/src/widgets/picker/picker_wheel.dart';
 import '../../../test_scaffold.dart';
@@ -139,7 +141,7 @@ void main() {
         locale: const Locale('en', 'SG'),
         child: FTimeField.picker(
           key: key,
-          format: .jms('en_SG'),
+          format: (_, time, _) => DateFormat.jms('en_SG').format(time.withDate(DateTime(1970))),
           control: const .managed(initial: FTime()),
         ),
       ),