Light logoWidgetbook Docs
Discord

DateTime Knob

The DateTime knob renders a DateTime indicator field in the Widgetbook UI where you can enter a DateTime value via a date selector for a widget property.

Variants

The String knob has two variants:

  • context.knobs.dateTime(): This variant allows you to enter a DateTime via a date and time picker. It does not accept null values.
  • context.knobs.dateTimeOrNull(): This variant allows you to enter a DateTime via a date and time picker or null. It is useful when the property can be optional.

Properties

In addition to the knob's base properties, the String knob includes the following:

startDateTimerequired

The start time of the DateTime picker. This defines the earliest date that can be selected.

endDateTimerequired

The end time of the DateTime picker. This defines the latest date that can be selected.

context.knobs.dateTime()

Example

Usage

To use the DateTime knob, call the context.knobs.dateTime() method.

dart
Example: DateTime Knob
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    dateTime: context.knobs.dateTime( 
      label: 'dateTime', 
      initialValue: DateTime.now(), 
      start: DateTime.now().subtract(const Duration(days: 30)), 
      end: DateTime.now().add(const Duration(days: 30)), 
    ), 
  );
}

context.knobs.dateTimeOrNull()

Example

Usage

To use the nullable DateTime knob, call the context.knobs.dateTimeOrNull() method.

dart
Example: Nullable DateTime Knob
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    dateTime: context.knobs.dateTimeOrNull( 
      label: 'dateTime', 
      start: DateTime.now().subtract(const Duration(days: 30)), 
      end: DateTime.now().add(const Duration(days: 30)), 
    ), 
  );
}

Multi-snapshot Support

Multi-snapshot support allows you to generate multiple screenshots of a single use case with varying values using KnobsConfigs and AddonsConfigs.

Regular DateTime Knob

dart
Example: DateTimeKnobConfig
@UseCase(
  type: MyWidget,
  name: 'Default',
  cloudKnobsConfigs: { 
    'dateTime': [DateTimeKnobConfig('dateTime', '2020-01-31 16:10')], 
  }, 
)
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    dateTime: context.knobs.dateTime(
      label: 'dateTime',
      initialValue: DateTime.now(),
      start: DateTime.now().subtract(const Duration(days: 30)),
      end: DateTime.now().add(const Duration(days: 30)),
    ),
  );
}

Nullable DateTime Knob

dart
Example: NullKnobConfig
@UseCase(
  type: MyWidget,
  name: 'Default',
  cloudKnobsConfigs: { 
    'Without date': [NullKnobConfig('dateTime')], 
    'With date': [DateTimeKnobConfig('dateTime', '2020-01-31 16:10')], 
  }, 
)
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    dateTime: context.knobs.dateTimeOrNull(
      label: 'dateTime',
      start: DateTime.now().subtract(const Duration(days: 30)),
      end: DateTime.now().add(const Duration(days: 30)),
    ),
  );
}
String
Duration

On this page