pikaday_datepicker 3.0.1

  • Readme
  • Changelog
  • Installing
  • 59

PikadayDatepicker #

A Dart Datepicker usable (with dart:html) #

  • wraps a lightweight js-lib (Pikaday, 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-file config #

Link to the Pikaday-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:

<link rel="stylesheet" href="pikaday.css">
<script src="moment.js"></script>
<script src="pikaday.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.

dart-file usage #

Check out the example under web.

Import and use PikadayParams and upgradeInputToDatepicker(...) into your dart code:

import 'dart:html';
import 'package:intl/intl.dart';
import 'package:pikaday_datepicker/pikaday_datepicker.dart';

void main() {
  final inputElem = new InputElement() ..placeholder="select a day";
  final outputElem = new DivElement();

  final params = new PikadayParams()
    ..defaultDay = new DateTime(2015, 2, 1)

  final dayFormatter = new DateFormat('MMM dd, yyyy');
  updateOutput(DateTime selectedDay){
    outputElem.text = "selectedDay: ${dayFormatter.format(selectedDay)}";

  // make the input a pikaday-datepicker
  upgradeInputToDatepicker(inputElem, updateOutput, params);

  // wire the elements to the page
  final appDiv = querySelector("#datepickerShowcase");
  appDiv.text = "";

Configuration #

PikadayParams has many useful options, which can be provided as instance of type String or their real type (int/bool/DateTime with format yyyy-mm-dd):

  • defaultDay doesn't what it sounds like
  • showDayOnInit display defaultDay in inputfield on startup, otherwise show no date, but use defaultDay when opening the picker-dialog
  • 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)
  • 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: constructor not a function

The Dart-Wrapper can't access the Pikaday-JS-constructor. You probably forgot to link to the js-lib itself in index.html:

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

Authors #

Thanks to David Bushell for writing Pikaday.

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

Changelog #

3.0.1 - 2018-08-06 #

  • downgraded minimum dart-sdk from 2.0.0 to 2.0.0-dev.69.3 because that is the version pub.dartlang.org currently employs to check packages.

3.0.0 - 2018-08-06 #

  • upgraded to Dart2
  • upgraded to moment.js 2.22.2
  • upgraded to pikaday.js 1.7.0

2.0.0 - 2017-02-26 #

  • moved the angular2 part into it's own package (pikaday_datepicker_angular2), so that users of the vanilla dart version (this package) won't have to deal with the angular2 sources/transformers.

1.0.0 - 2017-01-21 #

  • refactored out a plain old Dart Wrapper around Pikaday that can be used independently of the Angular2 Component.

0.8.7 - 2017-01-17 #

  • README.md: fixed Usage section a little more and added a Common Problems section.

0.8.6 - 2017-01-06 #

  • README.md: fixed Usage section

0.8.5 - 2016-12-16 #

  • fixed angular transformer configuration (again, as in 0.8.3)

0.8.4 - 2016-12-16 #

  • added placeholder attribute to Pikaday-inputfield

0.8.3 - 2016-12-16 #

  • fixed angular transformer configuration. This package is finally importable.

0.8.0 - 2016-12-14 #

  • initial version of the PikadateComponent

Use this package as a library

1. Depend on it

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

  pikaday_datepicker: ^3.0.1

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/pikaday_datepicker.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.

We analyzed this package on Nov 15, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.0
  • pana: 0.12.21


Detected platforms: web

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

Health suggestions

Format lib/pikaday_datepicker.dart.

Run dartfmt to format lib/pikaday_datepicker.dart.

Maintenance suggestions

Package is getting outdated. (-27.67 points)

The package was last published 66 weeks ago.

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and pikaday_datepicker.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.69.3 <3.0.0
Dev dependencies
build_runner ^0.10.0
build_web_compilers ^0.4.0