Merge branch 'vanilla'

Conflicts: CHANGELOG.md README.md bower.json component.json package.json pikaday.js
owenmead · Feb 25, 2015 · da9b7a4 · da9b7a4
2 parents f1496e4 + fda071d
commit da9b7a4
Show file tree

Hide file tree

Showing 9 changed files with 364 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,28 @@
 # Changelog
 
+## 1.4.0 - TBA
+
+- Add theme class support, see #260
+- Fix on iOS, see #101
+- Fix #249
+
+## 1.3.2 - Time
+
+- Merge changes with main Pikaday
+
+## 1.3.2 - 2015-02-17
+
+- Add options to disable days, see #171
+- Add SCSS file, see #130
+
+## 1.3.1 - 2015-02-04
+
+- Fix for bug introduced in #166; fixes #224, #230
+
 ## 1.3.0.1 - Time
 
 - Fix introduced bug when fixing #7. Add needed guard code.
+- This is a bad version which `npm` and others do not like, lesson learned
 
 ## 1.3.0 - Time
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "pikaday-time",
-  "version": "1.3.0.1",
+  "version": "1.3.2",
   "description": "Time support added to pikaday",
   "keywords": [
     "datepicker",

diff --git a/component.json b/component.json
@@ -2,7 +2,7 @@
   "name": "pikaday-time",
   "repo": "dbushell/Pikaday",
   "description": "Time support added to pikaday",
-  "version": "1.3.0.1",
+  "version": "1.3.2",
   "keywords": [
     "datepicker",
     "calendar",

diff --git a/css/theme.css b/css/theme.css
@@ -0,0 +1,56 @@
+/**
+ * This theme is an example to show how you can create your own.
+ */
+.pika-single.dark-theme {
+    color: #fff;
+    background: #333;
+    border: 1px solid #666;
+    border-bottom-color: #999;
+}
+
+.dark-theme .pika-label {
+    background-color: #333;
+}
+
+.dark-theme .pika-prev,
+.dark-theme .is-rtl .pika-next {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAQAAACGG/bgAAAAQ0lEQVR4Ae3KIQ4AIBTD0N0/IeHGI3UIRA3ut/Zl+ltXc5++htVAmIAwAWECwgSEKbgthEoIlRAqIVRCqINQB9nDgQd7ktwFo6UpWQAAAABJRU5ErkJggg==');
+}
+
+.dark-theme .pika-next,
+.dark-theme .is-rtl .pika-prev {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAQAAACGG/bgAAAAP0lEQVQ4y+3TMQoAMAgEwfwfAvvjTZ1uGzuvHhBPPGczEG+FRqqRaqQaqUaqkX6QBmmjacvQ6qEVTjsh+xizebvlaWptGXZAAAAAAElFTkSuQmCC');
+}
+
+.dark-theme .pika-table th {
+    color: #999;
+}
+
+.dark-theme .pika-button {
+    color: #fff;
+    background: #222;
+}
+
+.dark-theme .pika-week {
+    color: #999;
+}
+
+.dark-theme .is-today .pika-button {
+    color: #33aaff;
+}
+
+.dark-theme .is-selected .pika-button {
+    color: #fff;
+    background: #33aaff;
+    box-shadow: inset 0 1px 3px #178fe5;
+}
+
+.dark-theme .is-disabled .pika-button {
+    color: #999;
+    opacity: .3;
+}
+
+.dark-theme .pika-button:hover {
+    color: #fff !important;
+    background: #ff8000 !important;
+}
diff --git a/examples/theme.html b/examples/theme.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+    <title>Pikaday - Theme example</title>
+    <meta name="author" content="Stuart McFarlane">
+    <link rel="stylesheet" href="../css/pikaday.css">
+    <link rel="stylesheet" href="../css/theme.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 - Theme example</h1>
+
+    <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
+
+    <label for="datepicker">Date:</label>
+    <br>
+    No theme <input type="text" id="datepicker">
+    <br>
+    Custom theme <input type="text" id="datepicker-theme">
+
+    <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="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
+    <script src="../pikaday.js"></script>
+    <script>
+
+    // You can use different themes with the `theme` option
+    var pickerDefault = new Pikaday(
+    {
+        field: document.getElementById('datepicker'),
+    });
+
+    var pickerTheme = new Pikaday(
+    {
+        field: document.getElementById('datepicker-theme'),
+        theme: 'dark-theme'
+    });
+
+    </script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pikaday-time",
-  "version": "1.3.0.1",
+  "version": "1.3.2",
   "description": "Time support added to pikaday",
   "keywords": [
     "datepicker",

diff --git a/pikaday.js b/pikaday.js
@@ -263,6 +263,9 @@
             noon          : 'Noon'
         },
 
+        // Theme Classname
+        theme: null,
+
         // callback function
         onSelect: null,
         onOpen: null,
@@ -456,7 +459,8 @@
                 return;
             }
 
-            if (!(hasClass(target, 'is-disabled') || hasClass(target.parentElement, 'is-disabled'))) {
+            e.preventDefault();
+            if (!hasClass(target, 'is-disabled')) {
                 if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty')) {
                     var newDate = new Date(
                             target.getAttribute('data-pika-year'),
@@ -599,9 +603,9 @@
         };
 
         self.el = document.createElement('div');
-        self.el.className = 'pika-single' + (opts.isRTL ? ' is-rtl' : '');
+        self.el.className = 'pika-single' + (opts.isRTL ? ' is-rtl' : '') + (opts.theme ? ' ' + opts.theme : '');
 
-        addEvent(self.el, 'mousedown', self._onMouseDown, true);
+        addEvent(self.el, 'ontouchend' in document ? 'ontouchend' : 'mousedown', self._onMouseDown, true);
         addEvent(self.el, 'change', self._onChange);
 
         if (opts.field) {
@@ -669,6 +673,8 @@
 
             opts.field = (opts.field && opts.field.nodeName) ? opts.field : null;
 
+            opts.theme = (typeof opts.theme) == 'string' && opts.theme ? opts.theme : null;
+
             opts.bound = !!(opts.bound !== undefined ? opts.field && opts.bound : opts.field);
 
             opts.trigger = (opts.trigger && opts.trigger.nodeName) ? opts.trigger : opts.field;
@@ -690,9 +696,7 @@
                 opts.maxDate = opts.minDate = false;
             }
             if (opts.minDate) {
-                if (!opts.showTime) setToStartOfDay(opts.minDate);
-                opts.minYear  = opts.minDate.getFullYear();
-                opts.minMonth = opts.minDate.getMonth();
+               this.setMinDate(opts.minDate);
             }
             if (opts.maxDate) {
                 if (!opts.showTime) setToStartOfDay(opts.maxDate);
@@ -923,7 +927,11 @@
          */
         setMinDate: function(value)
         {
+            if (!this._o.showTime) setToStartOfDay(this._o.minDate);
+                                   setToStartOfDay(value);
             this._o.minDate = value;
+            this._o.minYear  = value.getFullYear();
+            this._o.minMonth = value.getMonth();
         },
 
         /**