Move demo code into the repo

Easier to maintain the demo code and dependencies.
dubrox · Jan 14, 2025 · b495992 · b495992
1 parent 7badec9
commit b495992
Show file tree

Hide file tree

Showing 15 changed files with 783 additions and 406 deletions.
diff --git a/demos/alt-field.html b/demos/alt-field.html
@@ -0,0 +1,8 @@
+<div id="mdp-demo"></div>
+<input type="text" id="altField" value="04/19/2017, 04/21/2017" />
+<!-- Dates in the 'value' attribute of the altField are automatically added to the calendar -->
+<script>
+  $("#mdp-demo").multiDatesPicker({
+    altField: "#altField",
+  });
+</script>
diff --git a/demos/custom-date-format.html b/demos/custom-date-format.html
@@ -0,0 +1,7 @@
+<div id="mdp-demo"></div>
+<script>
+  $("#mdp-demo").multiDatesPicker({
+    dateFormat: "y-m-d",
+    defaultDate: "85-2-19",
+  });
+</script>
diff --git a/demos/days-range.html b/demos/days-range.html
@@ -0,0 +1,7 @@
+<div id="mdp-demo"></div>
+<script>
+  $("#mdp-demo").multiDatesPicker({
+    mode: "daysRange",
+    autoselectRange: [0, 5],
+  });
+</script>
diff --git a/demos/disable-calendar.html b/demos/disable-calendar.html
@@ -0,0 +1,12 @@
+<div id="mdp-demo"></div>
+<script>
+  var today = new Date();
+  var tomorrow = new Date().setDate(today.getDate() + 1);
+
+  $("#mdp-demo").multiDatesPicker({
+    disabled: true,
+    // today and tomorrow are selected just to show how selected dates look
+    // in a disabled calendar
+    addDates: [today, tomorrow],
+  });
+</script>
diff --git a/demos/disable-dates.html b/demos/disable-dates.html
@@ -0,0 +1,8 @@
+<div id="mdp-demo"></div>
+<script>
+  var date = new Date();
+  $("#mdp-demo").multiDatesPicker({
+    // disable the 1st and 3rd of the current month
+    addDisabledDates: [date.setDate(1), date.setDate(3)],
+  });
+</script>
diff --git a/demos/full-year.html b/demos/full-year.html
@@ -0,0 +1,20 @@
+<style>
+  /*
+  Styles needed just to fit the embedded 
+  version in a smaller space.
+  */
+  body {
+    font-size: x-small !important;
+    height: 600px;
+  }
+</style>
+<div id="mdp-demo"></div>
+<script>
+  var today = new Date();
+  var y = today.getFullYear();
+  $("#mdp-demo").multiDatesPicker({
+    addDates: ["10/14/" + y, "02/19/" + y, "01/14/" + y, "11/16/" + y],
+    numberOfMonths: [3, 4],
+    defaultDate: "1/1/" + y,
+  });
+</script>
diff --git a/demos/index.html b/demos/index.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+  <head>
+    <title>MDP demo page</title>
+    <link
+      rel="stylesheet"
+      href="https://code.jquery.com/ui/1.13.2/themes/pepper-grinder/jquery-ui.css"
+    />
+    <link rel="stylesheet" href="../jquery-ui.multidatespicker.css" />
+    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js"></script>
+    <script src="../jquery-ui.multidatespicker.js"></script>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+      #code {
+        font-size: x-small;
+        white-space: pre;
+        background: black;
+        color: #eee;
+        padding: 0.5em;
+      }
+    </style>
+    <script>
+      const loadDemo = (name) => {
+        $.get(
+          `${name}.html`,
+          function (demoCode) {
+            $("#code").text(demoCode);
+            $("#preview").html(demoCode);
+          },
+          "html",
+        );
+      };
+
+      const loadDemoFromQuery = () => {
+        const defaultDemo = "simple";
+        const params = new URLSearchParams(window.location.search);
+        const demoName = params.get("demo") || defaultDemo;
+        loadDemo(demoName);
+      };
+
+      const toggleCodeVisibility = (e) => {
+        e.preventDefault();
+        const codeElement = document.getElementById("code");
+        const previewElement = document.getElementById("preview");
+        const wasVisible = codeElement.style.display === "block";
+        codeElement.style.display = wasVisible ? "none" : "block";
+        window.scrollTo(0, wasVisible ? 0 : 400);
+      };
+
+      $(function () {
+        loadDemoFromQuery();
+        $("#toggle-code-visibility").click(toggleCodeVisibility);
+      });
+    </script>
+  </head>
+  <body>
+    <div id="preview"></div>
+    <a id="toggle-code-visibility" href="#">Code used</a>
+    <code id="code" style="display: none"></code>
+  </body>
+</html>
diff --git a/demos/input.html b/demos/input.html
@@ -0,0 +1,4 @@
+<input id="mdp-demo" type="text" />
+<script>
+  $("#mdp-demo").multiDatesPicker();
+</script>
diff --git a/demos/max-picks.html b/demos/max-picks.html
@@ -0,0 +1,4 @@
+<div id="mdp-demo"></div>
+<script>
+  $("#mdp-demo").multiDatesPicker({ maxPicks: 2 });
+</script>
diff --git a/demos/min-max-date.html b/demos/min-max-date.html
@@ -0,0 +1,7 @@
+<div id="mdp-demo"></div>
+<script>
+  $("#mdp-demo").multiDatesPicker({
+    minDate: 0, // today
+    maxDate: 30, // +30 days from today
+  });
+</script>
diff --git a/demos/pickable-range.html b/demos/pickable-range.html
@@ -0,0 +1,9 @@
+<div id="mdp-demo"></div>
+<script>
+  var date = new Date();
+  $("#mdp-demo").multiDatesPicker({
+    pickableRange: 7,
+    adjustRangeToDisabled: true,
+    addDisabledDates: [date.setDate(10), date.setDate(15)],
+  });
+</script>
diff --git a/demos/preselect-dates.html b/demos/preselect-dates.html
@@ -0,0 +1,8 @@
+<div id="mdp-demo"></div>
+<script>
+  var date = new Date();
+  $("#mdp-demo").multiDatesPicker({
+    // preselect the 14th and 19th of the current month
+    addDates: [date.setDate(14), date.setDate(19)],
+  });
+</script>
diff --git a/demos/simple.html b/demos/simple.html
@@ -0,0 +1,4 @@
+<div id="mdp-demo"></div>
+<script>
+  $("#mdp-demo").multiDatesPicker();
+</script>
diff --git a/demos/ui-calendar-methods.html b/demos/ui-calendar-methods.html
@@ -0,0 +1,12 @@
+<div id="mdp-demo"></div>
+<script>
+  $("#mdp-demo").multiDatesPicker({
+    beforeShowDay: $.datepicker.noWeekends,
+  });
+  /*
+  Note: disabling dates using 'beforeShowDay' 
+  may produce undesired results with MDP functionalities 
+  that involve ranges, because MDP will still consider 
+  those dates as available.
+  */
+</script>