pikaday_datepicker 2.0.0

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 57

PikadayComponent

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

screenshot

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_wrapper.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)
    ..format="DD-MM-YYYY"
    ..firstDay="1"
    ..minDate="2010-1-1"
    ..maxDate="2025-12-31"
    ..showDayOnInit="false";

  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 = "";
  appDiv.children
    ..add(inputElem)
    ..add(outputElem);
}

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

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

1. Depend on it

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


dependencies:
  pikaday_datepicker: "^2.0.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/pikaday_wrapper.dart';
        
Version Uploaded Documentation Archive
2.0.0 Feb 26, 2017 Go to the documentation of pikaday_datepicker 2.0.0 Download pikaday_datepicker 2.0.0 archive
1.0.0 Jan 21, 2017 Go to the documentation of pikaday_datepicker 1.0.0 Download pikaday_datepicker 1.0.0 archive
0.8.7 Jan 17, 2017 Go to the documentation of pikaday_datepicker 0.8.7 Download pikaday_datepicker 0.8.7 archive
0.8.6 Jan 6, 2017 Go to the documentation of pikaday_datepicker 0.8.6 Download pikaday_datepicker 0.8.6 archive
0.8.5 Dec 16, 2016 Go to the documentation of pikaday_datepicker 0.8.5 Download pikaday_datepicker 0.8.5 archive
0.8.4 Dec 16, 2016 Go to the documentation of pikaday_datepicker 0.8.4 Download pikaday_datepicker 0.8.4 archive
0.8.3 Dec 16, 2016 Go to the documentation of pikaday_datepicker 0.8.3 Download pikaday_datepicker 0.8.3 archive
0.8.2 Dec 16, 2016 Go to the documentation of pikaday_datepicker 0.8.2 Download pikaday_datepicker 0.8.2 archive
0.8.1 Dec 16, 2016 Go to the documentation of pikaday_datepicker 0.8.1 Download pikaday_datepicker 0.8.1 archive

Analysis

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

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

Scores

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

Platforms

Detected platforms: web

Platform components identified in package: html, js.

Suggestions

  • 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.dart.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 2 hints.

    Run dartfmt to format lib/pikaday_wrapper.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.20.0 <2.0.0
Dev dependencies
browser ^0.10.0