Merge branch 'vanilla'

Conflicts: README.md
owenmead · Aug 14, 2014 · 6a9e2ea · 6a9e2ea
2 parents 3dc4fd4 + 399d5ff
commit 6a9e2ea
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@
 - Add configurable number of shown months
 - #51 Add unit tests with ci: [testling](https://ci.testling.com/rikkert/pikaday)
 - Fix #94 blur input field after date selection
+- Add configuable container to render calendar into 
+- Add option to show week numbers, see #147
 
 ## 1.2.0 - 2014-01-28
 

diff --git a/README.md b/README.md
@@ -1,21 +1,17 @@
 Pikaday - With Time Picker
 ========
 
-### Forked from [dbushell/Pikaday][david Pika] which only supports selecting dates
+### Time support added to [dbushell/Pikaday][david Pika]
 
 This fork allows the user to specify the time along with their date. Done so by adding a couple select inputs to manipulate the date Pikaday is generating.
-
-#### Additional Method:
-
-`picker.setTime(hours, minutes, seconds)`
-
 * Used to set time aspects of date.
 * Will not change the currently selected date.
 * If no date is selected, will select today. Any of the arguments may be null, and will not affect the date.
 
+
 ## Authors
 
 * Owen Mead-Robins [http://www.owenmead.com/][owenmead]
 
 [david Pika]:   https://github.com/dbushell/Pikaday                              "Pikaday"
-[owenmead]:     http://owenmead.com/                                             "owenmead.com"
+[owenmead]:     http://owenmead.com/                                             "owenmead.com"
diff --git a/css/pikaday.css b/css/pikaday.css
@@ -101,16 +101,16 @@ http://nicolasgallagher.com/micro-clearfix-hack/
 }
 
 .pika-prev,
-.is-rtl .pika-next {
+.is-rtl .pika-next:after {
     float: left;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
+    content: "\25b6";
     *left: 0;
 }
 
 .pika-next,
-.is-rtl .pika-prev {
+.is-rtl .pika-prev:after {
     float: right;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
+    content: "\25C0";
     *right: 0;
 }
 
@@ -161,6 +161,11 @@ http://nicolasgallagher.com/micro-clearfix-hack/
     background: #f5f5f5;
 }
 
+.pika-week {
+    font-size: 11px;
+    color: #999;
+}
+
 .is-today .pika-button {
     color: #33aaff;
     font-weight: bold;

diff --git a/css/site.css b/css/site.css
@@ -24,3 +24,19 @@ input[type="text"] {
 button#datepicker-button {
     margin-bottom: 3em;
 }
+
+.flow-element {
+    display: inline-block;
+    margin-right: 3em;
+    vertical-align: top;
+}
+.flow-element:last-child {
+    margin-right: 0;
+}
+.flow-element input {
+    margin-top: 0;
+}
+
+#container {
+    min-height: 15em;
+}
diff --git a/examples/bound-container.html b/examples/bound-container.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+    <title>Pikaday - Container example</title>
+    <meta name="author" content="Stuart McFarlane">
+    <link rel="stylesheet" href="../css/pikaday.css">
+    <link rel="stylesheet" href="../css/site.css">
+</head>
+<body>
+    <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+
+    <h1>Pikaday - Container example</h1>
+
+    <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
+
+    <div>
+        <div class="flow-element">
+            <label for="datepicker">Date:</label>
+            <input type="text" id="datepicker">
+        </div>
+        <div class="flow-element">
+            <div id="container"></div>
+        </div>
+    </div>
+
+    <h2>What is this?</h2>
+
+    <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
+
+    <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
+
+
+    <!-- First load pikaday.js and then the jQuery plugin -->
+    <script src="../pikaday.js"></script>
+    <script>
+
+    var picker = new Pikaday(
+    {
+        field: document.getElementById('datepicker'),
+        firstDay: 1,
+        minDate: new Date('2000-01-01'),
+        maxDate: new Date('2020-12-31'),
+        yearRange: [2000, 2020],
+        bound: true,
+        container: document.getElementById('container'),
+    });
+
+    </script>
+</body>
+</html>
diff --git a/examples/container.html b/examples/container.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+    <title>Pikaday - Container example</title>
+    <meta name="author" content="Stuart McFarlane">
+    <link rel="stylesheet" href="../css/pikaday.css">
+    <link rel="stylesheet" href="../css/site.css">
+</head>
+<body>
+    <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+
+    <h1>Pikaday - Container example</h1>
+
+    <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
+
+    <div>
+        <div class="flow-element">
+            <label for="datepicker">Date:</label>
+            <input type="text" id="datepicker">
+        </div>
+        <div class="flow-element">
+            <div id="container"></div>
+        </div>
+    </div>
+
+    <h2>What is this?</h2>
+
+    <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
+
+    <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
+
+
+    <!-- First load pikaday.js and then the jQuery plugin -->
+    <script src="../pikaday.js"></script>
+    <script>
+
+    var picker = new Pikaday(
+    {
+        field: document.getElementById('datepicker'),
+        firstDay: 1,
+        minDate: new Date('2000-01-01'),
+        maxDate: new Date('2020-12-31'),
+        yearRange: [2000, 2020],
+        bound: false,
+        container: document.getElementById('container'),
+    });
+
+    </script>
+</body>
+</html>
diff --git a/examples/weeknumbers.html b/examples/weeknumbers.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+    <title>Pikaday - weeknumbers example</title>
+    <meta name="author" content="Maxime Thirouin">
+    <link rel="stylesheet" href="../css/pikaday.css">
+    <link rel="stylesheet" href="../css/site.css">
+</head>
+<body>
+    <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+
+    <h1>Pikaday - showing weeknumbers</h1>
+
+    <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
+
+    <label for="datepicker">Date:</label>
+    <input type="text" id="datepicker-week-numbers">
+
+    <h2>What is this?</h2>
+
+    <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
+
+    <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
+
+    <script src="../pikaday.js"></script>
+    <script>
+
+    var pickerWeekNums = new Pikaday({
+        showWeekNumber: true,
+        field: document.getElementById('datepicker-week-numbers'),
+        firstDay: 1,
+        minDate: new Date('2000-01-01'),
+        maxDate: new Date('2020-12-31'),
+        yearRange: [2000, 2020]
+    });
+
+    </script>
+</body>
+</html>
diff --git a/pikaday.js b/pikaday.js
@@ -206,6 +206,9 @@
         // number of years either side, or array of upper/lower range
         yearRange: 10,
 
+        // show week numbers at head of row
+        showWeekNumber: false,
+
         // used internally (don't config outside)
         minYear: 0,
         maxYear: 9999,
@@ -232,6 +235,9 @@
         // only used for the first display or when a selected date is not visible
         mainCalendar: 'left',
 
+        // Specify a DOM element to render the calendar in
+        container: undefined,
+
         // internationalization
         i18n: {
             previousMonth : 'Previous Month',
@@ -284,6 +290,13 @@
                '</td>';
     },
 
+    renderWeek = function (d, m, y) {
+        // Lifted from http://javascript.about.com/library/blweekyear.htm, lightly modified.
+        var onejan = new Date(y, 0, 1),
+            weekNum = Math.ceil((((new Date(y, m, d) - onejan) / 86400000) + onejan.getDay()+1)/7);
+        return '<td class="pika-week">' + weekNum + '</td>';
+    },
+
     renderRow = function(days, isRTL)
     {
         return '<tr>' + (isRTL ? days.reverse() : days).join('') + '</tr>';
@@ -297,6 +310,9 @@
     renderHead = function(opts)
     {
         var i, arr = [];
+        if (opts.showWeekNumber) {
+            arr.push('<th></th>');
+        }
         for (i = 0; i < 7; i++) {
             arr.push('<th scope="col"><abbr title="' + renderDayName(opts, i) + '">' + renderDayName(opts, i, true) + '</abbr></th>');
         }
@@ -562,7 +578,9 @@
         addEvent(self.el, 'change', self._onChange);
 
         if (opts.field) {
-            if (opts.bound) {
+            if (opts.container) {
+                opts.container.appendChild(self.el);
+            } else if (opts.bound) {
                 document.body.appendChild(self.el);
             } else {
                 opts.field.parentNode.insertBefore(self.el, opts.field.nextSibling);
@@ -938,6 +956,7 @@
 
         adjustPosition: function()
         {
+            if (this._o.container) return;
             var field = this._o.trigger, pEl = field,
             width = this.el.offsetWidth, height = this.el.offsetHeight,
             viewportWidth = window.innerWidth || document.documentElement.clientWidth,
@@ -1017,6 +1036,9 @@
                 row.push(renderDay(1 + (i - before), month, year, isSelected, isToday, isDisabled, isEmpty));
 
                 if (++r === 7) {
+                    if (opts.showWeekNumber) {
+                        row.unshift(renderWeek(i - before, month, year));
+                    }
                     data.push(renderRow(row, opts.isRTL));
                     row = [];
                     r = 0;