Skip to content

Commit b495992

Browse files
dubroxdubrox
committed
Move demo code into the repo
Easier to maintain the demo code and dependencies.
1 parent 7badec9 commit b495992

15 files changed

+783
-406
lines changed

‎demos/alt-field.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div id="mdp-demo"></div>
2+
<input type="text" id="altField" value="04/19/2017, 04/21/2017" />
3+
<!-- Dates in the 'value' attribute of the altField are automatically added to the calendar -->
4+
<script>
5+
$("#mdp-demo").multiDatesPicker({
6+
altField: "#altField",
7+
});
8+
</script>

‎demos/custom-date-format.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div id="mdp-demo"></div>
2+
<script>
3+
$("#mdp-demo").multiDatesPicker({
4+
dateFormat: "y-m-d",
5+
defaultDate: "85-2-19",
6+
});
7+
</script>

‎demos/days-range.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div id="mdp-demo"></div>
2+
<script>
3+
$("#mdp-demo").multiDatesPicker({
4+
mode: "daysRange",
5+
autoselectRange: [0, 5],
6+
});
7+
</script>

‎demos/disable-calendar.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div id="mdp-demo"></div>
2+
<script>
3+
var today = new Date();
4+
var tomorrow = new Date().setDate(today.getDate() + 1);
5+
6+
$("#mdp-demo").multiDatesPicker({
7+
disabled: true,
8+
// today and tomorrow are selected just to show how selected dates look
9+
// in a disabled calendar
10+
addDates: [today, tomorrow],
11+
});
12+
</script>

‎demos/disable-dates.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div id="mdp-demo"></div>
2+
<script>
3+
var date = new Date();
4+
$("#mdp-demo").multiDatesPicker({
5+
// disable the 1st and 3rd of the current month
6+
addDisabledDates: [date.setDate(1), date.setDate(3)],
7+
});
8+
</script>

‎demos/full-year.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<style>
2+
/*
3+
Styles needed just to fit the embedded
4+
version in a smaller space.
5+
*/
6+
body {
7+
font-size: x-small !important;
8+
height: 600px;
9+
}
10+
</style>
11+
<div id="mdp-demo"></div>
12+
<script>
13+
var today = new Date();
14+
var y = today.getFullYear();
15+
$("#mdp-demo").multiDatesPicker({
16+
addDates: ["10/14/" + y, "02/19/" + y, "01/14/" + y, "11/16/" + y],
17+
numberOfMonths: [3, 4],
18+
defaultDate: "1/1/" + y,
19+
});
20+
</script>

‎demos/index.html

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>MDP demo page</title>
5+
<link
6+
rel="stylesheet"
7+
href="https://code.jquery.com/ui/1.13.2/themes/pepper-grinder/jquery-ui.css"
8+
/>
9+
<link rel="stylesheet" href="../jquery-ui.multidatespicker.css" />
10+
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
11+
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js"></script>
12+
<script src="../jquery-ui.multidatespicker.js"></script>
13+
<style>
14+
body {
15+
font-family: sans-serif;
16+
}
17+
#code {
18+
font-size: x-small;
19+
white-space: pre;
20+
background: black;
21+
color: #eee;
22+
padding: 0.5em;
23+
}
24+
</style>
25+
<script>
26+
const loadDemo = (name) => {
27+
$.get(
28+
`${name}.html`,
29+
function (demoCode) {
30+
$("#code").text(demoCode);
31+
$("#preview").html(demoCode);
32+
},
33+
"html",
34+
);
35+
};
36+
37+
const loadDemoFromQuery = () => {
38+
const defaultDemo = "simple";
39+
const params = new URLSearchParams(window.location.search);
40+
const demoName = params.get("demo") || defaultDemo;
41+
loadDemo(demoName);
42+
};
43+
44+
const toggleCodeVisibility = (e) => {
45+
e.preventDefault();
46+
const codeElement = document.getElementById("code");
47+
const previewElement = document.getElementById("preview");
48+
const wasVisible = codeElement.style.display === "block";
49+
codeElement.style.display = wasVisible ? "none" : "block";
50+
window.scrollTo(0, wasVisible ? 0 : 400);
51+
};
52+
53+
$(function () {
54+
loadDemoFromQuery();
55+
$("#toggle-code-visibility").click(toggleCodeVisibility);
56+
});
57+
</script>
58+
</head>
59+
<body>
60+
<div id="preview"></div>
61+
<a id="toggle-code-visibility" href="#">Code used</a>
62+
<code id="code" style="display: none"></code>
63+
</body>
64+
</html>

‎demos/input.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<input id="mdp-demo" type="text" />
2+
<script>
3+
$("#mdp-demo").multiDatesPicker();
4+
</script>

‎demos/max-picks.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div id="mdp-demo"></div>
2+
<script>
3+
$("#mdp-demo").multiDatesPicker({ maxPicks: 2 });
4+
</script>

‎demos/min-max-date.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div id="mdp-demo"></div>
2+
<script>
3+
$("#mdp-demo").multiDatesPicker({
4+
minDate: 0, // today
5+
maxDate: 30, // +30 days from today
6+
});
7+
</script>

‎demos/pickable-range.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div id="mdp-demo"></div>
2+
<script>
3+
var date = new Date();
4+
$("#mdp-demo").multiDatesPicker({
5+
pickableRange: 7,
6+
adjustRangeToDisabled: true,
7+
addDisabledDates: [date.setDate(10), date.setDate(15)],
8+
});
9+
</script>

‎demos/preselect-dates.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div id="mdp-demo"></div>
2+
<script>
3+
var date = new Date();
4+
$("#mdp-demo").multiDatesPicker({
5+
// preselect the 14th and 19th of the current month
6+
addDates: [date.setDate(14), date.setDate(19)],
7+
});
8+
</script>

‎demos/simple.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div id="mdp-demo"></div>
2+
<script>
3+
$("#mdp-demo").multiDatesPicker();
4+
</script>

‎demos/ui-calendar-methods.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div id="mdp-demo"></div>
2+
<script>
3+
$("#mdp-demo").multiDatesPicker({
4+
beforeShowDay: $.datepicker.noWeekends,
5+
});
6+
/*
7+
Note: disabling dates using 'beforeShowDay'
8+
may produce undesired results with MDP functionalities
9+
that involve ranges, because MDP will still consider
10+
those dates as available.
11+
*/
12+
</script>

0 commit comments

Comments
 (0)