pikaday_datepicker_angular2 2.2.0

PikadayAngular2 #

Deprecated: #

A Dart Datepicker for AngularDart v4 is available as a new package pikaday_datepicker_angular.

A Dart Datepicker usable as a AngularDart v3 component #

  • uses Pikaday dart-wrapper of a lightweight js-lib with datepicker functionality (Pikaday.js, less than 5kb minified and gzipped)
  • one optinal dependency, if date format needs to be changed (Moment.js, less than 25kb minified and gzipped)
  • modular CSS classes for easy styling


If you do find bugs or have feature requests please submit them to the issues Also see the changelog

Usage #

html #

Link to the Pikaday.js-js library (with it's css file) and the optional but highly advisable Moment.js library (for advanced date formating) in your index.html-file. Currently, you also need to import the pikaday_dart_helpers.js file from the Pikaday package:

Assuming you put these files into /web/jsLibs/ the imports look like this:

<link rel="stylesheet" href="jsLibs/pikaday.css">
<script src="jsLibs/moment.js"></script>
<script src="jsLibs/pikaday.js"></script>
<script src="packages/pikaday/pikaday_dart_helpers.js"></script>

Download a local copy of those libs, put them in or under the directory your index.html file is in, an link accordingly.

Angular2 #

Check out the example under web!

Import and use PikadayComponent into your AngularDart2 component:

import 'package:angular2/core.dart';
import 'package:pikaday_datepicker_angular2/pikaday_datepicker_angular2.dart';

    selector: 'my-app',
    template: '''<h1>AngularDart2-datepicker</h1>
                 <pikaday [(day)]="selectedDay" format="DD-MM-YYYY"
                          minDate="2010-1-1" maxDate="2025-12-31"
                 <div>selectedDay: {{selectedDay | date}}</div>''',
    directives: const [PikadayComponent]
class AppComponent {
  DateTime selectedDay = new DateTime(2016, 12, 14);

If you want to compile the example under web to js, you have to change the transformer configuration to

### (default) configuration if this package should be used as a library (import) or if the app should be execute as Dart in Dartium
#- angular2
### configuration if example web folder should be compiled to js
- angular2:
    - 'package:angular2/common.dart#COMMON_DIRECTIVES'
    - 'package:angular2/common.dart#COMMON_PIPES'
    entry_points: web/main.dart
- dart_to_js_script_rewriter

Basic/Vanilla Dart Usage #

If you're looking for a datepicker within a plain Dart project (not with angular), check out the Pikaday package.

Angular2 component - Configuration #

PikadayComponent has many useful options:

  • two-way data binding:
    • day the DateTime instance to display/update (replacing/combining defaultDay and setDefaultDate from PikadayParams)
  • one-way attributes
    • cssClasses setting css classes on input (Moment.js for custom formatting)
    • formatStrict the default flag for moment's strict date parsing (requires Moment.js for custom formatting)
    • firstDay first day of the week (0: Sunday, 1: Monday, etc)
    • minDate the minimum/earliest date that can be selected (this should be a native Date object - e.g. new Date() or moment().toDate())
    • maxDate the maximum/latest date that can be selected (this should be a native Date object - e.g. new Date() or moment().toDate())
    • disableWeekends disallow selection of Saturdays or Sundays
    • yearRange number of years either side (e.g. 10) or array of upper/lower range (e.g. [1900,2015])
    • showWeekNumber show the ISO week number at the head of the row (default false)
    • isRTL reverse the calendar for right-to-left languages
    • i18n language defaults for month and weekday names (see internationalization example on Pikaday.js)
    • yearSuffix additional text to append to the year in the title
    • showMonthAfterYear render the month after year in the title (default false)
    • showDaysInNextAndPreviousMonths render days of the calendar grid that fall in the next or previous months to the current month instead of rendering an empty table cell (default: true)
    • numberOfMonths number of visible calendars
    • mainCalendarIsLeft when numberOfMonths is used, this will help you to choose where the main calendar will be (default true/left, can be set to false/right). Only used for the first display or when a selected date is not already visible
    • theme define a classname that can be used as a hook for styling different themes (default null)

Common problems #

  • console error msg: EXCEPTION: Error: self.Pikaday is not a constructor You forgot to import pikaday.js in your html-file.
  • console error msg: TypeError: self.getPikadayMillisecondsSinceEpoch is not a function You forgot to import pikaday_dart_helpers.js in your html-file.
<link rel="stylesheet" href="jsLibs/pikaday.css">
<script src="jsLibs/moment.js"></script>
<script src="jsLibs/pikaday.js"></script>
<script src="packages/pikaday/pikaday_dart_helpers.js"></script>

Authors #

Thanks to David Bushell for writing Pikaday.js. Thanks to John Ryan for writing Pikaday.

Copyright © 2017 Stephan Schröder | BSD & MIT license

Changelog #

2.2.0 - 2017-09-15 #

  • fixed the min-, max-, and date-setting after translation to js
  • deprecated this package, use the new pikaday_datepicker_angular instead

2.1.4 - 2017-06-05 #

  • directly link to the pikaday_dart_helpers.js file from packages/pikaday/

2.1.3 - 2017-06-05 #

  • forgot to activate the right transformers in 2.1.2

2.1.2 - 2017-06-05 #

  • fixed an issue where the selected date wasn't of type DateTime (when compiled to js) but Date. Unfortunatly you need to import the file pikaday_dart_helpers.js for now (until the real issue in package:js is fixed).

2.1.1 - 2017-05-22 #

  • updated README.md

2.1.0 - 2017-05-22 #

  • change backend dependency from pikaday_datepicker to pikaday
  • removed deprecated use of EventEmitter

2.0.0 - 2017-05-17 #

  • upgraded to Angular2 version 3.0.0 up

1.0.1 - 2017-02-28 #

  • documentation fixes (package path in README.md and HOWTO compile to js)
  • blueprint for compile-to-js transformer configuration

1.0.0 - 2017-01-26 #

  • initial version is the standalone Angular2 Component surrounding the now indipendent plain Dart version around the pikaday js-lib.

Use this package as a library

1. Depend on it

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

  pikaday_datepicker_angular2: ^2.2.0

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:pikaday_datepicker_angular2/pikaday_datepicker_angular2.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
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.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.23.0 <1.25.0