A Dart Datepicker for AngularDart v4 is available as a new package pikaday_datepicker_angular.
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="https://github.com/simon-void/pikaday_datepicker_angular2/blob/master/jsLibs/pikaday.css">
<script src="https://github.com/simon-void/pikaday_datepicker_angular2/raw/master/jsLibs/moment.js"></script>
<script src="https://github.com/simon-void/pikaday_datepicker_angular2/raw/master/jsLibs/pikaday.js"></script>
<script src="https://github.com/simon-void/pikaday_datepicker_angular2/raw/master/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 under web!
Import and use PikadayComponent into your AngularDart2 component:
import 'package:angular2/core.dart';
import 'package:pikaday_datepicker_angular2/pikaday_datepicker_angular2.dart';
@Component(
selector: 'my-app',
template: '''<h1>AngularDart2-datepicker</h1>
<pikaday [(day)]="selectedDay" format="DD-MM-YYYY"
minDate="2010-1-1" maxDate="2025-12-31"
firstDay="1">
</pikaday>
<div>selectedDay: {{selectedDay | date}}</div>''',
directives: const [PikadayComponent]
)
class AppComponent {
DateTime selectedDay = new DateTime(2016, 12, 14);
}
If you want to compile the example under web to js, you have to change the transformer configuration to
transformers:
### (default) configuration if this package should be used as a library (import) or if the app should be execute as Dart in Dartium
#- angular2
### configuration if example web folder should be compiled to js
- angular2:
platform_directives:
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
platform_pipes:
- 'package:angular2/common.dart#COMMON_PIPES'
entry_points: web/main.dart
- dart_to_js_script_rewriter
If you're looking for a datepicker within a plain Dart project (not with angular), check out the Pikaday package.
PikadayComponent has many useful options:
day
the DateTime instance to display/update (replacing/combining defaultDay
and setDefaultDate
from PikadayParams)cssClasses
setting css classes on input (<input class="{{cssClasses}}>)placeholder
sets the placeholder of the pikaday-inputfieldbound
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 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 (default false
)isRTL
reverse the calendar for right-to-left languagesi18n
language defaults for month and weekday names (see internationalization example on Pikaday.js)yearSuffix
additional text to append to the year in the titleshowMonthAfterYear
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 calendarsmainCalendarIsLeft
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 visibletheme
define a classname that can be used as a hook for styling different themes (default null
)<link rel="stylesheet" href="https://github.com/simon-void/pikaday_datepicker_angular2/blob/master/jsLibs/pikaday.css">
<script src="https://github.com/simon-void/pikaday_datepicker_angular2/raw/master/jsLibs/moment.js"></script>
<script src="https://github.com/simon-void/pikaday_datepicker_angular2/raw/master/jsLibs/pikaday.js"></script>
<script src="https://github.com/simon-void/pikaday_datepicker_angular2/raw/master/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