https://github.com/alanchan-dev/omnidatetimepicker
A Flutter DateTime picker package.
https://github.com/alanchan-dev/omnidatetimepicker
dart datetime-picker datetimepicker flutter flutter-package flutter-widget material material3
Last synced: 15 days ago
JSON representation
A Flutter DateTime picker package.
- Host: GitHub
- URL: https://github.com/alanchan-dev/omnidatetimepicker
- Owner: alanchan-dev
- License: mit
- Created: 2021-12-12T11:04:56.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-07-28T08:27:22.000Z (3 months ago)
- Last Synced: 2025-10-23T06:54:26.893Z (15 days ago)
- Topics: dart, datetime-picker, datetimepicker, flutter, flutter-package, flutter-widget, material, material3
- Language: Dart
- Homepage:
- Size: 714 KB
- Stars: 53
- Watchers: 1
- Forks: 86
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Omni DateTime Picker
[](https://pub.dev/packages/omni_datetime_picker)
A DateTime picker that lets user select a date and the time, with start & end as a range.
[](https://ko-fi.com/X8X2YYHL7)
## Screenshots
| Light | Dark |
| :------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: |
|  |  |
## Getting started
Add this to your package's pubspec.yaml file and run `flutter pub get`:
```yaml
dependencies:
omni_datetime_picker: ^2.3.1
```
Now in your Dart code, you can use:
```dart
import 'package:omni_datetime_picker/omni_datetime_picker.dart';
```
## Usage
Simple usage:
OmniDateTimePicker
```dart
DateTime? dateTime = await showOmniDateTimePicker(context: context);
```
OmniDateTimeRangePicker
```dart
List? dateTimeList = await showOmniDateTimeRangePicker(context: context);
```
Custom properties:
OmniDateTimePicker
```dart
DateTime? dateTime = await showOmniDateTimePicker(
context: context,
initialDate: DateTime.now(),
firstDate:
DateTime(1600).subtract(const Duration(days: 3652)),
lastDate: DateTime.now().add(
const Duration(days: 3652),
),
is24HourMode: false,
isShowSeconds: false,
minutesInterval: 1,
secondsInterval: 1,
isForce2Digits: false,
borderRadius: const BorderRadius.all(Radius.circular(16)),
constraints: const BoxConstraints(
maxWidth: 350,
maxHeight: 650,
),
transitionBuilder: (context, anim1, anim2, child) {
return FadeTransition(
opacity: anim1.drive(
Tween(
begin: 0,
end: 1,
),
),
child: child,
);
},
transitionDuration: const Duration(milliseconds: 200),
barrierDismissible: true,
barrierColor: const Color(0x80000000),
selectableDayPredicate: (dateTime) {
// Disable 25th Feb 2023
if (dateTime == DateTime(2023, 2, 25)) {
return false;
} else {
return true;
}
},
type: OmniDateTimePickerType.dateAndTime,
title: Text('Select Date & Time'),
titleSeparator: Divider(),
separator: SizedBox(height: 16),
padding: EdgeInsets.all(16),
insetPadding: EdgeInsets.symmetric(horizontal: 40, vertical: 24),
theme: ThemeData.light(),
actionsBuilder: (context, confirmCallback, cancelCallback) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
onPressed: cancelCallback,
child: Text('Cancel'),
),
ElevatedButton(
onPressed: confirmCallback,
child: Text('Confirm'),
),
],
);
},
);
```
OmniDateTimeRangePicker
```dart
List? dateTimeList =
await showOmniDateTimeRangePicker(
context: context,
startInitialDate: DateTime.now(),
startFirstDate:
DateTime(1600).subtract(const Duration(days: 3652)),
startLastDate: DateTime.now().add(
const Duration(days: 3652),
),
endInitialDate: DateTime.now(),
endFirstDate:
DateTime(1600).subtract(const Duration(days: 3652)),
endLastDate: DateTime.now().add(
const Duration(days: 3652),
),
is24HourMode: false,
isShowSeconds: false,
minutesInterval: 1,
secondsInterval: 1,
isForce2Digits: false,
isForceEndDateAfterStartDate: true,
onStartDateAfterEndDateError: () {
// Handle error when start date is after end date
print('Start date cannot be after end date!');
},
borderRadius: const BorderRadius.all(Radius.circular(16)),
constraints: const BoxConstraints(
maxWidth: 350,
maxHeight: 650,
),
transitionBuilder: (context, anim1, anim2, child) {
return FadeTransition(
opacity: anim1.drive(
Tween(
begin: 0,
end: 1,
),
),
child: child,
);
},
transitionDuration: const Duration(milliseconds: 200),
barrierDismissible: true,
barrierColor: Colors.black54,
startSelectableDayPredicate: (dateTime) {
// Disable 25th Feb 2023 for start date
if (dateTime == DateTime(2023, 2, 25)) {
return false;
} else {
return true;
}
},
endSelectableDayPredicate: (dateTime) {
// Disable 26th Feb 2023 for end date
if (dateTime == DateTime(2023, 2, 26)) {
return false;
} else {
return true;
}
},
type: OmniDateTimePickerType.dateAndTime,
title: Text('Select Date & Time Range'),
titleSeparator: Divider(),
startWidget: Text('Start'),
endWidget: Text('End'),
separator: SizedBox(height: 16),
defaultTab: DefaultTab.start,
padding: EdgeInsets.all(16),
insetPadding: EdgeInsets.symmetric(horizontal: 40, vertical: 24),
theme: ThemeData.light(),
actionsBuilder: (context, confirmCallback, cancelCallback) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
onPressed: cancelCallback,
child: Text('Cancel'),
),
ElevatedButton(
onPressed: confirmCallback,
child: Text('Confirm'),
),
],
);
},
);
```
The returned value of showOmniDateTimeRangePicker() will be a List with two DateTime:
```dart
[startDateTime, endDateTime].
```
## Usage with more flexibility
`OmniDateTimePicker` is now available for use directly as a widget instead of the prebuilt dialogs.