flatpickr

Description:

flatpickr

Flatpickr (Dart) #
Dart JS interop for Flatpickr v4+ - a lightweight and powerful datetime picker.
Usage #


Register the Dart package in your pubspec.yaml:
dependencies:
flatpickr: ^1.0.0
copied to clipboard


Load the latest Flatpickr source (js and css) in your html layout:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
copied to clipboard


Create a Flatpickr instance:
import 'dart:html';

import 'package:flatpickr/flatpickr.dart';
import 'package:js/js.dart';

void main() {
final el = document.getElementById('some_input_element');

final options = FlatpickrOptions(
enableTime: true,
showMonths: 2,
onChange: allowInterop((selectedDates, dateStr, instance, e) {
print(selectedDates);
}),
);

final obj = Flatpickr(el, options);

obj.open(); // or any other instance method
}
copied to clipboard



NB! When passing a Dart function as event callback, make sure to wrap it with allowInterop() or allowInteropCaptureThis().

Check the API reference for detailed documentation.
To view the example, run pub global run webdev serve example from the root directory of this project.