Permalink
Browse files

Initial GitHub release

  • Loading branch information...
stefangabos committed Apr 22, 2013
0 parents commit 24ee034f9e3c30c9c842e42340f6026afde6159a
Showing with 4,622 additions and 0 deletions.
  1. +60 −0 README.md
  2. +1 −0 changelog.txt
  3. +1 −0 documentation.txt
  4. +284 −0 examples/alternate.html
  5. +287 −0 examples/index.html
  6. +8 −0 examples/libraries/index.html
  7. +279 −0 examples/libraries/syntaxhighlighter/GPL-LICENSE
  8. +20 −0 examples/libraries/syntaxhighlighter/MIT-LICENSE
  9. +8 −0 examples/libraries/syntaxhighlighter/index.html
  10. +8 −0 examples/libraries/syntaxhighlighter/public/css/index.html
  11. +312 −0 examples/libraries/syntaxhighlighter/public/css/shCoreDefault.css
  12. +8 −0 examples/libraries/syntaxhighlighter/public/index.html
  13. +1 −0 examples/libraries/syntaxhighlighter/public/javascript/XRegExp.js
  14. +8 −0 examples/libraries/syntaxhighlighter/public/javascript/index.html
  15. +1 −0 examples/libraries/syntaxhighlighter/public/javascript/shBrushJScript.js
  16. +1 −0 examples/libraries/syntaxhighlighter/public/javascript/shCore.js
  17. +1 −0 examples/libraries/syntaxhighlighter/public/javascript/shLegacy.js
  18. +8 −0 examples/public/css/index.html
  19. +94 −0 examples/public/css/reset.css
  20. +33 −0 examples/public/css/style.css
  21. +8 −0 examples/public/index.html
  22. +75 −0 examples/public/javascript/core.js
  23. +8 −0 examples/public/javascript/index.html
  24. +2 −0 examples/public/javascript/jquery-1.9.1.js
  25. +165 −0 license.txt
  26. +87 −0 public/css/bootstrap.css
  27. BIN public/css/calendar-disabled.png
  28. BIN public/css/calendar.png
  29. +86 −0 public/css/default.css
  30. +84 −0 public/css/metallic.css
  31. BIN public/css/metallic/default-date.png
  32. BIN public/css/metallic/disabled-date.png
  33. BIN public/css/metallic/header.png
  34. BIN public/css/metallic/selected-date.png
  35. BIN public/css/themes.png
  36. +1 −0 public/javascript/zebra_datepicker.js
  37. +2,645 −0 public/javascript/zebra_datepicker.src.js
  38. +1 −0 readme.txt
  39. +37 −0 zebra-datepicker.jquery.json
@@ -0,0 +1,60 @@
##Zebra_Datepicker
####A lightweight datepicker jQuery plugin
<img src="http://stefangabos.ro/wp-content/uploads/covers/zebra-datepicker-630x300.jpg" align="center" width="630" height="300" style="position: relative; width: 630px; height: 300px; margin-left: 111px; border: 2px solid #666; padding: 2px">
Zebra_Datepicker is a small, compact and highly configurable datepicker jQuery plugin, meant to enrich forms by adding the datepicker functionality to them. This jQuery plugin will automatically add a calendar icon to the indicated input fields which, when clicked, will open the attached datepicker. Users can easily jump between months and years due to the datepicker’s intuitive interface. The selected date will be entered in the input field using the date format of choice, configurable in the datepicker’s options.
##Features
- it is small – it weights around 19KB minified offering the best ratio of features per used bytes
- it’s compact – unlike other datepickers, this datepicker is one-file only
- it’s cross-browser – works in every major browser; works also in Internet Explorer 6 where it uses an iFrameShim to stay above select controls
- has a default color scheme that blends-in well with almost any design, and it’s easily customizable through the well-organized CSS file; two additional themese are included, one of them being for use with <a href="http://twitter.github.io/bootstrap/">Twitter Bootstrap</a>
- offers an intuitive interface fast and easy navigation through months and years
- offers an intuitive mechanism for disabling dates and date ranges using a syntax similar to cron‘s syntax
- supports defining of custom weekend days for countries that don’t have the weekend on Saturday and Sunday
- supports most of date formats you can think of, borrowing the syntax of PHP’s date function
- supports all sorts of combinations for starting and ending dates
- date pickers can be “paired” – where one or more date pickers will use the value of another date picker as starting date
- supports internationalization
- works by automatically attaching a small calendar icon to the indicated input fields which displays the attached datepicker when clicked.
## Requirements
Zebra_Datepicker has no dependencies other than jQuery 1.5.2+ but requires that the page you are using the plugin on to have a strict doctype like:
<!doctype html>
## How to use
First, load the latest version of jQuery from a CDN and provide a fallback to a local source, like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="public/javascript/jquery-1.9.1.js"><\/script>')</script>
Load the Zebra_Datepicker jQuery plugin:
<script type="text/javascript" src="path/to/zebra_datepicker.js"></script>
Load the stylesheet:
<link rel="stylesheet" href="path/to/zebra_datepicker.css" type="text/css">
Now, within the DOM-ready event, attach the Zebra_Datepicker plugin to a &lt;input type=”text”> control
$(document).ready(function() {
// assuming the controls you want to attach the plugin to
// have the "datepicker" class set
$('input.datepicker').Zebra_DatePicker();
});
This will attach a calendar icon to the specified element(s). Clicking the icon, will make the date picker visible.
To get a reference to the instance of Zebra_DatePicker attached to an element do:
var $zdp = $('#element').data('Zebra_DatePicker');
Configuration options and demos on the **[project's homepage](http://stefangabos.ro/jquery/zebra_datepicker/)**
@@ -0,0 +1 @@
See http://stefangabos.ro/jquery/zebra-datepicker/#changelog
@@ -0,0 +1 @@
See http://stefangabos.ro/jquery/zebra-datepicker/#how-to-use
@@ -0,0 +1,284 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Zebra_DatePicker examples</title>
<link rel="stylesheet" href="public/css/reset.css" type="text/css">
<link rel="stylesheet" href="../public/css/metallic.css" type="text/css">
<link rel="stylesheet" href="public/css/style.css" type="text/css">
<link type="text/css" rel="stylesheet" href="libraries/syntaxhighlighter/public/css/shCoreDefault.css">
<script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/XRegExp.js"></script>
<script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shCore.js"></script>
<script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shLegacy.js"></script>
<script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shBrushJScript.js"></script>
<script type="text/javascript">
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>
</head>
<body>
<div class="main-wrapper">
<h3>Zebra_DatePicker Demos</h3>
<p>Click <a href="index.html">here</a> to see the default styling of the calendar</p><br><br>
<strong>1.</strong> A date picker with defaults settings.
<pre class="brush:js">
$('#datepicker-example1').Zebra_DatePicker();
</pre>
<form action="javascript:void(0)" method="post">
<div><input id="datepicker-example1" type="text"></div>
</form>
<p>&nbsp;</p>
<strong>2.</strong> Dates can be selected only in the future, starting one day in the future.
<pre class="brush:js">
$('#datepicker-example2').Zebra_DatePicker({
direction: 1 // boolean true would've made the date picker future only
// but starting from today, rather than tomorrow
});
</pre>
<form action="javascript:void(0)" method="post">
<div><input id="datepicker-example2" type="text"></div>
</form>
<p>&nbsp;</p>
<p><strong>3.</strong> Dates can be selected only in the future, starting today. Also, Saturday and Sundays are always disabled.</p>
<pre class="brush:js">
$('#datepicker-example3').Zebra_DatePicker({
direction: true,
disabled_dates: ['* * * 0,6'] // all days, all monts, all years as long
// as the weekday is 0 or 6 (Sunday or Saturday)
});
</pre>
<form action="javascript:void(0)" method="post">
<div><input id="datepicker-example3" type="text"></div>
</form>
<p>&nbsp;</p>
<p><strong>4.</strong> The selectable dates are in the interval starting tomorrow and ending 10 days from tomorrow.</p>
<pre class="brush:js">
$('#datepicker-example4').Zebra_DatePicker({
direction: [1, 10]
});
</pre>
<form action="javascript:void(0)" method="post">
<div><input id="datepicker-example4" type="text"></div>
</form>
<p>&nbsp;</p>
<p><strong>5.</strong> Dates can be selected between 2 specific dates</p>
<pre class="brush:js">
$('#datepicker-example5').Zebra_DatePicker({
// remember that the way you write down dates
// depends on the value of the "format" property!
direction: ['2012-08-01', '2012-08-12']
});
</pre>
<form action="javascript:void(0)" method="post">
<div><input id="datepicker-example5" type="text"></div>
</form>
<p>&nbsp;</p>
<p><strong>6.</strong> Dates can be selected in the future, starting with a specific date</p>
<pre class="brush:js">
$('#datepicker-example6').Zebra_DatePicker({
// remember that the way you write down dates
// depends on the value of the "format" property!
direction: ['2012-08-01', false]
});
</pre>
<form action="javascript:void(0)" method="post">
<div><input id="datepicker-example6" type="text"></div>
</form>
<p>&nbsp;</p>
<p><strong>7.</strong> The second date picker's starting date is the value of the first date picker + 1</p>
<pre class="brush:js">
$('#datepicker-example7-start').Zebra_DatePicker({
direction: true,
pair: $('#datepicker-example7-end')
});
$('#datepicker-example7-end').Zebra_DatePicker({
direction: 1
});
</pre>
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example7-start" type="text">
<input id="datepicker-example7-end" type="text">
</div>
</form>
<p>&nbsp;</p>
<p><strong>8.</strong> Set the format of the returned date:</p>
<pre class="brush:js">
$('#datepicker-example8').Zebra_DatePicker({
format: 'M d, Y'
});
</pre>
<form action="javascript:void(0)" method="post">
<div><input id="datepicker-example8" type="text"></div>
</form>
<p>&nbsp;</p>
<p><strong>9.</strong> Show week number</p>
<pre class="brush:js">
$('#datepicker-example9').Zebra_DatePicker({
show_week_number: 'Wk'
});
</pre>
<form action="javascript:void(0)" method="post">
<div><input id="datepicker-example9" type="text"></div>
</form>
<p>&nbsp;</p>
<p><strong>10.</strong> Start with the &#8220;years&#8221; view &#8211; recommended for when users need to select their birth date. Remember that you can always switch between views by clicking in the header of the date picker between the &#8220;previous&#8221; and &#8220;next&#8221; buttons!</p>
<pre class="brush:js">
$('#datepicker-example10').Zebra_DatePicker({
view: 'years'
});
</pre>
<form action="javascript:void(0)" method="post">
<div><input id="datepicker-example10" type="text"></div>
</form>
<p>&nbsp;</p>
<p><strong>11.</strong> Stop after month selection</p>
<pre class="brush:js">
$('#datepicker-example11').Zebra_DatePicker({
format: 'm Y' // note that because there's no day in the format
// users will not be able to select a day!
});
</pre>
<form action="javascript:void(0)" method="post">
<div><input id="datepicker-example11" type="text"></div>
</form>
<p>&nbsp;</p>
<p><strong>12.</strong> Handle the "onChange" event. If a callback function is attached to the "onChange"
event, it will be called whenever the user changes the view (days/months/years), as well as when the user
navigates by clicking on the "next"/"previous" icons in any of the views. The callback function called by
this event takes two arguments - the view (days/months/years) and the "active" elements (not disabled) in
that view, as jQuery elements allowing for easy customization and interaction with particular cells in the
date picker's view:</p>
<pre class="brush:js">
$('#datepicker-example12').Zebra_DatePicker({
// execute a function whenever the user changes the view (days/months/years),
// as well as when the user navigates by clicking on the "next"/"previous"
// icons in any of the views
onChange: function(view, elements) {
// on the "days" view...
if (view == 'days') {
// iterate through the active elements in the view
elements.each(function() {
// to simplify searching for particular dates, each element gets a
// "date" data attribute which is the form of:
// - YYYY-MM-DD for elements in the "days" view
// - YYYY-MM for elements in the "months" view
// - YYYY for elements in the "years" view
// so, because we're on a "days" view,
// let's find the 24th day using a regular expression
// (notice that this will apply to every 24th day
// of every month of every year)
if ($(this).data('date').match(/\-24$/))
// and highlight it!
$(this).css({
backgroundColor: '#C40000',
color: '#FFF'
});
});
}
}
});
</pre>
<form action="javascript:void(0)" method="post">
<div><input id="datepicker-example12" type="text"></div>
</form>
<p>&nbsp;</p>
<p><strong>13.</strong> Calendar is always visible. Set the "always_visible" property to point to a jQuery
element which to contain the date picker</p>
<pre class="brush:js">
$('#datepicker-example13').Zebra_DatePicker({
always_visible: $('#container')
});
</pre>
<form action="javascript:void(0)" method="post">
<div>
<input id="datepicker-example13" type="text">
<div id="container" style="margin: 10px 0 0 0"></div>
</div>
</form>
<br><br><br>
</div>
<script type="text/javascript" src="public/javascript/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../public/javascript/zebra_datepicker.js"></script>
<script type="text/javascript" src="public/javascript/core.js"></script>
</body>
</html>
Oops, something went wrong.

0 comments on commit 24ee034

Please sign in to comment.