added live demos for #2; changed calendar to always show 42 days to i…

…mprove positioning capability; bugfixes for positioning and layout; bumped version
ericsvendsen · May 3, 2017 · 16fd766 · 16fd766
1 parent a6b741b
commit 16fd766
Show file tree

Hide file tree

Showing 5 changed files with 268 additions and 21 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-utc-datepicker",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A simple Angular 1.x datepicker directive that exclusively uses UTC",
   "main": [
     "src/js/ngUtcDatepicker.js",

diff --git a/index.html b/index.html
@@ -2,17 +2,247 @@
 <html>
 <head>
     <title>Angular UTC Datepicker</title>
-    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
     <link rel="stylesheet" href="src/css/ngUtcDatepicker.css"/>
+    <style type="text/css">
+        body {
+            background-color: #fff;
+            padding: 50px;
+            font: 14px/1.5 "Roboto", sans-serif;
+            color: #727272;
+            font-weight: 400;
+        }
+
+        h1, h2, h3, h4, h5, h6 {
+            color: #222;
+            margin: 0 0 20px;
+        }
+
+        p, ul, ol, table, pre, dl {
+            margin: 0 0 20px;
+        }
+
+        h1, h2, h3 {
+            line-height: 1.1;
+        }
+
+        h1 {
+            font-size: 28px;
+        }
+
+        h2 {
+            color: #393939;
+        }
+
+        h3, h4, h5, h6 {
+            color: #494949;
+        }
+
+        a {
+            color: #267CB9;
+            text-decoration: none;
+        }
+
+        a:hover, a:focus {
+            color: #069;
+            font-weight: bold;
+        }
+
+        a small {
+            font-size: 11px;
+            color: #777;
+            margin-top: -0.3em;
+            display: block;
+        }
+
+        a:hover small {
+            color: #777;
+        }
+
+        .wrapper {
+            width: 860px;
+            margin: 0 auto;
+        }
+
+        code, pre {
+            font-family: Courier New, monospace;
+            color: #333;
+            font-size: 12px;
+        }
+
+        pre {
+            padding: 8px 15px;
+            margin: 20px 0;
+            background: #f8f8f8;
+            border-radius: 5px;
+            border: 1px solid #e5e5e5;
+            overflow-x: auto;
+        }
+
+        input {
+            height: 14px;
+            padding: 6px 12px;
+            line-height: 1.42857143;
+            font-size: 12px;
+            color: #555;
+            background-color: #fff;
+            background-image: none;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+
+        button {
+            display: inline-block;
+            padding: 2px 4px;
+            margin-bottom: 0;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 1.42857143;
+            text-align: center;
+            white-space: nowrap;
+            vertical-align: middle;
+            cursor: pointer;
+            background-image: none;
+            border: 1px solid transparent;
+            border-radius: 4px;
+            background: #ddd;
+        }
+
+        header {
+            width: 270px;
+            float: left;
+            position: fixed;
+            -webkit-font-smoothing: subpixel-antialiased;
+        }
+
+        header ul {
+            list-style: none;
+            padding: 0;
+            width: 270px;
+        }
+
+        section {
+            width: 500px;
+            float: right;
+            padding-bottom: 50px;
+        }
+
+        hr {
+            border: 0;
+            background: #e5e5e5;
+            height: 1px;
+            margin: 0 0 20px;
+        }
+
+        @media print, screen and (max-width: 960px) {
+            div.wrapper {
+                width: auto;
+                margin: 0;
+            }
+
+            header, section {
+                float: none;
+                position: static;
+                width: auto;
+            }
+
+            header {
+                padding-right: 320px;
+            }
+
+            section {
+                border: 1px solid #e5e5e5;
+                border-width: 1px 0;
+                padding: 20px 0;
+                margin: 0 0 20px;
+            }
+
+            header a small {
+                display: inline;
+            }
+
+            header ul {
+                position: absolute;
+                right: 50px;
+                top: 52px;
+            }
+        }
+        @media print, screen and (max-width: 720px) {
+            body {
+                word-wrap: break-word;
+            }
+
+            header {
+                padding: 0;
+            }
+
+            header ul, header p.view {
+                position: static;
+            }
+
+            pre, code {
+                word-wrap: normal;
+            }
+        }
+        @media print, screen and (max-width: 480px) {
+            body {
+                padding: 15px;
+            }
+
+            header ul {
+                width: 99%;
+            }
+
+            header li, header ul li + li + li {
+                width: 33%;
+            }
+        }
+        @media print {
+            body {
+                padding: 0.4in;
+                font-size: 12pt;
+                color: #444;
+            }
+        }
+    </style>
 </head>
 <body ng-app="app" ng-strict-di>
-<div ng-controller="ctrl as vm">
-    <span id="icon" class="fa fa-calendar"></span>
-    <input ng-utc-datepicker data-trigger="icon" ng-model="vm.date"/>
+<div class="wrapper" ng-controller="ctrl as vm">
+    <header>
+        <h1>Angular UTC Datepicker</h1>
+        <ul>
+            <li>Works with Angular 1.x</li>
+            <li>Doesn't require jQuery UI, Bootstrap, etc.</li>
+            <li>Only does UTC</li>
+        </ul>
+        <p>The calendar will display above the input if it's close to the bottom of the page, and can be closed by clicking elsewhere or pressing the ESC key.</p>
+    </header>
+    <section>
+        <h2>Demos</h2>
+        <h3>Basic datepicker</h3>
+        <input ng-utc-datepicker ng-model="vm.date"/>
+        <pre><code>&lt;input ng-utc-datepicker ng-model="vm.date"/&gt;</code></pre>
+        <hr/>
+        <h3>Datepicker with trigger element</h3>
+        <span id="icon" class="fa fa-calendar"></span>
+        <input ng-utc-datepicker data-trigger="icon" ng-model="vm.date"/>
+        <pre><code>&lt;button id="icon"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/button&gt;<br />&lt;input ng-utc-datepicker
+        data-trigger="btn-icon"
+        ng-model="vm.date"/&gt;</code></pre>
+        <hr/>
+        <h3>Datepicker with trigger element and custom format</h3>
+        <input ng-utc-datepicker data-trigger="btn-text" data-format="MM/DD/YYYY HH:mm:ss" ng-model="vm.date"/>
+        <button id="btn-text">Show Calendar</button>
+        <pre><code>&lt;input ng-utc-datepicker
+        data-trigger="btn-text"
+        data-format="MM/DD/YYYY HH:mm:ss"
+        ng-model="vm.date"/&gt;<br />&lt;button id="btn-text"&gt;Show Calendar&lt;/button&gt;</code></pre>
+    </section>
 </div>
 
-<script type="text/javascript" src="node_modules/moment/moment.js"></script>
-<script type="text/javascript" src="node_modules/angular/angular.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script type="text/javascript" src="src/js/ngUtcDatepicker.js"></script>
 <script type="text/javascript">
     (function (angular) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-utc-datepicker",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A simple Angular 1.x datepicker directive that exclusively uses UTC",
   "main": "",
   "scripts": {

diff --git a/src/css/ngUtcDatepicker.css b/src/css/ngUtcDatepicker.css
@@ -1,22 +1,22 @@
 .ng-utc_datepicker {
-    position: relative;
+    position: absolute;
+    top: auto;
+    left: auto;
+    z-index: 1000;
 }
 .ng-utc_datepicker .ng-utc_calendar-icon {
     cursor: pointer;
 }
 .ng-utc_datepicker .ng-utc_calendar-popup {
-    position: absolute;
-    left: 0;
-    z-index: 1000;
     width: 245px;
     opacity: 0.9;
     border-left: 1px solid #888;
 }
 .ng-utc_datepicker .ng-utc_calendar-popup.ng-utc_above {
-    top: -228px;
+    margin-top: -293px;
 }
 .ng-utc_datepicker .ng-utc_calendar-popup.ng-utc_below {
-    top: 8px;
+    margin-top: 5px;
 }
 .ng-utc_datepicker .ng-utc_calendar-popup .ng-utc_calendar-controls {
     box-sizing: border-box;
@@ -79,3 +79,6 @@
     background: #ddd;
     color: #555;
 }
+.ng-utc_clear {
+    clear: both;
+}
diff --git a/src/js/ngUtcDatepicker.js b/src/js/ngUtcDatepicker.js
@@ -52,7 +52,7 @@
                 '</div>' +
                 '<div class="ng-utc_calendar">' +
                 '<div class="ng-utc_day {{ day.selected }} {{ day.enabled }}" ng-repeat="day in ctrl.days" ng-click="ctrl.selectDate(day)">{{ day.day }}</div>' +
-                '</div>' +
+                '<div class="ng-utc_clear"></div></div>' +
                 '</div>' +
                 '</div></script>'
             };
@@ -80,16 +80,30 @@
             var generateCalendar = function (date) {
                 ctrl.days = [];
 
-                var momentDate = typeof date === 'string' ? moment.utc(date, ctrl.format) : moment.utc(date),
+                var isISOString = moment.utc(date, 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]').toISOString() === date,
+                    momentDate = isISOString ? moment.utc(date) : moment.utc(date, ctrl.format),
                     lastMonth = moment.utc(momentDate).subtract(1, 'M'),
+                    nextMonth = moment.utc(momentDate).add(1, 'M'),
                     month = moment.utc(momentDate).month() + 1,
                     year = moment.utc(momentDate).year(),
-                    firstWeekDay = 1 - moment.utc(momentDate).startOf('M').isoWeekday();
-
-                for (var i = firstWeekDay; i <= moment.utc(momentDate).endOf('M').date(); i++) {
-                    if (i > 0) {
-                        ctrl.days.push({ day: i, month: month, year: year, enabled: 'ng-utc_enabled', selected: moment.utc($scope.date, ctrl.format).isSame(moment.utc(year + '-' + month + '-' + i, 'YYYY-M-D'), 'day') ? 'ng-utc_selected' : 'ng-utc_unselected' });
+                    firstWeekDay = 1 - moment.utc(momentDate).startOf('M').isoWeekday(),
+                    totalDays = (42 + firstWeekDay) - 1; // 7 columns X 6 rows
+
+                for (var i = firstWeekDay; i <= totalDays; i++) {
+                    if (i > 0 && i <= moment.utc(momentDate).endOf('M').date()) {
+                        // current month
+                        ctrl.days.push({
+                            day: i,
+                            month: month,
+                            year: year,
+                            enabled: 'ng-utc_enabled',
+                            selected: moment.utc($scope.date, ctrl.format).isSame(moment.utc(year + '-' + month + '-' + i, 'YYYY-M-D'), 'day') ? 'ng-utc_selected' : 'ng-utc_unselected'
+                        });
+                    } else if (i > moment.utc(momentDate).endOf('M').date()) {
+                        // next month
+                        ctrl.days.push({ day: i - momentDate.endOf('M').date(), month: nextMonth.month() + 1, year: nextMonth.year(), enabled: 'ng-utc_disabled', selected: 'ng-utc_unselected' });
                     } else {
+                        // last month
                         ctrl.days.push({ day: lastMonth.endOf('M').date() - (0 - i), month: lastMonth.month() + 1, year: lastMonth.year(), enabled: 'ng-utc_disabled', selected: 'ng-utc_unselected' });
                     }
                 }