Initial Checkin of 1.0.0 Release

This is the initial checkin of the 1.0.0 release, with modifications to the original parent project
foxrunsoftware · Mar 12, 2012 · ece1fdb · ece1fdb
1 parent f5190c9
commit ece1fdb
Show file tree

Hide file tree

Showing 7 changed files with 1,364 additions and 1,032 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,59 @@
+# DatePicker
+
+Yet another jQuery-based date picker!  This date picker provides an easy way of creating both single and multi-viewed calendars capable of accepting single, range, and multiple selected dates.  Easy to style, with two example styles provided: an attractive 'dark' style, and a Google Analytics-like 'clean' style.
+
+## Quick start
+
+Download the latest release, and jQuery.
+
+    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
+    <script type="text/javascript" src="/js/datepicker.js"></script>
+    <link rel="stylesheet" media="screen" type="text/css" href="/css/datepicker/base.css" />
+    <link rel="stylesheet" media="screen" type="text/css" href="/css/datepicker/clean.css" />
+
+    <div id="simple-calendar"></div>
+
+    <script type="text/javascript">
+      $('#simple-calendar').DatePicker({
+        mode: 'single',
+        inline: true,
+        date: new Date()
+      });
+    </script>
+
+<img src="https://github.com/foxrunsoftware/DatePicker/blob/master/examples/screenshot-1.png?raw=true" />
+
+Take a look at the examples page for live, and additional examples.  Then visit the API reference page.
+
+## Bug tracker
+
+Have a bug? Please create an issue here on GitHub!
+
+https://github.com/foxrunsoftware/DatePicker/issues
+
+## Changelog
+
+#### 1.0.0 - 3/12/2012 ####
+* Initial Release
+* Ripped out the built-in date formatter, this should be handled by the client
+* Removed the built-in parseDate functionality
+* Removed references to the 'week' column
+* Styled away the 'not in month' date cells
+* Split stylesheet into base.css to allow easier styling, and dark.css as the first full style
+* Added 'clean' style similar to Google Analytics date picker
+* Greyed out future dates for clean style
+* Removed the excessive left/right arrows from multi-month calendars
+* Highlight current date
+* Calendar month title: clicking when in 'range' mode selects the entire month.  Clicking in single/multiple mode swaps between the monthly/yearly view unless there are multiple calendars
+* Refactored code for readability
+* Renamed options, renamed/refactored callbacks
+* Commented code
+
+## License/Credits
+
+Copyright 2012, Justin Stern (www.foxrunsoftware.net)
+
+Dual licensed under the MIT or GPL Version 2 licenses.
+
+This project is based on DatePicker from http://www.eyecon.ro/datepicker/
+This project is distinct from and not affiliated with the jquery.ui.datepicker
diff --git a/css/datepicker/base.css b/css/datepicker/base.css
@@ -0,0 +1,178 @@
+div.datepicker {
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  width: 196px;
+  height: 147px;
+  position: absolute;
+  cursor: default;
+  top: 0;
+  left: 0;
+  display: none;
+}
+.datepickerContainer {
+  position: absolute;
+}
+
+/* Hide border divs by default */
+.datepickerBorderT,
+.datepickerBorderB,
+.datepickerBorderL,
+.datepickerBorderR,
+.datepickerBorderTL,
+.datepickerBorderTR,
+.datepickerBorderBL,
+.datepickerBorderBR {
+  display:none;
+}
+
+.datepickerHidden {
+  display: none;
+}
+div.datepicker table {
+  border-collapse:collapse;
+}
+div.datepicker a {
+  color: black;
+  text-decoration: none;
+  cursor: default;
+  outline: none;
+}
+div.datepicker table td {
+  text-align: center;
+  padding: 0;
+  margin: 0;
+}
+div.datepicker th {
+  text-align: center;
+  color: #666666;
+  font-weight: normal;
+  padding:0;
+}
+div.datepicker tbody a {
+  display: block;
+}
+.datepickerDays a {
+  width: 20px;
+  line-height: 16px;
+  height: 16px;
+  padding-right: 2px;
+}
+.datepickerYears a,
+.datepickerMonths a{
+  width: 39px;
+  line-height: 36px;
+  height: 36px;
+  text-align: center;
+}
+.datepickerMonths td:first-child a,
+.datepickerMonths td:last-child a,
+.datepickerYears td:first-child a,
+.datepickerYears td:last-child a {
+  width:38px;
+}
+td.datepickerNotInMonth a {
+  color: #666666;
+}
+tbody.datepickerDays td.datepickerSelected{
+  background: #136A9F;
+}
+tbody.datepickerDays td.datepickerNotInMonth.datepickerSelected {
+  background: #17384d;
+}
+tbody.datepickerYears td.datepickerSelected,
+tbody.datepickerMonths td.datepickerSelected{
+  background: #17384d;
+}
+div.datepicker td.datepickerSelected a {
+  color:white;
+}
+div.datepicker a:hover,
+div.datepicker a:hover {
+  color: #88c5eb;
+}
+div.datepicker td.datepickerNotInMonth a:hover {
+  color: #99999;
+}
+.datepickerSpace div {
+  width: 20px;
+}
+.datepickerBlock {
+  vertical-align:top;
+}
+a.datepickerGoNext,
+a.datepickerGoPrev,
+a.datepickerMonth {
+  text-align: center;
+  height: 20px;
+  line-height: 20px;
+  float:left;
+}
+div.datepicker th a.datepickerGoNext,
+div.datepicker th a.datepickerGoPrev {
+  width: 20px;
+  color: #666666;
+  display:none;
+}
+div.datepicker th a.datepickerMonth {
+  width:114px;
+  display:block;
+}
+/* Only display the previous/next arrows on the first/last calendars */
+div.datepicker .datepickerFirstView th a.datepickerGoPrev,
+div.datepicker .datepickerLastView th a.datepickerGoNext {
+  display:block;
+}
+/* Compensate for the space lost by not having a previous arrow */
+div.datepicker th a.datepickerMonth {
+  margin-left:20px;
+}
+div.datepicker .datepickerFirstView th a.datepickerMonth {
+  margin-left:0;
+}
+/* Day mode calendar body */
+table.datepickerViewDays tbody.datepickerMonths,
+table.datepickerViewDays tbody.datepickerYears {
+  display: none;
+}
+/* Month mode calendar body */
+table.datepickerViewMonths tbody.datepickerDays,
+table.datepickerViewMonths tbody.datepickerYears,
+table.datepickerViewMonths tr.datepickerDoW {
+  display: none;
+}
+/* Year mode calendar body */
+table.datepickerViewYears tbody.datepickerDays,
+table.datepickerViewYears tbody.datepickerMonths,
+table.datepickerViewYears tr.datepickerDoW {
+  display: none;
+}
+td.datepickerDisabled a,
+td.datepickerDisabled.datepickerNotInMonth a{
+  color: #555555;
+}
+td.datepickerDisabled a:hover {
+  color: #333333;
+}
+/* Not used by default, calendar cells can be marked as special if desired (doesn't seem to be totally working) */
+div.datepicker tbody.datepickerDays td.datepickerSpecial a {
+  background: #770000;
+  color:white;
+}
+div.datepicker tbody.datepickerDays td.datepickerSpecial.datepickerSelected a {
+  background: #aa0000;
+}
+
+/* style the 'not in month' day cell away */
+tbody.datepickerDays td.datepickerNotInMonth.datepickerSelected {
+  background-color:transparent;
+}
+div.datepicker td.datepickerNotInMonth a span {
+  display:none;
+}
+div.datepicker td.datepickerNotInMonth a:hover span {
+  display:none;
+}
+div.datepicker tbody.datepickerDays td.datepickerNotInMonth:hover {
+  background-color: transparent;
+}
diff --git a/css/datepicker/clean.css b/css/datepicker/clean.css
@@ -0,0 +1,77 @@
+/* Datepicker border styling */
+.datepicker {
+  background-color: #F7F7F7;
+  border: 1px solid #CCCCCC;
+  border-radius: 5px 5px 5px 5px;
+  padding: 10px;
+}
+
+/* Tighten up the spacing between multiple calendars */
+.datepickerSpace div {
+  width:2px;
+}
+
+/* Grey background behind Month Name row, and blue text */
+div.datepicker th {
+  background-color:#DDDDDD;
+}
+div.datepicker th a.datepickerMonth {
+  color:#008ED6;
+  font-weight:normal;
+}
+
+/* style the day of week header cells */
+div.datepicker th {
+  color: black;
+  font-weight: bold;
+}
+/* grey underline beneath day of week row */
+div.datepicker table thead tr.datepickerDoW th {
+  border-bottom: 1px solid #CCCCCC;
+}
+
+/* Black text, white background, and grey borders around day cells */
+div.datepicker a,
+div.datepicker a:hover {
+  color: black;
+}
+div.datepicker table.datepickerViewDays,
+div.datepicker table.datepickerViewMonths,
+div.datepicker table.datepickerViewYears {
+  background-color:white;
+}
+div.datepicker table tbody.datepickerDays td {
+  border: 1px solid #F7F7F7;
+}
+
+/* blue cell color for selected days */
+tbody.datepickerDays td.datepickerSelected {
+  background-color:#0077CC;
+}
+
+/* Grey out dates in the future */
+div.datepicker td.datepickerFuture a {
+  color:#DDDDDD;
+}
+
+/* yellow cell background on hover */
+div.datepicker tbody.datepickerDays td:hover {
+  background-color: #FFCC33;
+}
+
+/* Bold today's date */
+div.datepicker td.datepickerToday a {
+  font-weight:bold;
+}
+
+/* cells are wider in the clean style */
+.datepickerYears a, .datepickerMonths a {
+  width: 42px;
+}
+.datepickerMonths td:first-child a,
+.datepickerYears td:first-child a {
+  width:39px;
+}
+div.datepicker th a.datepickerMonth {
+  width:121px;
+}