pikaday_datepicker_angular2 2.2.0

  • README.md
  • Installing
  • Versions
  • 60



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



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.


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 (<input class="{{cssClasses}}>)
    • placeholder sets the placeholder of the pikaday-inputfield
  • attributes directly used to initialize PikadayParams
    • bound automatically show/hide the datepicker on input field focus (default true if field is set)
    • position preferred position of the datepicker relative to the form field, e.g.: top right, bottom right Note: automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see (default to 'bottom left')
    • reposition can be set to false to not reposition datepicker within the viewport, forcing it to take the configured position (default: true)
    • format the output format used within the input element (requires 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>


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

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


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.

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';
Version Uploaded Documentation Archive
2.2.0 Sep 15, 2017 failed Download pikaday_datepicker_angular2 2.2.0 archive
2.1.4 Jun 5, 2017 Go to the documentation of pikaday_datepicker_angular2 2.1.4 Download pikaday_datepicker_angular2 2.1.4 archive
2.1.3 Jun 5, 2017 Go to the documentation of pikaday_datepicker_angular2 2.1.3 Download pikaday_datepicker_angular2 2.1.3 archive
2.1.2 Jun 5, 2017 Go to the documentation of pikaday_datepicker_angular2 2.1.2 Download pikaday_datepicker_angular2 2.1.2 archive
2.1.1 May 22, 2017 Go to the documentation of pikaday_datepicker_angular2 2.1.1 Download pikaday_datepicker_angular2 2.1.1 archive
2.1.0 May 22, 2017 Go to the documentation of pikaday_datepicker_angular2 2.1.0 Download pikaday_datepicker_angular2 2.1.0 archive
2.0.0 May 17, 2017 Go to the documentation of pikaday_datepicker_angular2 2.0.0 Download pikaday_datepicker_angular2 2.0.0 archive
1.0.1 Feb 28, 2017 Go to the documentation of pikaday_datepicker_angular2 1.0.1 Download pikaday_datepicker_angular2 1.0.1 archive
1.0.0 Feb 26, 2017 Go to the documentation of pikaday_datepicker_angular2 1.0.0 Download pikaday_datepicker_angular2 1.0.0 archive


We analyzed this package on Apr 23, 2018, and provided a score, details, and suggestions below. Analysis was completed with status tool failures using:

  • Dart: 2.0.0-dev.49.0
  • pana: 0.10.6


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


Detected platforms: unsure

Error(s) prevent platform classification:

Fix dependencies in pubspec.yaml.


  • Fix dependencies in pubspec.yaml.

    Running pub upgrade failed with the following output:

    ERR: The current Dart SDK version is 2.0.0-dev.49.0.
     Because pikaday_datepicker_angular2 requires SDK version >=1.23.0 <1.25.0, version solving failed.
  • Fix platform conflicts.

    Error(s) prevent platform classification:

    Fix dependencies in pubspec.yaml.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use pikaday_datepicker_angular2.dart.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 2 hints.

    Run dartfmt to format lib/pikaday_datepicker_angular2.dart.

    Run dartfmt to format lib/src/pikaday_component.dart.


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