JarCastingAngular Schema Form Date Picker Add-on
This is an add-on for Angular Schema Form.
Everyone loves a nice date picker - now you can have your very own date picker in Schema Form! The date picker add-on uses the excellent jQuery-based date picker, pickadate.js.
Dates in JSON Schema are of type "string" and follow the RFC 3339 date fomat, which, in turn, follows ISO 8601. What does that mean for you? Basically, just stick with the format yyyy-mm-dd and you'll be fine (...but you can change it if you must).
Within Schema Form, pickadate only supports dates - not times.
Installation
The date picker is an add-on to the Bootstrap decorator. To use it, just include bootstrap-datepicker.min.js after bootstrap-decorator.min.js.
You'll need to load a few additional files to use pickadate in this order:
- jQuery (pickadate depends on it)
- The pickadate source files (see the pickadate.js GitHub page for documentation)
- The pickadate CSS (you'll have to choose theme)
- Translation files for whatever language you want to use
Easiest way is to install is with bower, this will also include dependencies:
$ bower install angular-schema-form-datepicker
Usage
The datepicker add-on adds a new form type, datepicker, and a new default mapping.
| Form Type | Becomes |
|---|---|
| datepicker | a pickadate widget |
| Schema | Default Form type |
|---|---|
| "type": "string" and "format": "date" | datepicker |
Form Type Options
The datepicker form type takes two date range options: minDate and maxDate. minDate and maxDate both accept one of the following as values:
- A string in the format
yyyy-mm-dd, - A unix timestamp (as a Number), or
- An instance of
Date
It is also possible to set the date format using the format option, which is used to format the date stored by AngularJS, but note that in doing so you break the standard and other JSON Schema validators might complain. The view date displayed by pickadate is set by the translation files. see Installation
Example
Below is an example. It's written in javascript instead of pure schema and form so the use of the date object is supported.
scope.schema = {
"type": "object",
"properties": {
"birthDate": {
"title": "Bday",
"type": "string",
"format": "date"
}
}
}
scope.form = [
{
"key": "birthDate",
"minDate": "1995-09-01",
"maxDate": new Date(),
"format": "yyyy-mm-dd"
}
]
