pikaday_datepicker 2.0.0 pikaday_datepicker: ^2.0.0 copied to clipboard
Provides a dart datepicker by wrapping the lightweight pikaday js-library.
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
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 likeshowDayOnInit
displaydefaultDay
in inputfield on startup, otherwise show no date, but usedefaultDay
when opening the picker-dialogbound
automatically show/hide the datepicker on input field focus (defaulttrue
iffield
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 configuredposition
(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()
ormoment().toDate()
)maxDate
the maximum/latest date that can be selected (this should be a native Date object - e.g.new Date()
ormoment().toDate()
)disableWeekends
disallow selection of Saturdays or SundaysyearRange
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 (defaultfalse
)isRTL
reverse the calendar for right-to-left languagesi18n
language defaults for month and weekday names (see internationalization example on Pikaday)yearSuffix
additional text to append to the year in the titleshowMonthAfterYear
render the month after year in the title (defaultfalse
)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 calendarsmainCalendarIsLeft
whennumberOfMonths
is used, this will help you to choose where the main calendar will be (defaulttrue
/left
, can be set tofalse
/right
). Only used for the first display or when a selected date is not already visibletheme
define a classname that can be used as a hook for styling different themes (defaultnull
)
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 #
- Stephan Schröder GitHub
Thanks to David Bushell for writing Pikaday.
Copyright © 2017 Stephan Schröder | BSD & MIT license