angular_flatpickr 0.0.2

Angular Dart date/time picker #

This is an Angular Dart wrapper of javascript library flatpickr -- simple but powerful date/time picker

Usage #

First of all you need to add some resources in your index.html file:

<!-- Main flatpick js-library -->
<script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
<!-- Your locale file -->
<script src="https://npmcdn.com/flatpickr/dist/l10n/ru.js"></script>
<!-- flatpickr styles -->
<link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/flatpickr.min.css">

A simple usage example:

import 'package:angular/angular.dart';
import 'package:angular_flatpickr/angular_flatpickr.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
  selector: 'my-component',
  template: '''
    <form ngSubmit="onSubmit()">
      <input  type=text flatpickr
        [(ngModel)]="selectedDate"
        fpLocale="ru"
        [fpDefaultDate]="defaultDate"
        fpDateFormat="d.m.Y H:i:S"
        fpEnableTime=true
        fpTime24hr=true
        (fpOnChange)="onChange($event)"
        (fpOnOpen)="onOpen()"
        (fpOnClose)="onClose()"
        (fpOnReady)="onReady()">

      <input type="submit value="Submit">
    </form>
  ''',
  directives: const [
    formDirectives,
    flatpickrDirectives
  ]
)
class MyComponent {

  /// Initial date and time
  DateTime defaultDate = new DateTime.now();
  // Initial date and time can be set in different way:
  // DateTime selectedDate = new DateTime.now();
  
  /// This function executes when date/time picker changes its value
  void onChange(FlatpickrChangeEvent event) {
    print('New value: ${event.value}');
  }
  
  /// This function executes when calendar opens
  void onOpen() {
    print("Open");
  }
  
  /// This function executes when calendar closes
  void onClose() {
    print("Close");
  }
  
  /// This function execute after flatpickr initialization
  void onReady() {
    print("Ready");
  }

  /// Selected date
  DateTime selectedDate;
  
  void onSubmit() {
    print('Selected date: $selectedDate');
  }
}

There are more options and methods to control flatpickr. You can get more information in documentation

More advanced example see in examples.

Features and bugs #

Please file feature requests and bugs at the issue tracker.

Changelog #

0.0.2 #

Bug fixes:

  • allowed null values for minDate and maxDate options
  • corrected null value handling on changes
  • corrected dateFormat property documentation format

0.0.1 #

  • Initial version

example/example.dart

import 'dart:convert';
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

import 'package:angular_flatpickr/angular_flatpickr.dart';

@Component(
    selector: 'my-app',
    template: '''
    <h1>Angular Dart Date/Time Picker Demo</h1>
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
      <div>
        <input type=text
          required
          flatpickr
          [(ngModel)]="selectedDate"
          #date="ngForm"
          ngControl="date"
          fpLocale="en"
          fpDateFormat="d.m.Y H:i"
          fpEnableTime=true
          fpTime24hr=true
          [fpDisable]="disable"
          (fpOnReady)="onReady()"
          (fpOnChange)="onChange(\$event)"
          (fpOnOpen)="onOpen()"
          (fpOnClose)="onClose()"
          #fp="flatpickr">
      </div>
      <div>
        <span [ngClass]="{'valid':date.valid, 'invalid':!date.valid}">
          {{date.valid ? 'The field is valid' : 'The field is invalid'}}
        </span>
      </div>
        <input type="submit" value="Submit">
    </form>
    <button (click)="openCalendar()">Open Calendar manually"</button>
    <pre>{{data}}</pre> 
  ''',
    styles: const [
      ''':host input {
        font-size: large;
    },
    :host span {
        font-size: small;
    },
    :host span.valid {
        color: green;
    },
    :host span.invalid {
        color: red;
    }'''
    ],
    directives: const [
      formDirectives,
      flatpickrDirectives
    ])
class AppComponent {
  /// List of disabled dates
  ///
  /// Dates can be set in different ways:
  /// - DateTime object
  /// - date string
  /// - Map setting date range
  /// - function getting DateTime object as its arguments and returning bool result
  List disable = [
    new DateTime(2018, DateTime.FEBRUARY, 28),
    '10.02.2018',
    (DateTime date) {
      return date.day == 15;
    },
    {'from': '20.02.2018', 'to': '25.02.2018'}
  ];

  /// This function executes when date/time picker changes its value
  void onChange(FlatpickrChangeEvent event) {
    print(event.value);
  }

  /// This function executes when calendar opens
  void onOpen() {
    print("Open");
  }

  /// This function executes when calendar closes
  void onClose() {
    print("Close");
  }

  /// This function execute after flatpickr initialization
  void onReady() {
    print("Ready");
  }

  /// Date selected in flatpickr
  DateTime selectedDate = new DateTime.now();

  /// Form data
  String data;

  /// Flatpickr controller instance
  @ViewChild('fp')
  Flatpickr fp;

  /// Handles form submit
  void onSubmit(NgForm form) {
    print(selectedDate);
    if (form.valid) {
      data = JSON.encode(form.value, toEncodable: (value) {
        return value.toString();
      });
    } else {
      selectedDate = new DateTime.now();
      data = 'Form is invalid. Can\'t submit';
    }
  }

  /// Opens calendar
  void openCalendar() {
    fp.open();
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  angular_flatpickr: ^0.0.2

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:angular_flatpickr/angular_flatpickr.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
--
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
--
Overall:
Weighted score of the above. [more]
0
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://dart.dev/dart-2#migration.

Maintenance issues and suggestions

Make sure dartdoc successfully runs on your package's source files. (-10 points)

Dependencies were not resolved.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.20.1 <2.0.0