diff --git a/Gruntfile.js b/Gruntfile.js index 72d0c35..66de93f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -7,22 +7,22 @@ module.exports = function(grunt) { compile: { files: { "spec/build/specs.js": ["spec/*.coffee"], - "build/ng-quick-date.js": ["src/*.coffee"] + "dist/ng-quick-date.js": ["src/*.coffee"] } } }, uglify: { my_target: { files: { - "build/ng-quick-date.min.js": "build/ng-quick-date.js" + "dist/ng-quick-date.min.js": "dist/ng-quick-date.js" } } }, stylus: { compile: { files: { - "build/ng-quick-date.css": ["src/ng-quick-date.styl"], - "build/ng-quick-date-default-theme.css": ["src/ng-quick-date-default-theme.styl"] + "dist/ng-quick-date.css": ["src/ng-quick-date.styl"], + "dist/ng-quick-date-default-theme.css": ["src/ng-quick-date-default-theme.styl"] } } }, diff --git a/README.md b/README.md index 4ef86a9..daae964 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,23 @@ ngQuickDate is an [Angular.js](http://angularjs.org/) Date/Time picker directive ## Download -* [Version 1.0.0-alpha.1](https://github.com/adamalbrecht/ngQuickDate/releases/download/v1.0.0-alpha.1/ng-quick-date.zip) - Compatible with Angular 1.0.x +* [Version 1.0.0-alpha.2](https://github.com/adamalbrecht/ngQuickDate/releases/download/v1.0.0-alpha.2/ng-quick-date.zip) - Compatible with Angular 1.0.x * Version 1.2 - Coming soon. Compatible with Angular 1.2.x +You can also install the package using [Bower](http://bower.io). + +```sh +bower install ngQuickDate +``` + +Or add it to your bower.json file: + +```javascript +dependencies: { + "ngQuickDate": "~1.0.0" +} +``` + *No dependencies (besides Angular) are required, but its date parsing capabilities can be improved by 3rd party libraries. See [Smarter Date/Time Parsing](#smarter-datetime-parsing) for more info. And it's styling can be improved by using a font icon library like [Font Awesome](http://fontawesome.io/). See the [Styling](#styling) and [Configuration](#configuration-options) sections.* ## Demo diff --git a/bower.json b/bower.json index a20bbbe..de2436a 100644 --- a/bower.json +++ b/bower.json @@ -1,11 +1,17 @@ { "name": "ngQuickDate", - "version": "1.0.0-alpha", - "main": "build/src/ng-quick-date.js", + "version": "1.0.0-alpha.2", + "main": ["dist/ng-quick-date.js", "dist/ng-quick-date.css", "dist/ng-quick-date-default-theme.css"], "ignore": [ - ".jshintrc", - "**/*.txt", - "demo" + "bower_components", + "node_modules", + "spec", + "src", + "vendor", + "Gruntfile.js", + "karma.conf.coffee", + "package.json", + "screenshot.png" ], "dependencies": {}, "devDependencies": { diff --git a/dist/ng-quick-date-default-theme.css b/dist/ng-quick-date-default-theme.css new file mode 100644 index 0000000..ae45b51 --- /dev/null +++ b/dist/ng-quick-date-default-theme.css @@ -0,0 +1,20 @@ +.quickdate{display:inline-block;vertical-align:bottom;font-size:15px;font-family:'Helvetica Neue',Helvetica,Ariel,sans-serif;} +.quickdate input,.quickdate select{font-size:13px} +.quickdate-button{background:#fff;color:#333;border:solid 1px #ccc;box-shadow:outset 0 1px 1px rgba(0,0,0,0.075);border-radius:4px;padding:4px 8px;display:inline-block;text-decoration:none;} +.quickdate-button:hover{text-decoration:underline;} +.quickdate-button:hover i{text-decoration:none} +.quickdate-button i{padding-right:4px} +.quickdate-popup{color:#333;font-size:15px;background-color:#fafafa;border:solid 1px #ddd;border-radius:3px;-webkit-box-shadow:0 10px 30px rgba(25,25,25,0.92);-moz-box-shadow:0 10px 30px rgba(25,25,25,0.92);box-shadow:0 10px 30px rgba(25,25,25,0.92)} +.quickdate-action-link:visited,.quickdate-action-link:hover{color:#333} +.quickdate-next-month i{padding-left:10px} +.quickdate-prev-month i{padding-right:10px} +table.quickdate-calendar{border:solid 1px #ccc;background-color:#fff;} +table.quickdate-calendar th,table.quickdate-calendar td{border-right:1px solid #ccc;border-bottom:1px solid #ccc} +table.quickdate-calendar td:hover{background-color:#e6e6e6} +table.quickdate-calendar td.other-month{background-color:#dcdcdc;color:#707070;} +table.quickdate-calendar td.other-month:hover{background-color:#c8c8c8} +table.quickdate-calendar td.selected{background-color:#b0ccde;font-weight:bold} +table.quickdate-calendar td.is-today{color:#b58922;font-weight:bold} +.quickdate-popup-footer{margin:3px 1px 0} +.quickdate-clear{display:inline-block;padding:2px 4px;background-color:#fff;color:#333;border:solid 1px #ccc;box-shadow:outset 0 1px 1px rgba(0,0,0,0.075);border-radius:4px;text-decoration:none;} +.quickdate-clear:hover{background-color:#f2f2f2} diff --git a/dist/ng-quick-date.css b/dist/ng-quick-date.css new file mode 100644 index 0000000..dff98f8 --- /dev/null +++ b/dist/ng-quick-date.css @@ -0,0 +1,19 @@ +.quickdate{display:inline-block;position:relative} +.quickdate-button div,.quickdate-action-link div{display:inline} +.quickdate-popup{z-index:10;background-color:#fff;border:solid 1px #000;text-align:center;width:250px;display:none;position:absolute;padding:5px;} +.quickdate-popup.open{display:block} +.quickdate-close{position:absolute;top:5px;right:5px;color:#333;} +.quickdate-close:hover,.quickdate-close:visited{color:#333} +.quickdate-calendar-header{display:block;padding:2px 0;margin-bottom:5px;text-align:center} +.quickdate-month{display:inline-block} +a.quickdate-prev-month{float:left} +a.quickdate-next-month{float:right} +.quickdate-text-inputs{text-align:left;margin-bottom:5px} +.quickdate-input-wrapper{width:48%;display:inline-block} +input.quickdate-date-input,input.quickdate-time-input{width:100px;margin:0;height:auto;padding:2px 3px} +table.quickdate-calendar{border-collapse:collapse;border-spacing:0;width:100%;margin-top:5px;} +table.quickdate-calendar th,table.quickdate-calendar td{padding:5px} +table.quickdate-calendar td:hover{cursor:pointer} +.quickdate-popup-footer{text-align:right;display:block} +.quickdate-error{border:1px solid #dd3b30 !important} +.quickdate-error:focus{outline-color:#dd3b30 !important} diff --git a/dist/ng-quick-date.js b/dist/ng-quick-date.js new file mode 100644 index 0000000..8bf9905 --- /dev/null +++ b/dist/ng-quick-date.js @@ -0,0 +1,324 @@ +(function() { + var app; + + app = angular.module("ngQuickDate", []); + + app.provider("ngQuickDateDefaults", function() { + this.options = { + dateFormat: 'M/d/yyyy', + timeFormat: 'h:mm a', + labelFormat: null, + placeholder: 'Click to Set Date', + hoverText: null, + buttonIconHtml: null, + closeButtonHtml: 'X', + nextLinkHtml: 'Next', + prevLinkHtml: 'Prev', + disableTimepicker: false, + disableClearButton: false, + dayAbbreviations: ["Su", "M", "Tu", "W", "Th", "F", "Sa"], + parseDateFunction: function(str) { + var seconds; + seconds = Date.parse(str); + if (isNaN(seconds)) { + return null; + } else { + return new Date(seconds); + } + } + }; + this.$get = function() { + return this.options; + }; + return this.set = function(keyOrHash, value) { + var k, v, _results; + if (typeof keyOrHash === 'object') { + _results = []; + for (k in keyOrHash) { + v = keyOrHash[k]; + _results.push(this.options[k] = v); + } + return _results; + } else { + return this.options[keyOrHash] = value; + } + }; + }); + + app.directive("datepicker", [ + 'ngQuickDateDefaults', '$filter', function(ngQuickDateDefaults, $filter) { + return { + restrict: "E", + require: "ngModel", + scope: { + ngModel: "=", + onChange: "&" + }, + replace: true, + link: function(scope, element, attrs, ngModel) { + var dateToString, datepickerClicked, datesAreEqual, debug, getDaysInMonth, initialize, parseDateString, setCalendarDateFromModel, setCalendarRows, setConfigOptions, setInputDateFromModel; + debug = attrs.debug && attrs.debug.length; + initialize = function() { + scope.toggleCalendar(false); + scope.weeks = []; + scope.inputDate = null; + if (typeof scope.ngModel === 'string') { + scope.ngModel = parseDateString(scope.ngModel); + } + setConfigOptions(); + setInputDateFromModel(); + return setCalendarDateFromModel(); + }; + setConfigOptions = function() { + var key, value; + for (key in ngQuickDateDefaults) { + value = ngQuickDateDefaults[key]; + if (!key.match(/html/) && attrs[key] && attrs[key].length) { + scope[key] = attrs[key]; + } else { + scope[key] = ngQuickDateDefaults[key]; + } + } + if (!scope.labelFormat) { + scope.labelFormat = scope.dateFormat; + if (!scope.disableTimepicker) { + scope.labelFormat += " " + scope.timeFormat; + } + } + if (attrs.iconClass && attrs.iconClass.length) { + return scope.buttonIconHtml = ""; + } + }; + datepickerClicked = false; + window.document.addEventListener('click', function(event) { + if (!datepickerClicked) { + scope.toggleCalendar(false); + scope.$apply(); + } + return datepickerClicked = false; + }); + angular.element(element[0])[0].addEventListener('click', function(event) { + return datepickerClicked = true; + }); + setInputDateFromModel = function() { + if (scope.ngModel) { + scope.inputDate = $filter('date')(scope.ngModel, ngQuickDateDefaults.dateFormat); + return scope.inputTime = $filter('date')(scope.ngModel, ngQuickDateDefaults.timeFormat); + } else { + scope.inputDate = null; + return scope.inputTime = null; + } + }; + setCalendarDateFromModel = function() { + var d; + d = scope.ngModel ? new Date(scope.ngModel) : new Date(); + if (d.toString() === "Invalid Date") { + d = new Date(); + } + d.setDate(1); + return scope.calendarDate = new Date(d); + }; + setCalendarRows = function() { + var curDate, d, day, daysInMonth, numRows, offset, row, selected, today, weeks, _i, _j, _ref; + offset = scope.calendarDate.getDay(); + daysInMonth = getDaysInMonth(scope.calendarDate.getFullYear(), scope.calendarDate.getMonth()); + numRows = Math.ceil((offset + daysInMonth) / 7); + weeks = []; + curDate = new Date(scope.calendarDate); + curDate.setDate(curDate.getDate() + (offset * -1)); + for (row = _i = 0, _ref = numRows - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; row = 0 <= _ref ? ++_i : --_i) { + weeks.push([]); + for (day = _j = 0; _j <= 6; day = ++_j) { + d = new Date(curDate); + selected = scope.ngModel && d && datesAreEqual(d, scope.ngModel); + today = datesAreEqual(d, new Date()); + weeks[row].push({ + date: d, + selected: selected, + other: d.getMonth() !== scope.calendarDate.getMonth(), + today: today + }); + curDate.setDate(curDate.getDate() + 1); + } + } + return scope.weeks = weeks; + }; + dateToString = function(date, format) { + return $filter('date')(date, format); + }; + parseDateString = ngQuickDateDefaults.parseDateFunction; + datesAreEqual = function(d1, d2, compareTimes) { + if (compareTimes == null) { + compareTimes = false; + } + if (compareTimes) { + return (d1 - d2) === 0; + } else { + return d1 && d2 && (d1.getYear() === d2.getYear()) && (d1.getMonth() === d2.getMonth()) && (d1.getDate() === d2.getDate()); + } + }; + getDaysInMonth = function(year, month) { + return [31, ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]; + }; + scope.$watch('ngModel', function(newVal, oldVal) { + if (newVal !== oldVal) { + setInputDateFromModel(); + return setCalendarDateFromModel(); + } + }); + scope.$watch('calendarDate', function(newVal, oldVal) { + if (newVal !== oldVal) { + return setCalendarRows(); + } + }); + scope.$watch('calendarShown', function(newVal, oldVal) { + var dateInput; + dateInput = angular.element(element[0].querySelector(".quickdate-date-input"))[0]; + return dateInput.select(); + }); + scope.mainButtonStr = function() { + if (scope.ngModel) { + return $filter('date')(scope.ngModel, scope.labelFormat); + } else { + return scope.placeholder; + } + }; + scope.toggleCalendar = function(show) { + if (isFinite(show)) { + return scope.calendarShown = show; + } else { + return scope.calendarShown = !scope.calendarShown; + } + }; + scope.setDate = function(date, closeCalendar) { + var changed; + if (closeCalendar == null) { + closeCalendar = true; + } + changed = (!scope.ngModel && date) || (scope.ngModel && !date) || (date.getTime() !== scope.ngModel.getTime()); + scope.ngModel = date; + scope.toggleCalendar(false); + if (changed && scope.onChange) { + return scope.onChange(); + } + }; + scope.setDateFromInput = function(closeCalendar) { + var err, tmpDate, tmpDateAndTime, tmpTime; + if (closeCalendar == null) { + closeCalendar = false; + } + try { + tmpDate = parseDateString(scope.inputDate); + if (!tmpDate) { + throw 'Invalid Date'; + } + if (!scope.disableTimepicker && scope.inputTime && scope.inputTime.length && tmpDate) { + tmpTime = scope.disableTimepicker ? '00:00:00' : scope.inputTime; + tmpDateAndTime = parseDateString("" + scope.inputDate + " " + tmpTime); + if (!tmpDateAndTime) { + throw 'Invalid Time'; + } + scope.setDate(tmpDateAndTime, false); + } else { + scope.setDate(tmpDate, false); + } + if (closeCalendar) { + scope.toggleCalendar(false); + } + scope.inputDateErr = false; + return scope.inputTimeErr = false; + } catch (_error) { + err = _error; + if (err === 'Invalid Date') { + return scope.inputDateErr = true; + } else if (err === 'Invalid Time') { + return scope.inputTimeErr = true; + } + } + }; + scope.onDateInputTab = function(param) { + if (scope.disableTimepicker) { + scope.toggleCalendar(false); + } + return true; + }; + scope.onTimeInputTab = function(param) { + scope.toggleCalendar(false); + return true; + }; + scope.nextMonth = function() { + return scope.calendarDate = new Date(new Date(scope.calendarDate).setMonth(scope.calendarDate.getMonth() + 1)); + }; + scope.prevMonth = function() { + return scope.calendarDate = new Date(new Date(scope.calendarDate).setMonth(scope.calendarDate.getMonth() - 1)); + }; + scope.clear = function() { + scope.ngModel = null; + return scope.toggleCalendar(false); + }; + initialize(); + setCalendarRows(); + if (debug) { + return console.log("quick date scope:", scope); + } + }, + template: "
\n
{{mainButtonStr()}}\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n {{calendarDate | date:'MMMM yyyy'}}\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
{{day}}
{{day.date | date:'d'}}
\n
\n Clear\n
\n
\n
" + }; + } + ]); + + app.directive('ngEnter', function() { + return function(scope, element, attr) { + return element.bind('keydown keypress', function(e) { + if (e.which === 13) { + scope.$apply(attr.ngEnter); + return e.preventDefault(); + } + }); + }; + }); + + app.directive('ngTab', function() { + return function(scope, element, attr) { + return element.bind('keydown keypress', function(e) { + if (e.which === 9) { + return scope.$apply(attr.ngTab); + } + }); + }; + }); + + if (parseInt(angular.version.full) < 1.2) { + app.directive("ngBlur", [ + "$parse", function($parse) { + return function(scope, element, attr) { + var fn; + fn = $parse(attr["ngBlur"]); + return element.bind("blur", function(event) { + return scope.$apply(function() { + return fn(scope, { + $event: event + }); + }); + }); + }; + } + ]); + app.directive("ngFocus", [ + "$parse", function($parse) { + return function(scope, element, attr) { + var fn; + fn = $parse(attr["ngFocus"]); + return element.bind("focus", function(event) { + return scope.$apply(function() { + return fn(scope, { + $event: event + }); + }); + }); + }; + } + ]); + } + +}).call(this); diff --git a/dist/ng-quick-date.min.js b/dist/ng-quick-date.min.js new file mode 100644 index 0000000..5e922e8 --- /dev/null +++ b/dist/ng-quick-date.min.js @@ -0,0 +1 @@ +(function(){var a;a=angular.module("ngQuickDate",[]),a.provider("ngQuickDateDefaults",function(){return this.options={dateFormat:"M/d/yyyy",timeFormat:"h:mm a",labelFormat:null,placeholder:"Click to Set Date",hoverText:null,buttonIconHtml:null,closeButtonHtml:"X",nextLinkHtml:"Next",prevLinkHtml:"Prev",disableTimepicker:!1,disableClearButton:!1,dayAbbreviations:["Su","M","Tu","W","Th","F","Sa"],parseDateFunction:function(a){var b;return b=Date.parse(a),isNaN(b)?null:new Date(b)}},this.$get=function(){return this.options},this.set=function(a,b){var c,d,e;if("object"==typeof a){e=[];for(c in a)d=a[c],e.push(this.options[c]=d);return e}return this.options[a]=b}}),a.directive("datepicker",["ngQuickDateDefaults","$filter",function(a,b){return{restrict:"E",require:"ngModel",scope:{ngModel:"=",onChange:"&"},replace:!0,link:function(c,d,e){var f,g,h,i,j,k,l,m,n,o,p;return i=e.debug&&e.debug.length,k=function(){return c.toggleCalendar(!1),c.weeks=[],c.inputDate=null,"string"==typeof c.ngModel&&(c.ngModel=l(c.ngModel)),o(),p(),m()},o=function(){var b,d;for(b in a)d=a[b],c[b]=!b.match(/html/)&&e[b]&&e[b].length?e[b]:a[b];return c.labelFormat||(c.labelFormat=c.dateFormat,c.disableTimepicker||(c.labelFormat+=" "+c.timeFormat)),e.iconClass&&e.iconClass.length?c.buttonIconHtml="":void 0},g=!1,window.document.addEventListener("click",function(){return g||(c.toggleCalendar(!1),c.$apply()),g=!1}),angular.element(d[0])[0].addEventListener("click",function(){return g=!0}),p=function(){return c.ngModel?(c.inputDate=b("date")(c.ngModel,a.dateFormat),c.inputTime=b("date")(c.ngModel,a.timeFormat)):(c.inputDate=null,c.inputTime=null)},m=function(){var a;return a=c.ngModel?new Date(c.ngModel):new Date,"Invalid Date"===a.toString()&&(a=new Date),a.setDate(1),c.calendarDate=new Date(a)},n=function(){var a,b,d,e,f,g,i,k,l,m,n,o,p;for(g=c.calendarDate.getDay(),e=j(c.calendarDate.getFullYear(),c.calendarDate.getMonth()),f=Math.ceil((g+e)/7),m=[],a=new Date(c.calendarDate),a.setDate(a.getDate()+-1*g),i=n=0,p=f-1;p>=0?p>=n:n>=p;i=p>=0?++n:--n)for(m.push([]),d=o=0;6>=o;d=++o)b=new Date(a),k=c.ngModel&&b&&h(b,c.ngModel),l=h(b,new Date),m[i].push({date:b,selected:k,other:b.getMonth()!==c.calendarDate.getMonth(),today:l}),a.setDate(a.getDate()+1);return c.weeks=m},f=function(a,c){return b("date")(a,c)},l=a.parseDateFunction,h=function(a,b,c){return null==c&&(c=!1),c?a-b===0:a&&b&&a.getYear()===b.getYear()&&a.getMonth()===b.getMonth()&&a.getDate()===b.getDate()},j=function(a,b){return[31,a%4===0&&a%100!==0||a%400===0?29:28,31,30,31,30,31,31,30,31,30,31][b]},c.$watch("ngModel",function(a,b){return a!==b?(p(),m()):void 0}),c.$watch("calendarDate",function(a,b){return a!==b?n():void 0}),c.$watch("calendarShown",function(){var a;return a=angular.element(d[0].querySelector(".quickdate-date-input"))[0],a.select()}),c.mainButtonStr=function(){return c.ngModel?b("date")(c.ngModel,c.labelFormat):c.placeholder},c.toggleCalendar=function(a){return c.calendarShown=isFinite(a)?a:!c.calendarShown},c.setDate=function(a,b){var d;return null==b&&(b=!0),d=!c.ngModel&&a||c.ngModel&&!a||a.getTime()!==c.ngModel.getTime(),c.ngModel=a,c.toggleCalendar(!1),d&&c.onChange?c.onChange():void 0},c.setDateFromInput=function(a){var b,d,e,f;null==a&&(a=!1);try{if(d=l(c.inputDate),!d)throw"Invalid Date";if(!c.disableTimepicker&&c.inputTime&&c.inputTime.length&&d){if(f=c.disableTimepicker?"00:00:00":c.inputTime,e=l(""+c.inputDate+" "+f),!e)throw"Invalid Time";c.setDate(e,!1)}else c.setDate(d,!1);return a&&c.toggleCalendar(!1),c.inputDateErr=!1,c.inputTimeErr=!1}catch(g){if(b=g,"Invalid Date"===b)return c.inputDateErr=!0;if("Invalid Time"===b)return c.inputTimeErr=!0}},c.onDateInputTab=function(){return c.disableTimepicker&&c.toggleCalendar(!1),!0},c.onTimeInputTab=function(){return c.toggleCalendar(!1),!0},c.nextMonth=function(){return c.calendarDate=new Date(new Date(c.calendarDate).setMonth(c.calendarDate.getMonth()+1))},c.prevMonth=function(){return c.calendarDate=new Date(new Date(c.calendarDate).setMonth(c.calendarDate.getMonth()-1))},c.clear=function(){return c.ngModel=null,c.toggleCalendar(!1)},k(),n(),i?console.log("quick date scope:",c):void 0},template:"
\n
{{mainButtonStr()}}\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n {{calendarDate | date:'MMMM yyyy'}}\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
{{day}}
{{day.date | date:'d'}}
\n
\n Clear\n
\n
\n
"}}]),a.directive("ngEnter",function(){return function(a,b,c){return b.bind("keydown keypress",function(b){return 13===b.which?(a.$apply(c.ngEnter),b.preventDefault()):void 0})}}),a.directive("ngTab",function(){return function(a,b,c){return b.bind("keydown keypress",function(b){return 9===b.which?a.$apply(c.ngTab):void 0})}}),parseInt(angular.version.full)<1.2&&(a.directive("ngBlur",["$parse",function(a){return function(b,c,d){var e;return e=a(d.ngBlur),c.bind("blur",function(a){return b.$apply(function(){return e(b,{$event:a})})})}}]),a.directive("ngFocus",["$parse",function(a){return function(b,c,d){var e;return e=a(d.ngFocus),c.bind("focus",function(a){return b.$apply(function(){return e(b,{$event:a})})})}}]))}).call(this); \ No newline at end of file