pikaday_datepicker_angular 3.1.0

  • Readme
  • Changelog
  • Installing
  • 0

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

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.

Angular #

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 (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>

Authors #

Contributors #

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

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

Changelog #

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

Use this package as a library

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';
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.


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