Skip to content

Commit 00f0a3d

Browse files
etrepatetrepat
committed
added README and revamped example site
1 parent ec52829 commit 00f0a3d

File tree

13 files changed

+212
-62
lines changed

13 files changed

+212
-62
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.DS_Store
2+

‎README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Simple Range Picker
2+
3+
Simple javascript date range picker component I made some time ago for my own
4+
projects and self-testing/learning.
5+
6+
Inspiration for this component came from the Flash-based date range picker you
7+
can see on *Google Analytics* and [Stephen Celis's](http://stephencelis.com/) [Timeframe](http://stephencelis.github.com/timeframe) component.
8+
9+
## Usage
10+
11+
new RangePicker(element[, options, locale, template]);
12+
13+
### `options` parameter
14+
15+
- `months`: number of calendar months showing at once (default: `3`).
16+
- `currentMonthPosition`: position of current month. one of: `first`, `last` or
17+
`middle`. (default: `last`).
18+
- `current`: current date. (default: 'Date.today()').
19+
- `earliest`, `latest`: The earliest and latest selectable dates. (default: `earliest`)
20+
- `onRangeChange`: callback fired when range selection changes
21+
22+
### `locale` and `template` parameters
23+
24+
- `locale`: Allows for simple runtime locale manipulation (component-specific or date manipulation).
25+
- `template`: Sets the markup which *RangePicker* will use to generate the
26+
calendar component.
27+
28+
Please take a look at the `RangePickerOptions` object on `rangepicker.js` for further
29+
details on the options avaible on both objects.
30+
31+
## Quick & Dirty
32+
33+
<script type="text/javascript" charset="utf-8">
34+
new RangePicker('rangepicker', {
35+
months: 3,
36+
currentMonthPosition: 'last'
37+
});
38+
</script>
39+
40+
You can see it in action online [here]() or take a look at the `example` folder.
41+
42+
## Dependencies
43+
44+
*RangePicker* depends on the following libraries:
45+
46+
- [Prototype](http://prototypejs.org) 1.6 or higher
47+
- [Datejs](http://code.google.com/p/datejs/) 1.0 Alpha-1 or higher
48+
- (*optional*) [Script.aculo.us](http://script.aculo.us/) 1.8.0 o higher (If present, some effects are used)
49+
50+
Notes:
51+
52+
- All dependencies are bundled on the `lib` directory at what version they
53+
were when this component was written.
54+
55+
## TODO
56+
57+
58+
---
59+
60+
Coded by Estanislau Trepat, released under the MIT License: [http://www.opensource.org/licenses/mit-license.php](http://www.opensource.org/licenses/mit-license.php)
61+

test/images/button_arrow_down.gif renamed to example/images/button_arrow_down.gif

File renamed without changes.

test/images/button_arrow_up.gif renamed to example/images/button_arrow_up.gif

File renamed without changes.

test/images/end.png renamed to example/images/end.png

File renamed without changes.

test/images/exclamation.png renamed to example/images/exclamation.png

File renamed without changes.

test/images/start.png renamed to example/images/start.png

File renamed without changes.

test/images/startend.png renamed to example/images/startend.png

File renamed without changes.

‎example/index.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6+
<title>Simple Range Picker js component | GitHub</title>
7+
<link rel="stylesheet" href="stylesheets/main.css" type="text/css" media="all" charset="utf-8" />
8+
<link rel="stylesheet" href="stylesheets/rangepicker.css" type="text/css" media="screen" charset="utf-8" />
9+
</head>
10+
<body>
11+
<a href="https://github.com/etrepat/simplerangepicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
12+
13+
<div id="container">
14+
15+
<div class="download">
16+
<a href="https://github.com/etrepat/simple-range-picker/zipball/master"><img border="0" width="90" src="https://github.com/images/modules/download/zip.png"></a>
17+
<a href="https://github.com/etrepat/simple-range-picker/tarball/master"><img border="0" width="90" src="https://github.com/images/modules/download/tar.png"></a>
18+
</div>
19+
20+
<h1><a href="https://github.com/etrepat/simple-range-picker">Simple Range Picker</a></h1>
21+
22+
<div class="description">
23+
Yet another javascript date picker component
24+
</div>
25+
26+
<h2>Motivation</h2>
27+
<p>
28+
Inspiration for this component came from the Flash-based date range
29+
picker you can see on <em>Google Analytics</em> and
30+
<a href="http://stephencelis.com/" title="Stephen Celis's">Stephen Celis's</a>
31+
<a href="http://stephencelis.github.com/timeframe" title="Timeframe">Timeframe</a>
32+
component. It's sort of a mix of the two.
33+
</p>
34+
35+
<h2>Usage</h2>
36+
<pre><code>new RangePicker(element[, options, locale, template]);</code></pre>
37+
<p>For insight on the options available or what attributes may be supported
38+
by the locale and template objects, please take a look at the <a href="https://github.com/etrepat/simple-range-picker/blob/master/README.md" title="README">README</a>
39+
on the <a href="https://github.com/etrepat/simple-range-picker" title="github project page">github project page</a>.</p>
40+
41+
<h2>Documentation</h2>
42+
<p><a href="https://github.com/etrepat/simple-range-picker/blob/master/README.md">README</a></p>
43+
44+
<h2>Example</h2>
45+
<p>Please, picka a date range...</p>
46+
<div id="rangepicker"></div>
47+
<p>Generated from the code below (check source code for more detail):</p>
48+
<pre><code>
49+
&lt;script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;
50+
//&lt;![CDATA[
51+
document.observe(&#x27dom:loaded&#x27, function() {
52+
new RangePicker(&#x27rangepicker&#x27, {
53+
months: 3,
54+
currentMonthPosition: &#x27last&#x27
55+
});
56+
});
57+
//]]&gt;
58+
&lt;/script&gt;
59+
</code></pre>
60+
61+
<h2>Download</h2>
62+
<p>
63+
You can download this project in either
64+
<a href="https://github.com/etrepat/simple-range-picker/zipball/master">zip</a> or
65+
<a href="https://github.com/etrepat/simple-range-picker/tarball/master">tar</a> formats.
66+
</p>
67+
<p>You can also clone the project with <a href="http://git-scm.com">Git</a>
68+
by running:
69+
<pre>$ git clone git://github.com/eventmachine/eventmachine</pre>
70+
</p>
71+
72+
<h2>Dependencies</h2>
73+
74+
<h2>Localization</h2>
75+
<p>Localization with <em>SimpleRangePicker</em> can be accomplished by modifying
76+
the strings present in <code>RangePickerOptions.Locale</code> object.</p>
77+
<p>Also, as this project uses DateJS for date manipulation, dropping a localized
78+
culture info file will do the job for date formats, day names, etc.</p>
79+
80+
<div class="footer">
81+
get the source code on GitHub:
82+
<a href="https://github.com/etrepat/simple-range-picker">etrepat/simple-range-picker</a>
83+
</div>
84+
</div>
85+
<script src="../lib/prototype.js" type="text/javascript" charset="utf-8"></script>
86+
<script src="../lib/effects.js" type="text/javascript" charset="utf-8"></script>
87+
<!--
88+
Also, take a look at RangePickerOptions.Locale object. All captions used
89+
by the component can be translated there, overriden on a separate file or passed
90+
as a parameter to RangePicker constructor.
91+
-->
92+
<script src="../lib/culture-en-US.js" type="text/javascript" charset="utf-8"></script>
93+
<script src="../lib/date.js" type="text/javascript" charset="utf-8"></script>
94+
<script src="../src/rangepicker.js" type="text/javascript" charset="utf-8"></script>
95+
<script type="text/javascript" charset="utf-8">
96+
//<![CDATA[
97+
document.observe('dom:loaded', function() {
98+
new RangePicker('rangepicker', {
99+
months: 3,
100+
currentMonthPosition: 'last'
101+
});
102+
});
103+
//]]>
104+
</script>
105+
</body>
106+
</html>

‎example/stylesheets/main.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
margin-top: 1.0em;
8+
font-family: "Helvetica,Arial,FreeSans";
9+
color: #222222;
10+
}
11+
12+
#container {
13+
margin: 0 auto;
14+
width: 700px;
15+
}
16+
17+
h1 { font-size: 3.8em; color: #333333; margin-bottom: 3px; }
18+
h1 .small { font-size: 0.4em; }
19+
h1 a { text-decoration: none }
20+
h2 { font-size: 1.5em; color: #333333; }
21+
h3 { text-align: center; color: #333333; }
22+
a { color: #333333; }
23+
.description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
24+
.download { float: right; }
25+
pre { background: #000; color: #fff; padding: 15px;}
26+
hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
27+
.footer { text-align:center; padding-top:30px; font-style: italic; }

0 commit comments

Comments
 (0)