https://github.com/ganigeorgiev/flatpickr.dart

Dart JS interop for flatpickr
https://github.com/ganigeorgiev/flatpickr.dart

dart datepicker flatpickr

Last synced: about 1 month ago
JSON representation

Dart JS interop for flatpickr

• Host: GitHub
• URL: https://github.com/ganigeorgiev/flatpickr.dart
• Owner: ganigeorgiev
• License: bsd-3-clause
• Created: 2020-07-19T07:57:48.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-10-09T09:12:54.000Z (about 3 years ago)
• Last Synced: 2024-10-25T03:09:31.238Z (2 months ago)
• Topics: dart, datepicker, flatpickr
• Language: Dart
• Homepage: https://pub.dev/packages/flatpickr
• Size: 18.6 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
Flatpickr (Dart)

================================================================================

Dart JS interop for [Flatpickr v4+](https://flatpickr.js.org/) - a lightweight and powerful datetime picker.

## Usage

1. Register the Dart package in your `pubspec.yaml`:

    ```yaml

    dependencies:

      flatpickr: ^1.0.0

    ```

2. Load the latest Flatpickr source (js and css) in your html layout:

    ```html

    

    

    ```

3. Create a `Flatpickr` instance:

    ```dart

    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

    }

    ```

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

Check the [API reference](https://pub.dev/documentation/flatpickr/latest/) for detailed documentation.

To view the example, run `pub global run webdev serve example` from the root directory of this project.