angular_flatpickr 0.0.2

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 73

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';
  
Version Uploaded Documentation Archive
0.0.2 Feb 19, 2018 Go to the documentation of angular_flatpickr 0.0.2 Download angular_flatpickr 0.0.2 archive
0.0.1+1 Feb 17, 2018 Go to the documentation of angular_flatpickr 0.0.1+1 Download angular_flatpickr 0.0.1+1 archive
0.0.1 Feb 17, 2018 Go to the documentation of angular_flatpickr 0.0.1 Download angular_flatpickr 0.0.1 archive

Analysis

We analyzed this package on May 25, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.54.0
  • pana: 0.11.1

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
55 / 100
Health:
Code health derived from static analysis. [more]
86 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
99 / 100
Overall score:
Weighted score of the above. [more]
73
Learn more about scoring.

Platforms

Detected platforms: web

Primary library: package:angular_flatpickr/angular_flatpickr.dart with components: html, js.

Suggestions

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 1 error 1 hint.

    Strong-mode analysis of lib/src/angular_flatpickr.dart failed with the following error:

    line: 805 col: 34
    The argument type '(JsObject) → DateTime' can't be assigned to the parameter type '(dynamic) → dynamic'.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.20.1 <2.0.0
angular >=4.0.0 <5.0.0 4.0.0+2 5.0.0-alpha+13
angular_forms >=1.0.0 <2.0.0 1.0.0 2.0.0-alpha+5
js >=0.6.1 <0.7.0 0.6.1
Transitive dependencies
analyzer 0.30.0+4 0.32.0
angular_compiler 0.3.0+1 0.4.0-alpha+13
args 1.4.3
async 2.0.7
barback 0.15.2+16
build 0.11.2 0.12.6
build_barback 0.4.0+2 0.5.0+4
charcode 1.1.1
cli_util 0.1.3
code_builder 1.0.4 3.0.3
code_transformers 0.5.1+5
collection 1.14.9
convert 2.0.1
crypto 2.0.3
csslib 0.14.4
dart_style 1.0.9+1 1.0.14
front_end 0.1.0-alpha.4.1 0.1.0
func 1.0.0
glob 1.1.5
html 0.13.3
intl 0.15.6
isolate 1.1.0 2.0.1
kernel 0.3.0-alpha.1.1 0.3.0
logging 0.11.3+1
matcher 0.12.2+1
meta 1.1.5
package_config 1.0.3
path 1.5.1
plugin 0.2.0+2
pool 1.3.5
quiver 0.25.0 0.29.0+1
quiver_hashcode 1.0.0
source_gen 0.7.5+1 0.8.1+3
source_maps 0.10.5
source_span 1.4.0
stack_trace 1.9.2
string_scanner 1.0.2
tuple 1.0.1
typed_data 1.1.5
utf 0.9.0+4
watcher 0.9.7+8
yaml 2.1.14
Dev dependencies
angular_test >=1.0.0 <2.0.0
pageloader >=2.2.6 <2.3.0
test >=0.12.0 <0.13.0