diff --git a/.gitignore b/.gitignore index 986ea28..4bc40f1 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ /bower_components .sass-cache *.map +.idea/ \ No newline at end of file diff --git a/README.md b/README.md index d99faa0..f94476d 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,16 @@ ## Changelog: +0.1.1 +- loosen momentjs dependecy ([#8](https://github.com/monterail/angular-mighty-datepicker/pull/8)) by [@mrodrigues](https://github.com/mrodrigues) + +0.1.0 +- added explicit dependency ([#9](https://github.com/monterail/angular-mighty-datepicker/pull/9)) by [@Jaspur](https://github.com/Jaspur) +- fixed missing week in January for leap year ([#16](https://github.com/monterail/angular-mighty-datepicker/pull/16)) by [@metrox](https://github.com/metrox) + +0.0.18 +- when two datepickers are used for range selection, additional parameters (`range-from` and `range-to`) allow to highlight selected time range + 0.0.17 - updating model in `simple` mode fixed (not tangling with model anymore) diff --git a/bower.json b/bower.json index fb94b51..07829d2 100644 --- a/bower.json +++ b/bower.json @@ -1,23 +1,25 @@ { + "name": "angular-mighty-datepicker", - "version": "0.0.17", + "version": "0.1.1", "authors": [ "Krzysztof Jung ", "Patryk Peas ", "Kamil Nicieja ", "Bartosz Erbert " ], - "repository": "git://github.com/monterail/angular-mighty-datepicker.git", + "repository": "git://github.com/dzincolorado/angular-mighty-datepicker-strict.git", "description": "Angular based datepicker with mighty options", "main": [ "build/angular-mighty-datepicker.js", "build/angular-mighty-datepicker.css" ], + "ignore": [], "dependencies": { "angular": ">= 1.2", "angular-bindonce": "*", - "moment": "~2.6.0", - "moment-range": "~1.0.1" + "moment": ">= 2.6.0", + "moment-range": "2.2.0" }, "license": "MIT", "homepage": "http://github.com/monterail/angular-mighty-datepicker" diff --git a/build/angular-mighty-datepicker.css b/build/angular-mighty-datepicker.css index 234cf2e..74b2941 100644 --- a/build/angular-mighty-datepicker.css +++ b/build/angular-mighty-datepicker.css @@ -1,11 +1,16 @@ .mighty-picker-calendar__day { cursor: pointer; position: relative; + color: #333; } .mighty-picker-calendar__day--disabled { color: #aaa; cursor: auto; } +.mighty-picker-calendar__day--in-range { + color: #347ab3; + font-weight: bold; +} .mighty-picker-calendar__day-marker-wrapper { position: relative; } @@ -25,8 +30,7 @@ font-weight: bold; } .mighty-picker-calendar__day--selected { - color: #3b5; - font-weight: bold; + background-color: #ffe684; } .mighty-picker__month { display: inline-block; diff --git a/build/angular-mighty-datepicker.js b/build/angular-mighty-datepicker.js index 4e2445b..5ddca51 100644 --- a/build/angular-mighty-datepicker.js +++ b/build/angular-mighty-datepicker.js @@ -1,260 +1,284 @@ (function() { - angular.module("mightyDatepicker", ['pasvaz.bindonce']); + angular.module("mightyDatepicker", ["pasvaz.bindonce"]); - angular.module("mightyDatepicker").directive("mightyDatepicker", function($compile) { - var options, pickerTemplate; - pickerTemplate = "
\n \n
\n
\n \n \n \n \n \n \n
\n
\n
\n
\n
\n \n \n
\n
\n
\n \n
"; - options = { - mode: "simple", - months: 1, - start: null, - filter: void 0, - callback: void 0, - markerTemplate: "{{ day.marker }}", - template: pickerTemplate - }; - return { - restrict: "AE", - replace: true, - template: '
', - scope: { - model: '=ngModel', - options: '=', - markers: '=', - after: '=', - before: '=' - }, - link: function($scope, $element, $attrs) { - var _bake, _build, _buildMonth, _buildWeek, _getMarker, _indexMarkers, _indexOfMoment, _isSelected, _prepare, _setup, _withinLimits; - _bake = function() { - var domEl; - domEl = $compile(angular.element($scope.options.template))($scope); - return $element.append(domEl); - }; - _indexOfMoment = function(array, element, match) { - var key, value; - for (key in array) { - value = array[key]; - if (element.isSame(value, match)) { - return key; + angular.module("mightyDatepicker").directive("mightyDatepicker", [ + "$compile", function($compile) { + var options, pickerTemplate; + pickerTemplate = "
\n \n
\n
\n \n \n \n \n \n \n
\n
\n
\n
\n
\n \n \n
\n
\n
\n \n
"; + options = { + mode: "simple", + months: 1, + start: null, + filter: void 0, + callback: void 0, + markerTemplate: "{{ day.marker }}", + template: pickerTemplate + }; + return { + restrict: "AE", + replace: true, + template: '
', + scope: { + model: '=ngModel', + options: '=', + markers: '=', + after: '=', + before: '=', + rangeFrom: '=', + rangeTo: '=' + }, + link: function($scope, $element, $attrs) { + var _bake, _build, _buildMonth, _buildWeek, _getMarker, _indexMarkers, _indexOfMoment, _isInRange, _isSelected, _prepare, _setup, _withinLimits; + _bake = function() { + var domEl; + domEl = $compile(angular.element($scope.options.template))($scope); + return $element.append(domEl); + }; + _indexOfMoment = function(array, element, match) { + var key, value; + for (key in array) { + value = array[key]; + if (element.isSame(value, match)) { + return key; + } } - } - return -1; - }; - _indexMarkers = function() { - var marker; - if ($scope.markers) { - return $scope.markerIndex = (function() { - var _i, _len, _ref, _results; - _ref = $scope.markers; + return -1; + }; + _indexMarkers = function() { + var marker; + if ($scope.markers) { + return $scope.markerIndex = (function() { + var _i, _len, _ref, _results; + _ref = $scope.markers; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + marker = _ref[_i]; + _results.push(marker.day); + } + return _results; + })(); + } + }; + _withinLimits = function(day, month) { + var withinLimits; + withinLimits = true; + if ($scope.before) { + withinLimits && (withinLimits = day.isBefore($scope.before)); + } + if ($scope.after) { + withinLimits && (withinLimits = day.isAfter($scope.after)); + } + return withinLimits; + }; + _getMarker = function(day) { + var ix; + ix = _indexOfMoment($scope.markerIndex, day, 'day'); + if (ix > -1) { + return $scope.markers[ix].marker; + } else { + return void 0; + } + }; + _isSelected = function(day) { + switch ($scope.options.mode) { + case "multiple": + return _indexOfMoment($scope.model, day, 'day') > -1; + default: + return $scope.model && day.isSame($scope.model, 'day'); + } + }; + _isInRange = function(day) { + if ($scope.options.rangeMode) { + if ($scope.options.rangeMode === "from") { + return moment.range($scope.model, $scope.before).contains(day) || day.isSame($scope.before, 'day'); + } else { + return moment.range($scope.after, $scope.model).contains(day) || day.isSame($scope.after, 'day'); + } + } else { + return false; + } + }; + _buildWeek = function(time, month) { + var day, days, filter, start, weekType, _i, _len; + days = []; + filter = true; + weekType = $scope.options.useIsoWeek === true ? 'isoWeek' : 'week'; + start = time.startOf(weekType); + days = [0, 1, 2, 3, 4, 5, 6].map(function(d) { + var day, withinLimits, withinMonth; + day = moment(start).add('days', d); + withinMonth = day.month() === month; + withinLimits = _withinLimits(day, month); + if ($scope.options.filter) { + filter = $scope.options.filter(day); + } + return { + date: day, + selected: _isSelected(day) && withinMonth, + inRange: _isInRange(day), + disabled: !(withinLimits && withinMonth && filter), + marker: withinMonth ? _getMarker(day) : void 0 + }; + }); + days.hasSelection = false; + for (_i = 0, _len = days.length; _i < _len; _i++) { + day = days[_i]; + if (day.selected === true) { + days.hasSelection = true; + break; + } + } + return days; + }; + _buildMonth = function(time) { + var start, w, weeks; + weeks = []; + start = time.startOf('month'); + weeks = (function() { + var _i, _results; _results = []; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - marker = _ref[_i]; - _results.push(marker.day); + for (w = _i = 0; _i <= 5; w = ++_i) { + _results.push(_buildWeek(moment(start).add('weeks', w), moment(start).month())); } return _results; })(); - } - }; - _withinLimits = function(day, month) { - var withinLimits; - withinLimits = true; - if ($scope.before) { - withinLimits && (withinLimits = day.isBefore($scope.before)); - } - if ($scope.after) { - withinLimits && (withinLimits = day.isAfter($scope.after)); - } - return withinLimits; - }; - _getMarker = function(day) { - var ix; - ix = _indexOfMoment($scope.markerIndex, day, 'day'); - if (ix > -1) { - return $scope.markers[ix].marker; - } else { - return void 0; - } - }; - _isSelected = function(day) { - switch ($scope.options.mode) { - case "multiple": - return _indexOfMoment($scope.model, day, 'day') > -1; - default: - return $scope.model && day.isSame($scope.model, 'day'); - } - }; - _buildWeek = function(time, month) { - var days, filter, start; - days = []; - filter = true; - start = time.startOf('week'); - days = [0, 1, 2, 3, 4, 5, 6].map(function(d) { - var day, withinLimits, withinMonth; - day = moment(start).add('days', d); - withinMonth = day.month() === month; - withinLimits = _withinLimits(day, month); - if ($scope.options.filter) { - filter = $scope.options.filter(day); - } return { - date: day, - selected: _isSelected(day) && withinMonth, - disabled: !(withinLimits && withinMonth && filter), - marker: withinMonth ? _getMarker(day) : void 0 + weeks: weeks, + name: time.format("MMMM YYYY") }; - }); - return days; - }; - _buildMonth = function(time) { - var calendarEnd, calendarStart, start, w, weeks, weeksInMonth; - weeks = []; - calendarStart = moment(time).startOf('month'); - calendarEnd = moment(time).endOf('month'); - weeksInMonth = calendarEnd.week() - calendarStart.week(); - if (weeksInMonth < 0) { - weeksInMonth = (calendarStart.weeksInYear() - calendarStart.week()) + calendarEnd.week(); - } - start = time.startOf('month'); - weeks = (function() { - var _i, _results; - _results = []; - for (w = _i = 0; 0 <= weeksInMonth ? _i <= weeksInMonth : _i >= weeksInMonth; w = 0 <= weeksInMonth ? ++_i : --_i) { - _results.push(_buildWeek(moment(start).add('weeks', w), moment(start).month())); - } - return _results; - })(); - return { - weeks: weeks, - name: time.format("MMMM YYYY") }; - }; - _setup = function() { - var attr, dates, start, tempOptions, v, _ref; - tempOptions = {}; - for (attr in options) { - v = options[attr]; - tempOptions[attr] = v; - } - if ($scope.options) { - _ref = $scope.options; - for (attr in _ref) { - v = _ref[attr]; - tempOptions[attr] = $scope.options[attr]; + _setup = function() { + var attr, dates, start, tempOptions, v, _ref; + tempOptions = {}; + for (attr in options) { + v = options[attr]; + tempOptions[attr] = v; } - } - $scope.options = tempOptions; - switch ($scope.options.mode) { - case "multiple": - if ($scope.model && Array.isArray($scope.model) && $scope.model.length > 0) { - if ($scope.model.length === 1) { - start = moment($scope.model[0]); - } else { - dates = $scope.model.slice(0); - start = moment(dates.sort().slice(-1)[0]); - } - } else { - $scope.model = []; - } - break; - default: - if ($scope.model) { - start = moment($scope.model); + if ($scope.options) { + _ref = $scope.options; + for (attr in _ref) { + v = _ref[attr]; + tempOptions[attr] = $scope.options[attr]; } - } - $scope.options.start = $scope.options.start || start || moment().startOf('day'); - _indexMarkers(); - return $scope.options.template = $scope.options.template.replace('ng-bind-template=""', 'ng-bind-template="' + $scope.options.markerTemplate + '"'); - }; - _prepare = function() { - var m; - $scope.months = []; - return $scope.months = (function() { - var _i, _ref, _results; - _results = []; - for (m = _i = 0, _ref = $scope.options.months; 0 <= _ref ? _i < _ref : _i > _ref; m = 0 <= _ref ? ++_i : --_i) { - _results.push(_buildMonth(moment($scope.options.start).add('months', m))); } - return _results; - })(); - }; - _build = function() { - _prepare(); - return _bake(); - }; - $scope.moveMonth = function(step) { - $scope.options.start.add('month', step); - _prepare(); - }; - $scope.select = function(day) { - var ix; - if (!day.disabled) { + $scope.options = tempOptions; switch ($scope.options.mode) { case "multiple": - if (day.selected) { - ix = _indexOfMoment($scope.model, day.date, 'day'); - $scope.model.splice(ix, 1); + if ($scope.model && Array.isArray($scope.model) && $scope.model.length > 0) { + if ($scope.model.length === 1) { + start = moment($scope.model[0]); + } else { + dates = $scope.model.slice(0); + start = moment(dates.sort().slice(-1)[0]); + } } else { - $scope.model.push(moment(day.date)); + $scope.model = []; } break; default: - $scope.model = day.date; + if ($scope.model) { + start = moment($scope.model); + } + } + $scope.options.start = $scope.options.start || start || moment().startOf('day'); + if ($scope.rangeFrom) { + $scope.options.rangeMode = "from"; + } else if ($scope.rangeTo) { + $scope.options.rangeMode = "to"; } - if ($scope.options.callback) { - $scope.options.callback(day.date); + _indexMarkers(); + return $scope.options.template = $scope.options.template.replace('ng-bind-template=""', 'ng-bind-template="' + $scope.options.markerTemplate + '"'); + }; + _prepare = function() { + var m; + $scope.months = []; + return $scope.months = (function() { + var _i, _ref, _results; + _results = []; + for (m = _i = 0, _ref = $scope.options.months; 0 <= _ref ? _i < _ref : _i > _ref; m = 0 <= _ref ? ++_i : --_i) { + _results.push(_buildMonth(moment($scope.options.start).add('months', m))); + } + return _results; + })(); + }; + _build = function() { + _prepare(); + return _bake(); + }; + $scope.moveMonth = function(step) { + $scope.options.start.add('month', step); + _prepare(); + }; + $scope.select = function(day) { + var ix; + if (!day.disabled) { + switch ($scope.options.mode) { + case "multiple": + if (day.selected) { + ix = _indexOfMoment($scope.model, day.date, 'day'); + $scope.model.splice(ix, 1); + } else { + $scope.model.push(moment(day.date)); + } + break; + default: + $scope.model = day.date; + } + if ($scope.options.callback) { + $scope.options.callback(day.date); + } + return _prepare(); } + }; + $scope.$watchCollection('markers', function(newMarkers, oldMarkers) { + _indexMarkers(); return _prepare(); + }); + _setup(); + _build(); + switch ($scope.options.mode) { + case "multiple": + $scope.$watchCollection('model', function(newVals, oldVals) { + return _prepare(); + }); + break; + case "simple": + $scope.$watch('model', function(newVal, oldVal) { + if (!moment.isMoment(newVal)) { + newVal = moment(newVal); + } + if (!oldVal || oldVal && !newVal.isSame(oldVal, 'day')) { + $scope.model = newVal; + if (oldVal) { + $scope.options.start = moment(newVal); + } + return _prepare(); + } + }); } - }; - $scope.$watchCollection('markers', function(newMarkers, oldMarkers) { - _indexMarkers(); - return _prepare(); - }); - _setup(); - _build(); - switch ($scope.options.mode) { - case "multiple": - $scope.$watchCollection('model', function(newVals, oldVals) { - return _prepare(); - }); - break; - case "simple": - $scope.$watch('model', function(newVal, oldVal) { + $scope.$watch('before', function(newVal, oldVal) { + if (newVal) { if (!moment.isMoment(newVal)) { newVal = moment(newVal); } - if (!oldVal || oldVal && !newVal.isSame(oldVal, 'day')) { - $scope.model = newVal; - if (oldVal) { - $scope.options.start = moment(newVal); - } + if (!newVal.isSame(oldVal, 'day')) { return _prepare(); } - }); - } - $scope.$watch('before', function(newVal, oldVal) { - if (newVal) { - if (!moment.isMoment(newVal)) { - newVal = moment(newVal); - } - if (!newVal.isSame(oldVal, 'day')) { - return _prepare(); - } - } - }); - return $scope.$watch('after', function(newVal, oldVal) { - if (newVal) { - if (!moment.isMoment(newVal)) { - newVal = moment(newVal); } - if (!newVal.isSame(oldVal, 'day')) { - return _prepare(); + }); + return $scope.$watch('after', function(newVal, oldVal) { + if (newVal) { + if (!moment.isMoment(newVal)) { + newVal = moment(newVal); + } + if (!newVal.isSame(oldVal, 'day')) { + return _prepare(); + } } - } - }); - } - }; - }); + }); + } + }; + } + ]); }).call(this); diff --git a/demo/index.html b/demo/index.html index ea09797..7a09bab 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,11 +1,11 @@ - Test + Angular Mighty Picker by Monterail - +