Added time picker

tobico · Jul 15, 2010 · 56622ed · 56622ed
1 parent e8274da
commit 56622ed
Show file tree

Hide file tree

Showing 7 changed files with 315 additions and 78 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.sass-cache
diff --git a/build_css.sh b/build_css.sh
@@ -0,0 +1,2 @@
+#!/usr/bin/env bash
+sass calendrical.scss calendrical.css
diff --git a/calendrical.css b/calendrical.css
@@ -0,0 +1,64 @@
+.calendricalDatePopup {
+  background: white;
+  border: solid 1px #999999;
+  padding: 2px;
+  text-align: center;
+  width: 160px; }
+  .calendricalDatePopup table {
+    border-collapse: collapse;
+    width: 160px; }
+    .calendricalDatePopup table .monthCell {
+      padding: 2px 0; }
+      .calendricalDatePopup table .monthCell a {
+        display: block;
+        float: left;
+        line-height: 20px; }
+      .calendricalDatePopup table .monthCell .prevMonth, .calendricalDatePopup table .monthCell .nextMoth {
+        width: 24px; }
+      .calendricalDatePopup table .monthCell .monthName {
+        width: 110px; }
+    .calendricalDatePopup table a {
+      text-decoration: none; }
+    .calendricalDatePopup table td {
+      text-align: center;
+      font-size: 12px;
+      padding: 0; }
+      .calendricalDatePopup table td a {
+        display: block;
+        color: black;
+        padding: 2px 3px; }
+        .calendricalDatePopup table td a:hover {
+          background: #ccccff;
+          border: none;
+          padding: 2px 3px; }
+      .calendricalDatePopup table td.today a {
+        background: #eeeebb; }
+      .calendricalDatePopup table td.selected a {
+        background: #ccccff; }
+      .calendricalDatePopup table td.today_selected a {
+        background: #eeeebb;
+        border: solid 1px #dddd66;
+        padding: 1px 2px; }
+      .calendricalDatePopup table td.nonMonth a {
+        color: #999999; }
+
+.calendricalTimePopup {
+  background: white;
+  border: solid 1px #999999;
+  width: 110px;
+  height: 130px;
+  overflow: auto; }
+  .calendricalTimePopup ul {
+    margin: 0;
+    padding: 0; }
+    .calendricalTimePopup ul li {
+      list-style: none;
+      margin: 0; }
+      .calendricalTimePopup ul li a, .calendricalTimePopup ul li a:visited {
+        text-indent: 10px;
+        padding: 4px;
+        display: block;
+        color: black;
+        text-decoration: none; }
+      .calendricalTimePopup ul li a:hover, .calendricalTimePopup ul li.selected a {
+        background: #ccccff; }
diff --git a/calendrical.scss b/calendrical.scss
@@ -0,0 +1,95 @@
+$background_color:    #FFF;
+$text_color:          #000;
+$border_color:        #999;
+$grey_color:          #999;
+$selection_color:     #CCF;
+$today_color:         #EEB;
+$today_border_color:  #DD6;
+
+.calendricalDatePopup {
+  background: $background_color;
+  border: solid 1px $border_color;
+  padding: 2px;
+  text-align: center;
+  width: 160px;
+
+  table {
+    border-collapse: collapse;
+    width: 160px;
+
+    .monthCell {
+      padding: 2px 0;
+      a {
+        display: block;
+        float: left;
+        line-height: 20px;
+      }
+      .prevMonth, .nextMoth {
+        width: 24px;
+      }
+      .monthName {
+        width: 110px;
+      }
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    td {
+      text-align: center;
+      font-size: 12px;
+      padding: 0;
+      a {
+        display: block;
+        color: $text_color;
+        padding: 2px 3px;
+        &:hover {
+          background: $selection_color;
+          border: none;
+          padding: 2px 3px;
+        }
+      }
+      &.today a {
+        background: $today_color;
+      }
+      &.selected a {
+        background: $selection_color;
+      }
+      &.today_selected a {
+        background: $today_color;
+        border: solid 1px $today_border_color;
+        padding: 1px 2px;
+      }
+      &.nonMonth a {
+        color: $grey_color;
+      }
+    }
+  }
+}
+
+.calendricalTimePopup {
+  background: $background_color;
+  border: solid 1px $border_color;
+  width: 110px;
+  height: 130px;
+  overflow: auto;
+  ul {
+    margin: 0;
+    padding: 0;
+    li {
+      list-style: none;
+      margin: 0;
+      a, a:visited {
+        text-indent: 10px;
+        padding: 4px;
+        display: block;
+        color: $text_color;
+        text-decoration: none;
+      }
+      a:hover, &.selected a {
+        background: $selection_color;
+      }
+    }
+  }
+}
diff --git a/example.html b/example.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Calendrical Test</title>
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+		<script src="jquery.calendrical.js"></script>
+		<link rel="stylesheet" href="calendrical.css" />
+		<style>
+			body {
+				font: 12px "Lucida Grande", Arial, sans-serif;
+				text-align: center;
+			}
+			pre {
+				font: 12px Menlo, Consolas, Monaco, "DejaVu Sans Mono", Courier, "Courier New";
+			}
+			#wrapper {
+				width: 960px;
+				text-align: left;
+				margin: 0 auto;
+			}
+			section {
+				clear: left;
+			}
+			div.demo input {
+				width: 100px;
+			}
+			div.demo, div.html, div.javascript {
+				float: left;
+				width: 300px;
+				margin-right: 30px;
+				text-align: left;
+			}
+			div.javascript {
+				margin-right: 0;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="wrapper">
+			<header>
+				<h1>Calendrical</h1>
+			</header>
+
+			<section>
+				<header>
+					<h2>Date and Time</h2>
+				</header>
+
+				<div class="demo">
+					<p>
+						<input id="date" type="text" />
+						<input id="time" type="text" />
+					</p>
+					<script>
+						$(function() {
+							$('#date').calendricalDate(); 
+							$('#time').calendricalTime();
+						});
+					</script>
+				</div>
+
+				<div class="html">
+					<pre>
+<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">input</font> <font color="#2040a0">id=</font><font color="#008000">"date"</font> <font color="#2040a0">type=</font><font color="#008000">"text"</font> <font color="#2040a0">/</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
+<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">input</font> <font color="#2040a0">id=</font><font color="#008000">"time"</font> <font color="#2040a0">type=</font><font color="#008000">"text"</font> <font color="#2040a0">/</font><font color="4444FF"><strong>&gt;</strong></font></strong></font></pre>
+				</div>
+
+				<div class="javascript">
+					<pre>
+$(<font color="#008000">'#date'</font>).calendricalDate()<font color="4444FF">;</font> 
+$(<font color="#008000">'#time'</font>).calendricalTime()<font color="4444FF">;</font></pre>
+				</div>
+			</section>
+		</div>
+	</body>
+</html>
diff --git a/jquery.calendrical.js b/jquery.calendrical.js
@@ -153,6 +153,41 @@
         element.empty().append(table);
     }
 
+    function renderTimeSelect(element, options)
+    {
+        var ul = $('<ul />');
+        for (var hour = 0; hour < 24; hour++) {
+            for (var minute = 0; minute < 60; minute += 30) {
+                var printHour = hour % 12;
+                if (printHour == 0) printHour = 12;
+                var printMinute = minute;
+                if (minute < 10) printMinute = '0' + minute;
+                var half = (hour < 12) ? 'am' : 'pm';
+                (function() {
+                    var timeText = printHour + ':' + printMinute + half;
+                    var li = $('<li />').append(
+                        $('<a href="javascript:;">' + timeText + '</a>')
+                        .click(function() {
+                            if (options && options.selectTime) {
+                                options.selectTime(timeText);
+                            }
+                        }).mousemove(function() {
+                            $('li.selected', ul).removeClass('selected');
+                        })
+                    ).appendTo(ul);
+                    if (options.selection && options.selection == timeText) {
+                        li.addClass('selected');
+                        setTimeout(function() {
+                            console.log(li[0]);
+                            element[0].scrollTop = li[0].offsetTop - li.height() * 2;
+                        }, 0)
+                    }
+                })();
+            }
+        }
+        element.empty().append(ul);
+    }
+
     function formatDate(date, usa)
     {
         return (usa ?
@@ -197,6 +232,7 @@
                 element.after(div); 
 
                 var selected = parseDate(element.val(), options.usa);
+                if (!selected.getFullYear()) selected = getToday();
 
                 renderCalendarPage(
                     div,
@@ -217,4 +253,45 @@
             });
         });
     }
+
+    $.fn.calendricalTime = function(options)
+    {
+        options = options || {};
+        options.padding = options.padding || 4;
+
+        return this.each(function() {
+            var element = $(this);
+            var div;
+
+            element.bind('focus click', function() {
+                if (div) return;
+                var offset = element.offset();
+                div = $('<div />')
+                    .addClass('calendricalTimePopup')
+                    .mousedown(function(e) {
+                        e.preventDefault();
+                    })
+                    .css({
+                        position: 'absolute',
+                        left: offset.left,
+                        top: offset.top + element.height() +
+                            options.padding * 2
+                    });
+                element.after(div); 
+
+                renderTimeSelect(div, {
+                    selection: element.val(),
+                    selectTime: function(time) {
+                        element.val(time);
+                        div.remove();
+                        div = null;
+                    }
+                });
+            }).blur(function() {
+                if (!div) return;
+                div.remove();
+                div = null;
+            });
+        });
+    }
 // })(jQuery);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		#!/usr/bin/env bash
		sass calendrical.scss calendrical.css