From a98e1dfb256b367b17df0b3aeb70051b004a46da Mon Sep 17 00:00:00 2001 From: sahaya rex Date: Fri, 29 Apr 2016 02:44:22 +0530 Subject: [PATCH] Date field for angular formly ionic templates --- README.md | 61 +++++++++++++++++++ src/fields/ion-date.html | 5 ++ src/modules/angular-formly-templates-ionic.js | 2 +- 3 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 src/fields/ion-date.html diff --git a/README.md b/README.md index 359dc96..19aa8f3 100644 --- a/README.md +++ b/README.md @@ -343,6 +343,67 @@ _Example select field_ } ``` +--- +#### Date form field +>The date field allows date input with a input element set to `type="date"`. It requires ion-datetime-picker from https://github.com/katemihalikova/ion-datetime-picker + + +# Installation of ion-datetime-picker + +1. Use bower to install the new module: +```bash +bower install ion-datetime-picker --save +``` +2. Import the `ion-datetime-picker` javascript and css file into your HTML file (or use [wiredep](https://github.com/taptapship/wiredep)): +```html + + +``` +3. Add `ion-datetime-picker` as a dependency on your Ionic app: +```javascript +angular.module("myApp", ["ionic", "ion-datetime-picker"]); +``` + +## Configuration attributes + +##### dateFormat (string, optional) +>`dateFormat` is what is used to format the date. Defaults to `MMM dd, yyyy` + +##### `date` and `time` attributes + +Choose which picker type is used. When neither is set, It assumes both and use the datetime picker. + +##### `mondayFirst` attribute + +Set this if you want to have Monday as the first day of a week. + +##### `seconds` attribute + +By default, in the time picker, It allow to change only hours and minutes. Set this attribute to use also seconds. + +##### `amPm` attribute + +By default, in the time picker, I use 24-hour clock. Set this attribute to change it to 12-hour clock. + + +_Example date field_ +```json +{ + "key": "datetime", + "type": "date", + "templateOptions": { + "dateFormat": "yyyy-MM-dd hh:mm a", + "label": "Date", + "date": true, + "time": true, + "mondayFirst": true, + "seconds": false, + "amPm": true, + "icon":"ion-ios-calendar-outline" + } +} +``` + ### ToDos - Write tests diff --git a/src/fields/ion-date.html b/src/fields/ion-date.html new file mode 100644 index 0000000..070caca --- /dev/null +++ b/src/fields/ion-date.html @@ -0,0 +1,5 @@ + diff --git a/src/modules/angular-formly-templates-ionic.js b/src/modules/angular-formly-templates-ionic.js index 7875687..ec12b50 100644 --- a/src/modules/angular-formly-templates-ionic.js +++ b/src/modules/angular-formly-templates-ionic.js @@ -2,7 +2,7 @@ angular.module('formlyIonic', ['formly'], function configFormlyIonic(formlyConfi 'use strict'; - angular.forEach(['checkbox', 'input', 'radio', 'range', 'textarea', 'toggle', 'select', 'floating-input', 'stacked-input', 'inline-input'], function (fieldName) { + angular.forEach(['checkbox', 'input', 'radio', 'range', 'textarea', 'toggle', 'select', 'floating-input', 'stacked-input', 'inline-input', 'date'], function (fieldName) { formlyConfigProvider.setType({ name: fieldName, templateUrl: getFieldTemplateUrl(fieldName)