Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
193 lines (177 sloc) 5.39 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DateJust.js Demo</title>
<link href="../lib/css/date-just.min.css" rel="stylesheet">
<link href="dist/css/docs.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900italic,900,700italic,700,600italic,600,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<div id="title">
<h1>DateJust.js</h1>
<small>DatePicker</small>
</div>
<p>
DateJust.js is a JavaScript component for <strong>calendars</strong>. It has <strong>powerful controls:</strong> drag to select multiple days, and scroll to change month.
</p>
</section>
<div class="example">
<div class="box centered">
<span class="box-label">DateJust</span>
<img src="images/date-just-demo.gif">
</div>
</div>
<section>
<p>
It <strong>doesn't have</strong> any <strong>dependencies</strong>.
</p>
<p>
The <strong>library</strong> can be found on <a href="https://github.com/callum-hart/DateJust.js">GitHub</a> as can the <a href="https://github.com/callum-hart/DateJust.js/blob/master/README.md">documentation.</a>
</p>
<p>
And some <strong>examples</strong> can be seen <a href="#first-example">below.</a>
</p>
<p>
If you are familar with <strong>Google calendar</strong>, you may recognise these interactions from its datepicker (small calendar left of the main diary).
</p>
</section>
<div class="example">
<div class="box centered">
<span class="box-label">Google datepicker</span>
<img src="images/google-datepicker.png">
</div>
</div>
<section>
<p>
I love the <strong>ease and speed</strong> in which multiple days can be selected. And the <strong>efficiency</strong> of using a mouse wheel / trackpad todo something other than scroll content up or down is somewhat refreshing.
</p>
<p>
Having (unsuccessfully) looked for an existing library, I decided to build my own!
</p>
<p>
Hence <strong>DateJust.js was born</strong>...
</p>
<p>
<i>Big thanks to <a href="https://www.commusoft.co.uk/">CommuSoft</a> where I built version 0.1.0</i>
</p>
</section>
<div class="example" id="first-example">
<h2>Example #1</h2>
<div class="box">
<span class="box-label">Result</span>
<div id="example-one"></div>
</div>
<div class="box dark">
<a href="https://github.com/callum-hart/DateJust.js/blob/master/docs/docs.html#L65" class="box-label">
HTML
</a>
<pre>
<code>
&lt;div id="example-one"&gt;&lt;/div&gt;
</code>
</pre>
</div>
<div class="box dark">
<a href="https://github.com/callum-hart/DateJust.js/blob/master/docs/dist/js/docs.js#L4" class="box-label">
JS
</a>
<pre>
<code>
exampleOne = new DateJust("#example-one", {
onDateSelected: function(date) {
console.log(date);
},
onDateRangeSelected: function(startDate, endDate) {
console.log(startDate + " – " + endDate);
}
});
</code>
</pre>
</div>
</div>
<div class="example">
<h2>Example #2</h2>
<div class="box">
<span class="box-label">Result</span>
<div id="example-two"></div>
</div>
<div class="box dark">
<a href="https://github.com/callum-hart/DateJust.js/blob/master/docs/docs.html#L102" class="box-label">
HTML
</a>
<pre>
<code>
&lt;div id="example-two"&gt;&lt;/div&gt;
</code>
</pre>
</div>
<div class="box dark">
<a href="https://github.com/callum-hart/DateJust.js/blob/master/docs/dist/js/docs.js#L13" class="box-label">
JS
</a>
<pre>
<code>
exampleTwo = new DateJust("#example-two", {
minDate: new Date(2012, 11, 8),
maxDate: new Date(2014, 11, 8),
existingDate: new Date(2014, 11, 8),
onDateSelected: function(date) {
console.log(date);
},
onDateRangeSelected: function(startDate, endDate) {
console.log(startDate + " – " + endDate);
}
});
</code>
</pre>
</div>
</div>
<div class="example">
<h2>Example #3</h2>
<div class="box">
<span class="box-label">Result</span>
<div id="example-three"></div>
</div>
<div class="box dark">
<a href="https://github.com/callum-hart/DateJust.js/blob/master/docs/docs.html#L142" class="box-label">
HTML
</a>
<pre>
<code>
&lt;div id="example-three"&gt;&lt;/div&gt;
</code>
</pre>
</div>
<div class="box dark">
<a href="https://github.com/callum-hart/DateJust.js/blob/master/docs/dist/js/docs.js#L25" class="box-label">
JS
</a>
<pre>
<code>
exampleThree = new DateJust("#example-three", {
existingDateRange: [new Date(2016, 11, 8), new Date(2016, 11, 25)],
onDateSelected: function(date) {
console.log(date);
},
onDateRangeSelected: function(startDate, endDate) {
console.log(startDate + " – " + endDate);
}
});
</code>
</pre>
</div>
</div>
<section>
<p>
P.S. You can find the source and docs on <a href="https://github.com/callum-hart/DateJust.js">GitHub.</a> And did you know DateJust.js has a bigger brother <a href="http://www.callumhart.com/open-source/date-range">DateRange.js.</a>
</p>
</section>
<footer>
<small>See more at <a href="http://www.callumhart.com">callumhart.com</a></small>
</footer>
<script type="text/javascript" src="../lib/js/date-just.min.js"></script>
<script type="text/javascript" src="dist/js/docs.js"></script>
</body>
</html>
You can’t perform that action at this time.