From 38b5f5032008464c8525e452089364a7461954cd Mon Sep 17 00:00:00 2001 From: Fuxian Ding Date: Sat, 8 Aug 2015 09:48:30 +0800 Subject: [PATCH 1/9] Default Date when someone want to set today to minDate/maxDate/defaultDate, don't need to create a variables to store today date, just need to set 'now' --- pikaday-angular.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pikaday-angular.js b/pikaday-angular.js index e39d475..115d3a0 100644 --- a/pikaday-angular.js +++ b/pikaday-angular.js @@ -112,7 +112,7 @@ case "maxDate": case "defaultDate": - config[attr] = new Date(value); + config[attr] = (value === 'now')? new Date(): new Date(value); break; // Elements From 2ec4106bcc3d748b68992cfa09d917d23a140256 Mon Sep 17 00:00:00 2001 From: Fuxian Ding Date: Mon, 30 May 2016 11:51:46 +0800 Subject: [PATCH 2/9] add ngModel support --- pikaday-angular.js | 38 +++++++++++++++++++++++++++++++++----- sample/index.html | 8 +++++--- 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/pikaday-angular.js b/pikaday-angular.js index 115d3a0..216d8b0 100644 --- a/pikaday-angular.js +++ b/pikaday-angular.js @@ -32,12 +32,12 @@ function pikadayDirectiveFn(pikadayConfig) { return { - restrict: 'A', scope: { pikaday: '=', onSelect: '&', onOpen: '&', onClose: '&', onDraw: '&', disableDayFn: '&' }, - link: function (scope, elem, attrs) { + require: '?ngModel', + link: function (scope, elem, attrs, modelCtrl) { // Init config Object @@ -46,7 +46,7 @@ scope.$apply(); }); }}; - + var hasMoment = typeof moment === 'function'; // Decorate config with globals angular.forEach(pikadayConfig, function (value, key) { @@ -131,11 +131,39 @@ } } - // instantiate pikaday with config, bind to scope, add destroy event callback - var picker = new Pikaday(config); scope.pikaday = picker; + + if (modelCtrl) { + modelCtrl.$formatters.push(function (modelValue) { + if (!modelValue) { + return modelValue + } + var date = new Date(Date.parse(modelValue)); + if (date == "Invalid Date") { + modelCtrl.$setValidity('date', false); + return modelValue; + } + return hasMoment? moment(date).format(picker._o.format) : date.toDateString(); + }); + + modelCtrl.$parsers.push(function (viewValue) { + var date; + if (hasMoment) { + date = moment(viewValue, picker._o.format); + } else { + date = new Date(Date.parse(viewValue)); + } + + if (date == "Invalid Date" || (typeof date.isValid === "function" && !date.isValid())) { + modelCtrl.$setValidity('date', false); + return undefined; + } + return hasMoment? date.toDate(): date; + }) + } + scope.$on('$destroy', function () { picker.destroy(); }); diff --git a/sample/index.html b/sample/index.html index 83adbb6..e7d591e 100644 --- a/sample/index.html +++ b/sample/index.html @@ -20,12 +20,14 @@

Sample

- - + - + + + +
{{sample.date | date}}
From f146b1313888498d3f040542917017eb5b74fe25 Mon Sep 17 00:00:00 2001 From: Fuxian Ding Date: Mon, 30 May 2016 13:35:18 +0800 Subject: [PATCH 3/9] get date from pikaday object --- pikaday-angular.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/pikaday-angular.js b/pikaday-angular.js index 216d8b0..0b8760c 100644 --- a/pikaday-angular.js +++ b/pikaday-angular.js @@ -149,18 +149,8 @@ }); modelCtrl.$parsers.push(function (viewValue) { - var date; - if (hasMoment) { - date = moment(viewValue, picker._o.format); - } else { - date = new Date(Date.parse(viewValue)); - } - - if (date == "Invalid Date" || (typeof date.isValid === "function" && !date.isValid())) { - modelCtrl.$setValidity('date', false); - return undefined; - } - return hasMoment? date.toDate(): date; + date = picker.getDate(); + return date; }) } From e6d4ff2007087f8f6abc07f297f560c91ca758e2 Mon Sep 17 00:00:00 2001 From: Fuxian Ding Date: Mon, 30 May 2016 14:29:32 +0800 Subject: [PATCH 4/9] watch minDate and maxDate --- .gitignore | 1 + pikaday-angular.js | 21 +++++++++++++++++++-- sample/index.html | 8 +++----- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/.gitignore b/.gitignore index 3882e7d..211209d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +/.idea node_modules /notes.txt /tmp diff --git a/pikaday-angular.js b/pikaday-angular.js index 0b8760c..dc2c3f4 100644 --- a/pikaday-angular.js +++ b/pikaday-angular.js @@ -34,7 +34,14 @@ return { restrict: 'A', scope: { - pikaday: '=', onSelect: '&', onOpen: '&', onClose: '&', onDraw: '&', disableDayFn: '&' + pikaday: '=', + minDate: '=', + maxDate: '=', + onSelect: '&', + onOpen: '&', + onClose: '&', + onDraw: '&', + disableDayFn: '&' }, require: '?ngModel', link: function (scope, elem, attrs, modelCtrl) { @@ -109,7 +116,17 @@ // Dates case "minDate": + scope.$watch('minDate', function (nValue) { + if (!nValue) return; + picker.setMinDate(nValue); + }); + break; case "maxDate": + scope.$watch('maxDate', function (nValue) { + if (!nValue) return; + picker.setMaxDate(nValue); + }); + break; case "defaultDate": config[attr] = (value === 'now')? new Date(): new Date(value); @@ -151,7 +168,7 @@ modelCtrl.$parsers.push(function (viewValue) { date = picker.getDate(); return date; - }) + }); } scope.$on('$destroy', function () { diff --git a/sample/index.html b/sample/index.html index e7d591e..a42badc 100644 --- a/sample/index.html +++ b/sample/index.html @@ -21,13 +21,11 @@

Sample

- + - + - - -
{{sample.date | date}}
+ From 7d8578261906583c4d419d249d1ca0c8f52d48fd Mon Sep 17 00:00:00 2001 From: Fuxian Ding Date: Mon, 30 May 2016 15:12:39 +0800 Subject: [PATCH 5/9] pikaday value is not required --- pikaday-angular.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/pikaday-angular.js b/pikaday-angular.js index dc2c3f4..97aed26 100644 --- a/pikaday-angular.js +++ b/pikaday-angular.js @@ -150,7 +150,9 @@ } // instantiate pikaday with config, bind to scope, add destroy event callback var picker = new Pikaday(config); - scope.pikaday = picker; + if (attrs.pikaday) { + scope.pikaday = picker; + } if (modelCtrl) { modelCtrl.$formatters.push(function (modelValue) { @@ -166,8 +168,7 @@ }); modelCtrl.$parsers.push(function (viewValue) { - date = picker.getDate(); - return date; + return picker.getDate(); }); } From 1c3f54e9b045af15f2d6af5633427a81f75e4dbd Mon Sep 17 00:00:00 2001 From: Fuxian Ding Date: Mon, 30 May 2016 15:16:36 +0800 Subject: [PATCH 6/9] update readme file --- README.md | 24 +++++++++++++----------- sample/index.html | 2 +- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 1a7a89d..768d5e4 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,14 @@ # __pikaday-angular__ v2.0.0 __pikaday-angular__ is a directive wraper that aims to make using __[Pikaday](https://github.com/dbushell/Pikaday)__ with __[AngularJS](https://angularjs.org/)__ as simple as possible. [Examples →](http://nverba.github.io/pikaday-angular/) +## Install (NPM & Bower) + +``` +[npm || bower] install --save pikaday-angular +``` + +pikaday-angular is provided in a [UMD](https://github.com/umdjs/umd) wrapper, making it compatible with several build systems & preprocessors such as [Browserify](http://browserify.org/), see the [source of the Example page](https://github.com/nverba/pikaday-angular/tree/gh-pages) to see pikaday-angular being used with Browserify & Gulp. + __How simple?__ - Include the module as a dependency. @@ -11,9 +19,9 @@ angular.module('YourApp', ['pikaday']) Then use the `pikaday` attribute to bind the picker to a scope. ```HTML - + ``` -You now have access to Pikaday's methods from the scoped object `myPickerObject`. +You now have access to Pikaday's methods from the scoped object `myPickerObject`. and `date`'s value will be a date object representing the value. ## Attributes @@ -22,9 +30,11 @@ Any of Pikaday's options can be passed to the corresponding attribute, the direc *With the exception of function expressions, which are bound as callbacks. see: [Functions](#functions) ```HTML - + ``` +`minDate` and `maxDate` are watched, so that you can change max/min date dynamically. + ## Global config Optionally, you may provide a global config* object for all pickers by creating a `pikadayConfigProvider`. @@ -117,14 +127,6 @@ If you load [Moment.js](http://momentjs.com/) anywhere in your HTML, Pikaday wil To get Moment.js to handle i18n output formatting, you need to load the appropriate Moment.js locale file. _Moment will automatically default to the most recently loaded locale file_. Explicit locale selection can be made programmatically by calling `moment.locale("")` [with the key of a loaded locale](http://momentjs.com/docs/#/i18n/instance-locale/). -## NPM & Bower - -``` -[npm || bower] install --save pikaday-angular -``` - -pikaday-angular is provided in a [UMD](https://github.com/umdjs/umd) wrapper, making it compatible with several build systems & preprocessors such as [Browserify](http://browserify.org/), see the [source of the Example page](https://github.com/nverba/pikaday-angular/tree/gh-pages) to see pikaday-angular being used with Browserify & Gulp. - ## Testing The coercion tests can be run after installing the required [npm](https://www.npmjs.com/) packages. diff --git a/sample/index.html b/sample/index.html index a42badc..732ec2d 100644 --- a/sample/index.html +++ b/sample/index.html @@ -21,7 +21,7 @@

Sample

- + From f1a546030b651ce128e4f491b6ba1aed0bf6871c Mon Sep 17 00:00:00 2001 From: Fuxian Ding Date: Mon, 30 May 2016 15:22:43 +0800 Subject: [PATCH 7/9] 2.0.1 --- README.md | 2 +- bower.json | 4 ++-- package.json | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 768d5e4..e7a1f71 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# __pikaday-angular__ v2.0.0 +# __pikaday-angular__ v2.0.1 __pikaday-angular__ is a directive wraper that aims to make using __[Pikaday](https://github.com/dbushell/Pikaday)__ with __[AngularJS](https://angularjs.org/)__ as simple as possible. [Examples →](http://nverba.github.io/pikaday-angular/) ## Install (NPM & Bower) diff --git a/bower.json b/bower.json index 4996a9d..1874d9a 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pikaday-angular", - "version": "2.0.0", + "version": "2.0.1", "authors": [ "nverba " ], @@ -16,7 +16,7 @@ "datepicker" ], "license": "MIT", - "homepage": "https://github.com/nverba/pikaday-angular", + "homepage": "https://github.com/fxding/pikaday-angular", "dependencies": { "angular": "^1.3.15", "pikaday": "^1.3.2" diff --git a/package.json b/package.json index 307a051..58ae148 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pikaday-angular", - "version": "2.0.0", + "version": "2.0.1", "description": "an AngularJS directive wraper that aims to make using Pikaday with Angular as simple as possible.", "main": "pikaday-angular.js", "scripts": { @@ -8,7 +8,7 @@ }, "repository": { "type": "git", - "url": "https://github.com/nverba/angular-pikaday.git" + "url": "https://github.com/fxding/angular-pikaday.git" }, "keywords": [ "angular", @@ -22,9 +22,9 @@ "author": "nverba ", "license": "MIT", "bugs": { - "url": "https://github.com/nverba/angular-pikaday/issues" + "url": "https://github.com/fxding/angular-pikaday/issues" }, - "homepage": "https://github.com/nverba/angular-pikaday", + "homepage": "https://github.com/fxding/angular-pikaday", "dependencies": { "angular": "^1.3.15", "pikaday": "^1.3.2" From 9085552518543d28cf278fb52cfb4ed2eac29f99 Mon Sep 17 00:00:00 2001 From: Fuxian Ding Date: Mon, 30 May 2016 15:47:45 +0800 Subject: [PATCH 8/9] rename repo name --- README.md | 8 ++-- bower.json | 8 ++-- karma.conf.js | 2 +- pikaday-angular.js => ng-pikaday.js | 0 package.json | 12 +++--- sample/examples.html | 66 ----------------------------- sample/index.html | 2 +- 7 files changed, 16 insertions(+), 82 deletions(-) rename pikaday-angular.js => ng-pikaday.js (100%) delete mode 100644 sample/examples.html diff --git a/README.md b/README.md index e7a1f71..25be3c6 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ -# __pikaday-angular__ v2.0.1 -__pikaday-angular__ is a directive wraper that aims to make using __[Pikaday](https://github.com/dbushell/Pikaday)__ with __[AngularJS](https://angularjs.org/)__ as simple as possible. [Examples →](http://nverba.github.io/pikaday-angular/) +# __ng-pikaday__ v2.0.1 +__ng-pikaday__ is a directive wraper that aims to make using __[Pikaday](https://github.com/dbushell/Pikaday)__ with __[AngularJS](https://angularjs.org/)__ as simple as possible. [Examples →](http://nverba.github.io/pikaday-angular/) ## Install (NPM & Bower) ``` -[npm || bower] install --save pikaday-angular +[npm || bower] install --save ng-pikaday ``` -pikaday-angular is provided in a [UMD](https://github.com/umdjs/umd) wrapper, making it compatible with several build systems & preprocessors such as [Browserify](http://browserify.org/), see the [source of the Example page](https://github.com/nverba/pikaday-angular/tree/gh-pages) to see pikaday-angular being used with Browserify & Gulp. +ng-pikaday is provided in a [UMD](https://github.com/umdjs/umd) wrapper, making it compatible with several build systems & preprocessors such as [Browserify](http://browserify.org/), see the [source of the Example page](https://github.com/nverba/pikaday-angular/tree/gh-pages) to see ng-pikaday being used with Browserify & Gulp. __How simple?__ - Include the module as a dependency. diff --git a/bower.json b/bower.json index 1874d9a..a282ce3 100644 --- a/bower.json +++ b/bower.json @@ -1,11 +1,11 @@ { - "name": "pikaday-angular", - "version": "2.0.1", + "name": "ng-angular", + "version": "2.0.2", "authors": [ "nverba " ], "description": "an AngularJS directive wraper that aims to make using Pikaday with Angular as simple as possible.", - "main": "pikaday-angular.js", + "main": "ng-pikaday.js", "keywords": [ "angular", "angularjs", @@ -16,7 +16,7 @@ "datepicker" ], "license": "MIT", - "homepage": "https://github.com/fxding/pikaday-angular", + "homepage": "https://github.com/fxding/ng-pikaday", "dependencies": { "angular": "^1.3.15", "pikaday": "^1.3.2" diff --git a/karma.conf.js b/karma.conf.js index 00cccbc..01a52d7 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -18,7 +18,7 @@ module.exports = function(config) { 'node_modules/angular/angular.js', 'node_modules/angular-mocks/angular-mocks.js', 'node_modules/pikaday/pikaday.js', - 'pikaday-angular.js', + 'ng-pikaday.js', 'test/*_test.js' ], diff --git a/pikaday-angular.js b/ng-pikaday.js similarity index 100% rename from pikaday-angular.js rename to ng-pikaday.js diff --git a/package.json b/package.json index 58ae148..b6b477c 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { - "name": "pikaday-angular", - "version": "2.0.1", + "name": "ng-pikaday", + "version": "2.0.2", "description": "an AngularJS directive wraper that aims to make using Pikaday with Angular as simple as possible.", - "main": "pikaday-angular.js", + "main": "ng-pikaday.js", "scripts": { "test": "karma start karma.conf.js" }, "repository": { "type": "git", - "url": "https://github.com/fxding/angular-pikaday.git" + "url": "https://github.com/fxding/ng-pikaday.git" }, "keywords": [ "angular", @@ -22,9 +22,9 @@ "author": "nverba ", "license": "MIT", "bugs": { - "url": "https://github.com/fxding/angular-pikaday/issues" + "url": "https://github.com/fxding/ng-pikaday/issues" }, - "homepage": "https://github.com/fxding/angular-pikaday", + "homepage": "https://github.com/fxding/ng-pikaday", "dependencies": { "angular": "^1.3.15", "pikaday": "^1.3.2" diff --git a/sample/examples.html b/sample/examples.html deleted file mode 100644 index 9717368..0000000 --- a/sample/examples.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - pikaday-angular by nverba - - - - - - - - - - - -
-
-
- Pikaday screenshot -

pikaday-angular

-
-

An AngularJS directive wraper for the Pikaday datepicker

- View on GitHub -
-
- -
-
-
-
- - - - - -
- - -
-
- - - - - - - - - - - - - - - diff --git a/sample/index.html b/sample/index.html index 732ec2d..802e435 100644 --- a/sample/index.html +++ b/sample/index.html @@ -29,7 +29,7 @@

Sample

- +