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.
Varients
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 acceptnullvalues.context.knobs.dateTimeOrNull(): This variant allows you to enter a DateTime via a date and time picker ornull. It is useful when the property can be optional.
Properties
In addition to the knob's base properties, the String knob includes the following:
startDateTimerequiredThe start time of the DateTime picker. This defines the earliest date that can be selected.
endDateTimerequiredThe end time of the DateTime picker. This defines the latest date that can be selected.
Usage
To use the DateTime knob, call the context.knobs.dateTime() method.
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)),
),
);
}
Usage
To use the nullable DateTime knob, call the context.knobs.dateTimeOrNull() method.
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
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
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)),
),
);
}