pikaday_datepicker_angular 3.1.0

  • README.md
  • Installing
  • Versions
  • 86

PikadayAngular (with Angular4)

A Dart Datepicker usable as a AngularDart 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 in web/main.dart!

Import and use PikadayComponent into your AngularDart component:

import 'package:pikaday_datepicker_angular/pikaday_datepicker_angular.dart';

// example of how to use the PikadayComponent to display a day picker.
    selector: 'pick-day-component',
    template: '''<pikaday [(day)]="selectedDay" format="YYYY-MM-DD"
                          placeholder="select a day">
                 <div>day: {{selectedDay | date}}</div>''',
    directives: const [PikadayComponent],
    pipes: const [COMMON_PIPES])
class DayPickerComponent {
  DateTime selectedDay = new DateTime(2015, 2, 1);

// example of how to use the PikadayComponent to display a day and time picker.
    selector: 'pick-day-time-component',
    template: '''<pikaday [(day)]="selectedDayTime" format="YYYY-MM-DD h:mm A"
                          firstDay="1" minDate="2010-1-1" maxDate="2025-12-31"
                          [showTime]="true" [autoClose]="false" [incrementMinuteBy]="5"
                          placeholder="select a day and time">
                 <div>day: {{selectedDayTime | date}}</div>
                 <div>time: {{daytime24}} o'clock</div>''',
    directives: const [PikadayComponent],
    pipes: const [COMMON_PIPES])
class DayTimePickerComponent {
  String get daytime24 =>
  DateTime selectedDayTime = new DateTime(2015, 2, 1, 13, 30);

  String _padTimeAs2Chars(int hoursOrMinutes) =>
      hoursOrMinutes < 10 ? "0$hoursOrMinutes" : hoursOrMinutes.toString();

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
#- angular
### configuration if example web folder should be compiled to js
- angular:
    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
  • date 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)
  • time attributes directly used to initialize PikadayParams
    • autoClose bool or boolish string
    • use24hour bool or boolish string
    • showTime bool or boolish string
    • timeLabel string
    • showMinutes bool or boolish string
    • showSeconds bool or boolish string
    • incrementHourBy num
    • incrementMinuteBy num
    • incrementSecondBy num

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


3.1.0 - 2018-02-27

  • moved back to the official, new (1.2) version of pickaday.dart instead of using my fork of it
  • merged in time support by thosakwe that used new pickaday.dart options, e.g. [showTime]="true" [incrementMinuteBy]="4"

3.0.1 - 2017-10-24

  • commented out dart_to_js_script_rewriter from standard transformer section (it's only meant to be used if the provided example is to be looked at)

3.0.0 - 2017-09-15

  • upgraded the pikaday_datepicker_angular2 package version 2.1.4. from angular2 to angular4

1. Depend on it

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

  pikaday_datepicker_angular: "^3.1.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_angular/pikaday_datepicker_angular.dart';
Version Uploaded Documentation Archive
3.1.0 Feb 28, 2018 failed Download pikaday_datepicker_angular 3.1.0 archive
3.0.1 Oct 24, 2017 failed Download pikaday_datepicker_angular 3.0.1 archive
3.0.0 Sep 15, 2017 failed Download pikaday_datepicker_angular 3.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]
81 / 100
Code health derived from static analysis. [more]
100 / 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_angular requires SDK version >=1.24.0 <1.25.0, version solving failed.
  • Fix platform conflicts.

    Error(s) prevent platform classification:

    Fix dependencies in pubspec.yaml.

  • Fix analysis_options.yaml.

    We were unable to parse analysis_options.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_angular.dart.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 1 hint.

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

  • Enable strong mode analysis.

    Strong mode helps you to detect bugs and potential issues earlier.Start your analysis_options.yaml file with the following:

      strong-mode: true


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