Permalink
Browse files

Last date shown incorrectly after selecting it

Introduces selectedDate option for visually indicating selected date
Selected date can also be set
Homepage updated with selectedDate example (in #4)
Syntaxhighlighter files referenced locally
Updated styles with selectedDate class

Signed-off-by: Gautam Lad <gautam.lad@gmail.com>
  • Loading branch information...
1 parent 79d6787 commit f2520a3063d457d6f871de906d65cbeefe75d750 @glad committed Aug 6, 2011
Showing with 2,533 additions and 22 deletions.
  1. +9 −0 css/android.css
  2. +8 −0 css/default.css
  3. +29 −9 index.php
  4. +45 −4 js/glDatePicker.js
  5. +9 −9 js/glDatePicker.min.js
  6. BIN site/img/screenshot.png
  7. +652 −0 site/js/XRegExp.js
  8. +43 −0 site/js/shBrushBash.js
  9. +36 −0 site/js/shBrushJScript.js
  10. +1,702 −0 site/js/shCore.js
View
@@ -79,6 +79,15 @@
cursor:pointer;
}
+/* Selected days */
+.gldp-android-selected
+{
+ background-color:#024;
+ color:#fff;
+ border:solid 1px #008faf;
+ cursor:wait;
+}
+
/* Today */
.gldp-android-today
{
View
@@ -80,6 +80,14 @@
font-weight:bold;
}
+/* Selected days */
+.gldp-default-selected
+{
+ background-color:#fee;
+ color:#222;
+ border:solid 1px #f82200;
+}
+
/* Today */
.gldp-default-today
{
View
@@ -37,7 +37,7 @@
<div class="content">
<div id="about" class="title">about</div>
<p>
- <b>glDatePicker</b> is a simple, customizable, lightweight date picker calendar plugin for <a href="http://jquery.com" target="_blank">jQuery</a> weighing in just over <span class="special">3.5KB compressed</span> (8KB uncompressed).
+ <b>glDatePicker</b> is a simple, customizable, lightweight date picker calendar plugin for <a href="http://jquery.com" target="_blank">jQuery</a> weighing in <span class="special">4KB compressed</span> (11KB uncompressed).
<br/>
<img src="site/img/screenshot.png" width="575" height="300" alt="Example styles" />
<br/>
@@ -50,6 +50,7 @@
<li>restricting selection of dates beyond N-days from start date</li>
<li>restricting forward / backwards month navigation</li>
<li>individual styles per date picker (in case you have multiples on one page)</li>
+ <li>show currently selected date</li>
</ul>
</div>
<!-- END about -->
@@ -84,7 +85,8 @@
// Use a custom theme named android
$("#date2").glDatePicker(
{
- cssName: "android"
+ cssName: "android",
+ selectedDate: 5
});</pre>
<br/><br/>
<!-- END Example #2 -->
@@ -111,11 +113,13 @@
<input type="text" id="date4" class="gldp" />
<br/><br/>
<pre class="brush:js">
- // Set last selectable date to start date + 5-days and prevent old date selection
+ // Set last selectable date to start date + 5-days, prevent old date selection
+ // and set selected date to 3-days from start date
$("#date4").glDatePicker(
{
endDate: 5,
startDate: new Date("September 5, 2011"),
+ selectedDate: 3,
allowOld: false
});</pre>
<br/><br/>
@@ -198,7 +202,15 @@
// -1 : No end date
// +ve : A positive number indicating # of days from startDate
// Date() : A javascript date, for example: new Date("September 5, 2011")
- endDate: -1
+ endDate: -1,
+
+ // Set the currently selected date. Can be an actual date or a number indicating
+ // offset from the startDate value.
+ // Possible values:
+ // -1 : No selected date
+ // +ve : A positive number indicating # of days from startDate
+ // Date() : A javascript date, for example: new Date("September 5, 2011")
+ selectedDate: -1,
// Show previous and next arrows. Arrows will be automatically shown or
// hidden if set to true. Set to false to force it never show.
@@ -247,14 +259,19 @@
$("#date").glDatePicker("setStartDate", new Date("September 5, 2011"));
// Set a new end date
- $("#date").glDatePicker("setEndDate", new Date("September 5, 2011"));</pre>
+ $("#date").glDatePicker("setEndDate", new Date("September 5, 2011"));
+
+ // Set a new selected date
+ $("#date").glDatePicker("setSelectedDate", new Date("September 5, 2011"));</pre>
</div>
<!-- END usage -->
<!-- BEGIN download -->
<div class="content">
<div id="download" class="title">download</div>
<ul>
+ <li>
+ <a href="site/download/glDatePicker-v1.0.zip">glDatePicker-v1.1.zip</a> - Released Aug 6, 2011</li>
<li><a href="site/download/glDatePicker-v1.0.zip">glDatePicker-v1.0.zip</a> - Released Aug 1, 2011</li>
</ul>
</div>
@@ -280,9 +297,10 @@
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
- <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
- <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
- <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript"></script>
+ <script src="site/js/XRegExp.js" type="text/javascript"></script>
+ <script src="site/js/shCore.js" type="text/javascript"></script>
+ <script src="site/js/shBrushJScript.js" type="text/javascript"></script>
+ <script src="site/js/shBrushBash.js" type="text/javascript"></script>
<script type="text/javascript" src="js/glDatePicker.js"></script>
<script type="text/javascript">
@@ -300,7 +318,8 @@
// Use a custom theme named android
$("#date2").glDatePicker(
{
- cssName: "android"
+ cssName: "android",
+ selectedDate: 5
});
// Set the last selectable date to September 5, 2011
@@ -314,6 +333,7 @@
{
endDate: 5,
startDate: new Date("September 5, 2011"),
+ selectedDate: 3,
allowOld: false
});
View
@@ -28,6 +28,14 @@
THE SOFTWARE.
Changelog:
+ Version 1.1 - Sat Aug 6 2011
+ - Last date shown incorrectly after selecting it
+ - Introduces selectedDate option for visually indicating selected date
+ - Selected date can also be set
+ - Homepage updated with selectedDate example (in #4)
+ - Syntaxhighlighter files referenced locally
+ - Updated styles with selectedDate class
+
Version 1.0 - Mon Aug 1 2011
- Initial release
*/
@@ -39,6 +47,7 @@
cssName: "default",
startDate: -1,
endDate: -1,
+ selectedDate: -1,
showPrevNext: true,
allowOld: true,
showAlways: false,
@@ -118,6 +127,12 @@
$(this).data("settings").endDate = e;
},
+ // Set a new selected date
+ setSelectedDate: function(e)
+ {
+ $(this).data("settings").selectedDate = e;
+ },
+
// Render the calendar
update:function()
{
@@ -151,6 +166,20 @@
endDate.setHours(0,0,0,0);
var endTime = endDate.getTime();
+ // Get the selected date
+ var selectedDate = new Date(0);
+ if(settings.selectedDate != -1)
+ {
+ selectedDate = new Date(settings.selectedDate);
+ if((/^\d+$/).test(settings.selectedDate))
+ {
+ selectedDate = new Date(startDate);
+ selectedDate.setDate(selectedDate.getDate()+settings.selectedDate);
+ }
+ }
+ selectedDate.setHours(0,0,0,0);
+ var selectedTime = selectedDate.getTime();
+
// Get the current date to render
var theDate = target.data("theDate");
theDate = (theDate == -1 || typeof theDate == "undefined") ? startDate : theDate;
@@ -159,7 +188,7 @@
// Also calculate the weekday to start rendering on
var firstDate = new Date(theDate); firstDate.setDate(1);
var firstTime = firstDate.getTime();
- var lastDate = new Date(theDate); lastDate.setMonth(theDate.getMonth()+1); lastDate.setDate(0);
+ var lastDate = new Date(firstDate); lastDate.setDate(0);
var lastTime = lastDate.getTime();
var lastDay = lastDate.getDate();
@@ -207,6 +236,12 @@
{
c = (dateTime > endTime) ? "noday":c;
}
+
+ // Test against selected date
+ if(settings.selectedDate != -1)
+ {
+ c = (dateTime == selectedTime) ? "selected":c;
+ }
}
else
{
@@ -290,16 +325,19 @@
});
// Highlight day cell on hover
- $("tr.days td:not(.noday)", calendar)
+ $("tr.days td:not(.noday, .selected)", calendar)
.mouseenter(function(e)
{
var css = "gldp-"+settings.cssName+"-"+$(this).children("div").attr("class");
$(this).removeClass(css).addClass(css+"-hover");
})
.mouseleave(function(e)
{
- var css = "gldp-"+settings.cssName+"-"+$(this).children("div").attr("class");
- $(this).removeClass(css+"-hover").addClass(css);
+ if(!$(this).hasClass("selected"))
+ {
+ var css = "gldp-"+settings.cssName+"-"+$(this).children("div").attr("class");
+ $(this).removeClass(css+"-hover").addClass(css);
+ }
})
.click(function(e)
{
@@ -318,6 +356,9 @@
settings.onChange(target, newDate);
}
+ // Save selected
+ settings.selectedDate = newDate;
+
// Hide calendar
methods.hide.apply(target);
});
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit f2520a3

Please sign in to comment.