├── .prettierrc
├── .husky
    └── pre-commit
├── .prettierignore
├── .vscode
    └── settings.json
├── .gitignore
├── favicon.ico
├── mdp-icon.png
├── demos
    ├── simple.html
    ├── input.html
    ├── max-picks.html
    ├── days-range.html
    ├── custom-date-format.html
    ├── min-max-date.html
    ├── disable-dates.html
    ├── preselect-dates.html
    ├── pickable-range.html
    ├── alt-field.html
    ├── disable-calendar.html
    ├── ui-calendar-methods.html
    ├── full-year.html
    └── index.html
├── jest.setup.js
├── eslint.config.mjs
├── jquery-ui.multidatespicker.css
├── bower.json
├── .github
    └── workflows
    │   └── ci.yml
├── README.md
├── package.json
├── index.js
├── jest.config.js
├── jquery-ui.multidatespicker.js
├── index.html
└── __tests__
    └── multidatespicker.test.js


/.prettierrc:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | npx lint-staged
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Ignore artifacts:
2 | build
3 | coverage
4 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "editor.tabSize": 2
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .eslintcache
2 | .idea
3 | /node_modules/
4 | /coverage/


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/HEAD/favicon.ico


--------------------------------------------------------------------------------
/mdp-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/HEAD/mdp-icon.png


--------------------------------------------------------------------------------
/demos/simple.html:
--------------------------------------------------------------------------------
1 | <div id="mdp-demo"></div>
2 | <script>
3 |   $("#mdp-demo").multiDatesPicker();
4 | </script>
5 | 


--------------------------------------------------------------------------------
/demos/input.html:
--------------------------------------------------------------------------------
1 | <input id="mdp-demo" type="text" />
2 | <script>
3 |   $("#mdp-demo").multiDatesPicker();
4 | </script>
5 | 


--------------------------------------------------------------------------------
/demos/max-picks.html:
--------------------------------------------------------------------------------
1 | <div id="mdp-demo"></div>
2 | <script>
3 |   $("#mdp-demo").multiDatesPicker({ maxPicks: 2 });
4 | </script>
5 | 


--------------------------------------------------------------------------------
/demos/days-range.html:
--------------------------------------------------------------------------------
1 | <div id="mdp-demo"></div>
2 | <script>
3 |   $("#mdp-demo").multiDatesPicker({
4 |     mode: "daysRange",
5 |     autoselectRange: [0, 5],
6 |   });
7 | </script>
8 | 


--------------------------------------------------------------------------------
/demos/custom-date-format.html:
--------------------------------------------------------------------------------
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>
8 | 


--------------------------------------------------------------------------------
/demos/min-max-date.html:
--------------------------------------------------------------------------------
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>
8 | 


--------------------------------------------------------------------------------
/jest.setup.js:
--------------------------------------------------------------------------------
1 | const jQuery = require("jquery");
2 | global.$ = global.jQuery = window.$ = window.jQuery = jQuery;
3 | jQuery.ui = require("jquery-ui");
4 | require("jquery-ui/ui/widgets/datepicker");
5 | require("./jquery-ui.multidatespicker.js");
6 | 


--------------------------------------------------------------------------------
/demos/disable-dates.html:
--------------------------------------------------------------------------------
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>
9 | 


--------------------------------------------------------------------------------
/demos/preselect-dates.html:
--------------------------------------------------------------------------------
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>
9 | 


--------------------------------------------------------------------------------
/demos/pickable-range.html:
--------------------------------------------------------------------------------
 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>
10 | 


--------------------------------------------------------------------------------
/demos/alt-field.html:
--------------------------------------------------------------------------------
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>
9 | 


--------------------------------------------------------------------------------
/demos/disable-calendar.html:
--------------------------------------------------------------------------------
 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>
13 | 


--------------------------------------------------------------------------------
/demos/ui-calendar-methods.html:
--------------------------------------------------------------------------------
 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>
13 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import globals from "globals";
 2 | import pluginJs from "@eslint/js";
 3 | import eslintConfigPrettier from "eslint-config-prettier";
 4 | 
 5 | /** @type {import('eslint').Linter.Config[]} */
 6 | export default [
 7 |   { languageOptions: { globals: globals.browser } },
 8 |   eslintConfigPrettier,
 9 |   pluginJs.configs.recommended,
10 |   {
11 |     rules: {
12 |       "no-fallthrough": "off",
13 |       "no-undef": "warn",
14 |       "no-unused-vars": "warn",
15 |     },
16 |   },
17 | ];
18 | 


--------------------------------------------------------------------------------
/jquery-ui.multidatespicker.css:
--------------------------------------------------------------------------------
 1 | /* jQuery UI Datepicker moving pixels fix */
 2 | table.ui-datepicker-calendar {
 3 |   border-collapse: separate;
 4 | }
 5 | .ui-datepicker-calendar td {
 6 |   border: 1px solid transparent;
 7 | }
 8 | 
 9 | /* jQuery UI Datepicker hide datepicker helper */
10 | #ui-datepicker-div {
11 |   display: none;
12 | }
13 | 
14 | /* jQuery UI Datepicker emphasis on selected dates */
15 | .ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
16 |   background: #743620 none;
17 |   color: white;
18 | }
19 | 


--------------------------------------------------------------------------------
/demos/full-year.html:
--------------------------------------------------------------------------------
 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>
21 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery-ui-multidatespicker",
 3 |   "description": "Extension to the jQuery UI Calendar allowing multiple selections",
 4 |   "license": "(MIT OR GPLv2)",
 5 |   "authors": ["Luca Lauretta <luca@lauretta.info>"],
 6 |   "main": ["jquery-ui.multidatespicker.js", "jquery-ui.multidatespicker.css"],
 7 |   "dependencies": {
 8 |     "jquery": "1.9.1 - 3.7.x",
 9 |     "jquery-ui": "1.7.0 - 1.14.x"
10 |   },
11 |   "keywords": ["jquery", "jquery-ui", "calendar", "dates"],
12 |   "ignore": ["**/.*", "*.ico", "*.png", "package.json", "index.html"]
13 | }
14 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: Run Tests on Pull Requests and Main Branch
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |   pull_request:
 8 |     branches:
 9 |       - main
10 | 
11 | jobs:
12 |   test:
13 |     runs-on: ubuntu-latest
14 | 
15 |     steps:
16 |       - name: Checkout the repository
17 |         uses: actions/checkout@v2
18 | 
19 |       - name: Set up Node.js
20 |         uses: actions/setup-node@v3
21 |         with:
22 |           node-version: "16"
23 | 
24 |       - name: Install dependencies
25 |         run: npm install
26 | 
27 |       - name: Run tests
28 |         run: npm test
29 | 
30 |       - name: Upload coverage reports to Codecov
31 |         uses: codecov/codecov-action@v5
32 |         with:
33 |           token: ${{ secrets.CODECOV_TOKEN }}
34 |           slug: dubrox/Multiple-Dates-Picker-for-jQuery-UI
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # MultiDatesPicker for jQuery UI
 2 | 
 3 | ![codecov](https://codecov.io/gh/dubrox/Multiple-Dates-Picker-for-jQuery-UI/branch/main/graph/badge.svg)
 4 | 
 5 | This plugin extends the jQuery UI datepicker clendar, allowing to select more than one date,
 6 | picking them one by one or by ranges relative to the clicked date.
 7 | 
 8 | Take a look at [some demos](http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/#demos).
 9 | 
10 | ## Install
11 | 
12 | With any of the following package managers:
13 | 
14 | `bower install jquery-ui-multidatespicker`
15 | 
16 | `npm install jquery-ui-multidatespicker`
17 | 
18 | `yarn add jquery-ui-multidatespicker`
19 | 
20 | Download the [zip](https://github.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/archive/latest.zip)
21 | and place wherever you need it:
22 | 
23 | ## Use
24 | 
25 | For documentation and examples, check
26 | [the official MDP page](https://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI).
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery-ui-multidatespicker",
 3 |   "description": "Extension to the jQuery UI Calendar allowing multiple selections",
 4 |   "author": "Luca Lauretta <luca@lauretta.info>",
 5 |   "license": "(MIT OR GPLv2)",
 6 |   "version": "1.6.8",
 7 |   "main": "jquery-ui.multidatespicker.js",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git+https://github.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI.git"
11 |   },
12 |   "dependencies": {
13 |     "jquery": "1.9.1 - 3.7.x",
14 |     "jquery-ui": "1.7.0 - 1.14.x"
15 |   },
16 |   "keywords": [
17 |     "jquery",
18 |     "jquery-ui",
19 |     "calendar",
20 |     "datepicker",
21 |     "dates",
22 |     "multidatespicker",
23 |     "multidates",
24 |     "multiple",
25 |     "range"
26 |   ],
27 |   "type": "commonjs",
28 |   "bugs": {
29 |     "url": "https://github.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/issues"
30 |   },
31 |   "homepage": "https://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI",
32 |   "scripts": {
33 |     "format": "prettier --write --ignore-unknown",
34 |     "lint": "eslint --cache --fix",
35 |     "test": "jest",
36 |     "prepare": "husky"
37 |   },
38 |   "lint-staged": {
39 |     "*.js": "npm run lint",
40 |     "*.*": "npm run format"
41 |   },
42 |   "devDependencies": {
43 |     "@eslint/js": "^9.18.0",
44 |     "eslint": "^9.18.0",
45 |     "eslint-config-prettier": "^10.0.1",
46 |     "esm": "^3.2.25",
47 |     "globals": "^15.14.0",
48 |     "husky": "^9.1.7",
49 |     "jest": "^29.7.0",
50 |     "jest-environment-jsdom": "^29.7.0",
51 |     "jsom": "^1.0.0",
52 |     "lint-staged": "^15.3.0",
53 |     "prettier": "3.4.2"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/demos/index.html:
--------------------------------------------------------------------------------
 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>
65 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | var extend = Object.assign || require("util")._extend;
  2 | var Path = require("path");
  3 | 
  4 | /*
  5 |  * store original global keys
  6 |  */
  7 | var blacklist = Object.keys(global);
  8 | blacklist.push("constructor");
  9 | 
 10 | /*
 11 |  * default config
 12 |  */
 13 | var defaults = {
 14 |   url: "http://localhost",
 15 |   globalize: true,
 16 |   console: true,
 17 |   useEach: false,
 18 |   skipWindowCheck: false,
 19 |   html:
 20 |     "<!doctype html><html><head><meta charset='utf-8'></head>" +
 21 |     "<body></body></html>",
 22 | };
 23 | 
 24 | /*
 25 |  * simple jsdom integration.
 26 |  * You can pass jsdom options in, too:
 27 |  *
 28 |  *     require('./support/jsdom')({
 29 |  *       src: [ jquery ]
 30 |  *     })
 31 |  */
 32 | module.exports = function (_options) {
 33 |   var options = extend(extend({}, defaults), _options);
 34 | 
 35 |   var keys = [];
 36 | 
 37 |   var before = options.useEach ? global.beforeEach : global.before;
 38 |   var after = options.useEach ? global.afterEach : global.after;
 39 | 
 40 |   /*
 41 |    * register jsdom before the entire test suite
 42 |    */
 43 | 
 44 |   before(function (next) {
 45 |     if (global.window && !options.skipWindowCheck) {
 46 |       throw new Error(
 47 |         "mocha-jsdom: already a browser environment, or mocha-jsdom invoked " +
 48 |           "twice. use 'skipWindowCheck' to disable this check.",
 49 |       );
 50 |     }
 51 |     require("jsdom/lib/old-api").env(
 52 |       extend(extend({}, options), { done: done }),
 53 |     );
 54 | 
 55 |     function done(errors, window) {
 56 |       if (options.globalize) {
 57 |         propagateToGlobal(window);
 58 |       } else {
 59 |         global.window = window;
 60 |       }
 61 | 
 62 |       if (options.console) {
 63 |         window.console = global.console;
 64 |       }
 65 | 
 66 |       if (errors) {
 67 |         return next(getError(errors));
 68 |       }
 69 | 
 70 |       next(null);
 71 |     }
 72 |   });
 73 | 
 74 |   /*
 75 |    * undo keys from being propagated to global after the test suite
 76 |    */
 77 |   after(function () {
 78 |     if (options.globalize) {
 79 |       keys.forEach(function (key) {
 80 |         delete global[key];
 81 |       });
 82 |     } else {
 83 |       delete global.window;
 84 |     }
 85 |   });
 86 | 
 87 |   /*
 88 |    * propagate keys from `window` to `global`
 89 |    */
 90 |   function propagateToGlobal(window) {
 91 |     for (var key in window) {
 92 |       if (!Object.prototype.hasOwnProperty.call(window, key)) continue;
 93 |       if (~blacklist.indexOf(key)) continue;
 94 |       if (global[key]) {
 95 |         if (process.env.JSDOM_VERBOSE) {
 96 |           console.warn(
 97 |             "[jsdom] Warning: skipping cleanup of global['" + key + "']",
 98 |           );
 99 |         }
100 |         continue;
101 |       }
102 | 
103 |       keys.push(key);
104 |       global[key] = window[key];
105 |     }
106 |   }
107 | 
108 |   /*
109 |    * re-throws jsdom errors
110 |    */
111 |   function getError(errors) {
112 |     var data = errors[0].data;
113 |     var err = data.error;
114 |     err.message = err.message + " [jsdom]";
115 | 
116 |     // clean up stack trace
117 |     if (err.stack) {
118 |       err.stack = err.stack
119 |         .split("\n")
120 |         .reduce(function (list, line) {
121 |           if (line.match(/node_modules.+(jsdom|mocha)/)) {
122 |             return list;
123 |           }
124 | 
125 |           line = line
126 |             .replace(/file:\/\/.*<script>/g, "<script>")
127 |             .replace(/:undefined:undefined/g, "");
128 |           list.push(line);
129 |           return list;
130 |         }, [])
131 |         .join("\n");
132 |     }
133 | 
134 |     return err;
135 |   }
136 | };
137 | 
138 | module.exports.rerequire = rerequire;
139 | 
140 | /**
141 |  * Requires a module via `require()`, but invalidates the cache so it may be
142 |  * called again in the future. Useful for `mocha --watch`.
143 |  *
144 |  *     var rerequire = require('mocha-jsdom').rerequire
145 |  *     var $ = rerequire('jquery')
146 |  */
147 | function rerequire(module) {
148 |   if (module[0] === ".") {
149 |     module = Path.join(Path.dirname(getCaller()), module);
150 |   }
151 | 
152 |   var oldkeys = Object.keys(require.cache);
153 |   var result = require(module);
154 |   var newkeys = Object.keys(require.cache);
155 |   newkeys.forEach(function (newkey) {
156 |     if (!~oldkeys.indexOf(newkey)) {
157 |       delete require.cache[newkey];
158 |     }
159 |   });
160 |   return result;
161 | }
162 | 
163 | /**
164 |  * Internal: gets the filename of the caller function. The `offset` defines how
165 |  * many hops away it's expected to be from in the stack trace.
166 |  *
167 |  * See: http://stackoverflow.com/questions/16697791/nodejs-get-filename-of-caller-function
168 |  */
169 | function getCaller(offset) {
170 |    
171 |   if (typeof offset !== "number") offset = 1;
172 |   var old = Error.prepareStackTrace;
173 |   var err = new Error();
174 |   Error.prepareStackTrace = function (err, stack) {
175 |     return stack;
176 |   };
177 |   var fname = err.stack[1 + offset].getFileName();
178 |   Error.prepareStackTrace = old;
179 |   return fname;
180 | }
181 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * For a detailed explanation regarding each configuration property, visit:
  3 |  * https://jestjs.io/docs/configuration
  4 |  */
  5 | 
  6 | /** @type {import('jest').Config} */
  7 | const config = {
  8 |   // All imported modules in your tests should be mocked automatically
  9 |   // automock: false,
 10 | 
 11 |   // Stop running tests after `n` failures
 12 |   // bail: 0,
 13 | 
 14 |   // The directory where Jest should store its cached dependency information
 15 |   // cacheDirectory: "/tmp/jest_rs",
 16 | 
 17 |   // Automatically clear mock calls, instances, contexts and results before every test
 18 |   clearMocks: true,
 19 | 
 20 |   // Indicates whether the coverage information should be collected while executing the test
 21 |   collectCoverage: true,
 22 | 
 23 |   // An array of glob patterns indicating a set of files for which coverage information should be collected
 24 |   // collectCoverageFrom: undefined,
 25 | 
 26 |   // The directory where Jest should output its coverage files
 27 |   coverageDirectory: "coverage",
 28 | 
 29 |   // An array of regexp pattern strings used to skip coverage collection
 30 |   // coveragePathIgnorePatterns: [
 31 |   //   "/node_modules/"
 32 |   // ],
 33 | 
 34 |   // Indicates which provider should be used to instrument code for coverage
 35 |   coverageProvider: "v8",
 36 | 
 37 |   // A list of reporter names that Jest uses when writing coverage reports
 38 |   // coverageReporters: [
 39 |   //   "json",
 40 |   //   "text",
 41 |   //   "lcov",
 42 |   //   "clover"
 43 |   // ],
 44 | 
 45 |   // An object that configures minimum threshold enforcement for coverage results
 46 |   // coverageThreshold: undefined,
 47 | 
 48 |   // A path to a custom dependency extractor
 49 |   // dependencyExtractor: undefined,
 50 | 
 51 |   // Make calling deprecated APIs throw helpful error messages
 52 |   // errorOnDeprecated: false,
 53 | 
 54 |   // The default configuration for fake timers
 55 |   // fakeTimers: {
 56 |   //   "enableGlobally": false
 57 |   // },
 58 | 
 59 |   // Force coverage collection from ignored files using an array of glob patterns
 60 |   // forceCoverageMatch: [],
 61 | 
 62 |   // A path to a module which exports an async function that is triggered once before all test suites
 63 |   // globalSetup: undefined,
 64 | 
 65 |   // A path to a module which exports an async function that is triggered once after all test suites
 66 |   // globalTeardown: undefined,
 67 | 
 68 |   // A set of global variables that need to be available in all test environments
 69 |   // globals: {},
 70 | 
 71 |   // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
 72 |   // maxWorkers: "50%",
 73 | 
 74 |   // An array of directory names to be searched recursively up from the requiring module's location
 75 |   // moduleDirectories: [
 76 |   //   "node_modules"
 77 |   // ],
 78 | 
 79 |   // An array of file extensions your modules use
 80 |   // moduleFileExtensions: [
 81 |   //   "js",
 82 |   //   "mjs",
 83 |   //   "cjs",
 84 |   //   "jsx",
 85 |   //   "ts",
 86 |   //   "tsx",
 87 |   //   "json",
 88 |   //   "node"
 89 |   // ],
 90 | 
 91 |   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
 92 |   // moduleNameMapper: {},
 93 | 
 94 |   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
 95 |   // modulePathIgnorePatterns: [],
 96 | 
 97 |   // Activates notifications for test results
 98 |   // notify: false,
 99 | 
100 |   // An enum that specifies notification mode. Requires { notify: true }
101 |   // notifyMode: "failure-change",
102 | 
103 |   // A preset that is used as a base for Jest's configuration
104 |   // preset: undefined,
105 | 
106 |   // Run tests from one or more projects
107 |   // projects: undefined,
108 | 
109 |   // Use this configuration option to add custom reporters to Jest
110 |   // reporters: undefined,
111 | 
112 |   // Automatically reset mock state before every test
113 |   // resetMocks: false,
114 | 
115 |   // Reset the module registry before running each individual test
116 |   // resetModules: false,
117 | 
118 |   // A path to a custom resolver
119 |   // resolver: undefined,
120 | 
121 |   // Automatically restore mock state and implementation before every test
122 |   // restoreMocks: false,
123 | 
124 |   // The root directory that Jest should scan for tests and modules within
125 |   // rootDir: undefined,
126 | 
127 |   // A list of paths to directories that Jest should use to search for files in
128 |   // roots: [
129 |   //   "<rootDir>"
130 |   // ],
131 | 
132 |   // Allows you to use a custom runner instead of Jest's default test runner
133 |   // runner: "jest-runner",
134 | 
135 |   // The paths to modules that run some code to configure or set up the testing environment before each test
136 |   setupFiles: ["./jest.setup.js"],
137 | 
138 |   // A list of paths to modules that run some code to configure or set up the testing framework before each test
139 |   // setupFilesAfterEnv: [],
140 | 
141 |   // The number of seconds after which a test is considered as slow and reported as such in the results.
142 |   // slowTestThreshold: 5,
143 | 
144 |   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
145 |   // snapshotSerializers: [],
146 | 
147 |   // The test environment that will be used for testing
148 |   testEnvironment: "jsdom",
149 | 
150 |   // Options that will be passed to the testEnvironment
151 |   // testEnvironmentOptions: {},
152 | 
153 |   // Adds a location field to test results
154 |   // testLocationInResults: false,
155 | 
156 |   // The glob patterns Jest uses to detect test files
157 |   // testMatch: [
158 |   //   "**/__tests__/**/*.[jt]s?(x)",
159 |   //   "**/?(*.)+(spec|test).[tj]s?(x)"
160 |   // ],
161 | 
162 |   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
163 |   // testPathIgnorePatterns: [
164 |   //   "/node_modules/"
165 |   // ],
166 | 
167 |   // The regexp pattern or array of patterns that Jest uses to detect test files
168 |   // testRegex: [],
169 | 
170 |   // This option allows the use of a custom results processor
171 |   // testResultsProcessor: undefined,
172 | 
173 |   // This option allows use of a custom test runner
174 |   // testRunner: "jest-circus/runner",
175 | 
176 |   // A map from regular expressions to paths to transformers
177 |   // transform: undefined,
178 | 
179 |   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
180 |   // transformIgnorePatterns: [
181 |   //   "/node_modules/",
182 |   //   "\\.pnp\\.[^\\/]+$"
183 |   // ],
184 | 
185 |   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
186 |   // unmockedModulePathPatterns: undefined,
187 | 
188 |   // Indicates whether each individual test should be reported during the run
189 |   // verbose: undefined,
190 | 
191 |   // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
192 |   // watchPathIgnorePatterns: [],
193 | 
194 |   // Whether to use watchman for file crawling
195 |   // watchman: true,
196 | };
197 | 
198 | module.exports = config;
199 | 


--------------------------------------------------------------------------------
/jquery-ui.multidatespicker.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * MultiDatesPicker for jQuery UI
  3 |  * https://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI
  4 |  *
  5 |  * Copyright 2025, Luca Lauretta
  6 |  * Dual licensed under the MIT or GPL version 2 licenses.
  7 |  */
  8 | 
  9 | (function (factory) {
 10 |   if (typeof define === "function" && define.amd) {
 11 |     define(["jquery", "jquery-ui-dist"], factory);
 12 |   } else {
 13 |     factory(jQuery);
 14 |   }
 15 | })(function ($) {
 16 |   $.extend($.ui, { multiDatesPicker: { version: "1.6.9" } });
 17 | 
 18 |   $.fn.multiDatesPicker = function (method) {
 19 |     var mdp_arguments = arguments;
 20 |     var ret = this;
 21 |     var today_date = new Date();
 22 |     var day_zero = new Date(0);
 23 |     var mdp_events = {};
 24 | 
 25 |     function removeDate(date, type) {
 26 |       if (!type) type = "picked";
 27 |       date = dateConvert.call(this, date);
 28 |       for (var i = 0; i < this.multiDatesPicker.dates[type].length; i++)
 29 |         if (!methods.compareDates(this.multiDatesPicker.dates[type][i], date))
 30 |           return this.multiDatesPicker.dates[type].splice(i, 1).pop();
 31 |     }
 32 |     function removeIndex(index, type) {
 33 |       if (!type) type = "picked";
 34 |       return this.multiDatesPicker.dates[type].splice(index, 1).pop();
 35 |     }
 36 |     function addDate(date, type, no_sort) {
 37 |       if (!type) type = "picked";
 38 |       date = dateConvert.call(this, date);
 39 | 
 40 |       // @todo: use jQuery UI datepicker method instead
 41 |       date.setHours(0);
 42 |       date.setMinutes(0);
 43 |       date.setSeconds(0);
 44 |       date.setMilliseconds(0);
 45 | 
 46 |       if (methods.gotDate.call(this, date, type) === false) {
 47 |         this.multiDatesPicker.dates[type].push(date);
 48 |         if (!no_sort)
 49 |           this.multiDatesPicker.dates[type].sort(methods.compareDates);
 50 |       }
 51 |     }
 52 |     function sortDates(type) {
 53 |       if (!type) type = "picked";
 54 |       this.multiDatesPicker.dates[type].sort(methods.compareDates);
 55 |     }
 56 |     function dateConvert(date, desired_type, date_format) {
 57 |       if (!desired_type) desired_type = "object"; /*
 58 | 			if(!date_format && (typeof date == 'string')) {
 59 | 				date_format = $(this).datepicker('option', 'dateFormat');
 60 | 				if(!date_format) date_format = $.datepicker._defaults.dateFormat;
 61 | 			}
 62 | 			*/
 63 |       return methods.dateConvert.call(this, date, desired_type, date_format);
 64 |     }
 65 | 
 66 |     var methods = {
 67 |       init: function (options) {
 68 |         var $this = $(this);
 69 |         this.multiDatesPicker.changed = false;
 70 | 
 71 |         var mdp_events = {
 72 |           beforeShow: function (input, inst) {
 73 |             this.multiDatesPicker.changed = false;
 74 |             if (this.multiDatesPicker.originalBeforeShow)
 75 |               return this.multiDatesPicker.originalBeforeShow.call(
 76 |                 this,
 77 |                 input,
 78 |                 inst,
 79 |               );
 80 |           },
 81 |           onSelect: function (dateText, inst) {
 82 |             var $this = $(this);
 83 |             this.multiDatesPicker.changed = true;
 84 | 
 85 |             if (dateText) {
 86 |               $this.multiDatesPicker("toggleDate", dateText);
 87 |               this.multiDatesPicker.changed = true;
 88 |               // @todo: this will be optimized when I'll move methods to the singleton.
 89 |             }
 90 | 
 91 |             if (
 92 |               this.multiDatesPicker.mode == "normal" &&
 93 |               this.multiDatesPicker.pickableRange
 94 |             ) {
 95 |               if (this.multiDatesPicker.dates.picked.length > 0) {
 96 |                 var min_date = this.multiDatesPicker.dates.picked[0],
 97 |                   max_date = new Date(min_date.getTime());
 98 | 
 99 |                 methods.sumDays(
100 |                   max_date,
101 |                   this.multiDatesPicker.pickableRange - 1,
102 |                 );
103 | 
104 |                 // counts the number of disabled dates in the range
105 |                 if (this.multiDatesPicker.adjustRangeToDisabled) {
106 |                   var c_disabled,
107 |                     disabled = this.multiDatesPicker.dates.disabled.slice(0);
108 |                   do {
109 |                     c_disabled = 0;
110 |                     for (var i = 0; i < disabled.length; i++) {
111 |                       if (disabled[i].getTime() <= max_date.getTime()) {
112 |                         if (
113 |                           min_date.getTime() <= disabled[i].getTime() &&
114 |                           disabled[i].getTime() <= max_date.getTime()
115 |                         ) {
116 |                           c_disabled++;
117 |                         }
118 |                         disabled.splice(i, 1);
119 |                         i--;
120 |                       }
121 |                     }
122 |                     max_date.setDate(max_date.getDate() + c_disabled);
123 |                   } while (c_disabled != 0);
124 |                 }
125 | 
126 |                 if (
127 |                   this.multiDatesPicker.maxDate &&
128 |                   max_date > this.multiDatesPicker.maxDate
129 |                 )
130 |                   max_date = this.multiDatesPicker.maxDate;
131 | 
132 |                 $this
133 |                   .datepicker("option", "minDate", min_date)
134 |                   .datepicker("option", "maxDate", max_date);
135 |               } else {
136 |                 $this
137 |                   .datepicker(
138 |                     "option",
139 |                     "minDate",
140 |                     this.multiDatesPicker.minDate,
141 |                   )
142 |                   .datepicker(
143 |                     "option",
144 |                     "maxDate",
145 |                     this.multiDatesPicker.maxDate,
146 |                   );
147 |               }
148 |             }
149 | 
150 |             if (this.multiDatesPicker.originalOnSelect && dateText)
151 |               this.multiDatesPicker.originalOnSelect.call(this, dateText, inst);
152 |           },
153 |           beforeShowDay: function (date) {
154 |             var $this = $(this),
155 |               gotThisDate = $this.multiDatesPicker("gotDate", date) !== false,
156 |               isDisabledCalendar = $this.datepicker("option", "disabled"),
157 |               isDisabledDate =
158 |                 $this.multiDatesPicker("gotDate", date, "disabled") !== false,
159 |               areAllSelected =
160 |                 this.multiDatesPicker.maxPicks <=
161 |                 this.multiDatesPicker.dates.picked.length;
162 | 
163 |             var bsdReturn = [true, "", null];
164 |             if (this.multiDatesPicker.originalBeforeShowDay)
165 |               bsdReturn = this.multiDatesPicker.originalBeforeShowDay.call(
166 |                 this,
167 |                 date,
168 |               );
169 | 
170 |             bsdReturn[1] = gotThisDate
171 |               ? "ui-state-highlight " + bsdReturn[1]
172 |               : bsdReturn[1];
173 |             bsdReturn[0] =
174 |               bsdReturn[0] &&
175 |               !(
176 |                 isDisabledCalendar ||
177 |                 isDisabledDate ||
178 |                 (areAllSelected && !bsdReturn[1])
179 |               );
180 |             return bsdReturn;
181 |           },
182 |         };
183 | 
184 |         // value have to be extracted before datepicker is initiated
185 |         if ($this.val()) var inputDates = $this.val();
186 | 
187 |         if (options) {
188 |           // value have to be extracted before datepicker is initiated
189 |           //if(options.altField) var inputDates = $(options.altField).val();
190 |           if (options.separator)
191 |             this.multiDatesPicker.separator = options.separator;
192 |           if (!this.multiDatesPicker.separator)
193 |             this.multiDatesPicker.separator = ", ";
194 | 
195 |           this.multiDatesPicker.originalBeforeShow = options.beforeShow;
196 |           this.multiDatesPicker.originalOnSelect = options.onSelect;
197 |           this.multiDatesPicker.originalBeforeShowDay = options.beforeShowDay;
198 |           this.multiDatesPicker.originalOnClose = options.onClose;
199 | 
200 |           // datepicker init
201 |           $this.datepicker(options);
202 | 
203 |           this.multiDatesPicker.minDate = $.datepicker._determineDate(
204 |             this,
205 |             options.minDate,
206 |             null,
207 |           );
208 |           this.multiDatesPicker.maxDate = $.datepicker._determineDate(
209 |             this,
210 |             options.maxDate,
211 |             null,
212 |           );
213 |           if (options.addDates) methods.addDates.call(this, options.addDates);
214 | 
215 |           if (options.addDisabledDates)
216 |             methods.addDates.call(this, options.addDisabledDates, "disabled");
217 | 
218 |           methods.setMode.call(this, options);
219 |         } else {
220 |           $this.datepicker();
221 |         }
222 |         $this.datepicker("option", mdp_events);
223 | 
224 |         // adds any dates found in the input or alt field
225 |         if (inputDates) $this.multiDatesPicker("value", inputDates);
226 | 
227 |         // generates the new string of added dates
228 |         var inputs_values = $this.multiDatesPicker("value");
229 | 
230 |         // fills the input field back with all the dates in the calendar
231 |         $this.val(inputs_values).trigger("change");
232 | 
233 |         // Fixes the altField filled with defaultDate by default
234 |         var altFieldOption = $this.datepicker("option", "altField");
235 |         if (altFieldOption)
236 |           $(altFieldOption).val(inputs_values).trigger("change");
237 | 
238 |         // Updates the calendar view
239 |         $this.datepicker("refresh");
240 |       },
241 |       compareDates: function (date1, date2) {
242 |         date1 = dateConvert.call(this, date1);
243 |         date2 = dateConvert.call(this, date2);
244 |         // return > 0 means date1 is later than date2
245 |         // return == 0 means date1 is the same day as date2
246 |         // return < 0 means date1 is earlier than date2
247 |         var diff = date1.getFullYear() - date2.getFullYear();
248 |         if (!diff) {
249 |           diff = date1.getMonth() - date2.getMonth();
250 |           if (!diff) diff = date1.getDate() - date2.getDate();
251 |         }
252 |         return diff;
253 |       },
254 |       sumDays: function (date, n_days) {
255 |         var origDateType = typeof date;
256 |         obj_date = dateConvert.call(this, date);
257 |         obj_date.setDate(obj_date.getDate() + n_days);
258 |         return dateConvert.call(this, obj_date, origDateType);
259 |       },
260 |       dateConvert: function (date, desired_format, dateFormat) {
261 |         var from_format = typeof date;
262 |         var $this = $(this);
263 | 
264 |         if (from_format == desired_format) {
265 |           if (from_format == "object") {
266 |             try {
267 |               date.getTime();
268 |             } catch (e) {
269 |               $.error("Received date is in a non supported format!");
270 |               return false;
271 |             }
272 |           }
273 |           return date;
274 |         }
275 | 
276 |         if (typeof date == "undefined") date = new Date(0);
277 | 
278 |         if (
279 |           desired_format != "string" &&
280 |           desired_format != "object" &&
281 |           desired_format != "number"
282 |         )
283 |           $.error('Date format "' + desired_format + '" not supported!');
284 | 
285 |         if (!dateFormat) {
286 |           // thanks to bibendus83 -> http://sourceforge.net/tracker/index.php?func=detail&aid=3213174&group_id=358205&atid=1495382
287 |           var dp_dateFormat = $this.datepicker("option", "dateFormat");
288 |           if (dp_dateFormat) {
289 |             dateFormat = dp_dateFormat;
290 |           } else {
291 |             dateFormat = $.datepicker._defaults.dateFormat;
292 |           }
293 |         }
294 | 
295 |         // converts to object as a neutral format
296 |         switch (from_format) {
297 |           case "object":
298 |             break;
299 |           case "string":
300 |             date = $.datepicker.parseDate(dateFormat, date);
301 |             break;
302 |           case "number":
303 |             date = new Date(date);
304 |             break;
305 |           default:
306 |             $.error(
307 |               'Conversion from "' +
308 |                 from_format +
309 |                 '" format not allowed on jQuery.multiDatesPicker',
310 |             );
311 |         }
312 |         // then converts to the desired format
313 |         switch (desired_format) {
314 |           case "object":
315 |             return date;
316 |           case "string":
317 |             return $.datepicker.formatDate(dateFormat, date);
318 |           case "number":
319 |             return date.getTime();
320 |           default:
321 |             return $.error(
322 |               'Conversion to "' +
323 |                 desired_format +
324 |                 '" format not allowed on jQuery.multiDatesPicker',
325 |             );
326 |         }
327 |       },
328 |       gotDate: function (date, type) {
329 |         if (!type) type = "picked";
330 |         for (var i = 0; i < this.multiDatesPicker.dates[type].length; i++) {
331 |           if (
332 |             methods.compareDates.call(
333 |               this,
334 |               this.multiDatesPicker.dates[type][i],
335 |               date,
336 |             ) === 0
337 |           ) {
338 |             return i;
339 |           }
340 |         }
341 |         return false;
342 |       },
343 |       value: function (value) {
344 |         if (value && typeof value == "string") {
345 |           methods.addDates.call(
346 |             this,
347 |             value.split(this.multiDatesPicker.separator),
348 |           );
349 |         } else {
350 |           var dates = methods.getDates.call(this, "string");
351 |           return dates.length
352 |             ? dates.join(this.multiDatesPicker.separator)
353 |             : "";
354 |         }
355 |       },
356 |       getDates: function (format, type) {
357 |         if (!format) format = "string";
358 |         if (!type) type = "picked";
359 |         switch (format) {
360 |           case "object":
361 |             return this.multiDatesPicker.dates[type];
362 |           case "string":
363 |           case "number":
364 |             var o_dates = [];
365 |             for (var i = 0; i < this.multiDatesPicker.dates[type].length; i++)
366 |               o_dates.push(
367 |                 dateConvert.call(
368 |                   this,
369 |                   this.multiDatesPicker.dates[type][i],
370 |                   format,
371 |                 ),
372 |               );
373 |             return o_dates;
374 | 
375 |           default:
376 |             $.error('Format "' + format + '" not supported!');
377 |         }
378 |       },
379 |       addDates: function (dates, type) {
380 |         if (!dates.length) return $.error("Empty array of dates received.");
381 | 
382 |         if (!type) type = "picked";
383 | 
384 |         switch (typeof dates) {
385 |           case "object":
386 |           case "array":
387 |             for (var i = 0; i < dates.length; i++)
388 |               addDate.call(this, dates[i], type, true);
389 |             return sortDates.call(this, type);
390 |           default:
391 |             return addDate.call(this, dates, type);
392 |         }
393 |       },
394 |       removeDates: function (dates, type) {
395 |         if (!type) type = "picked";
396 |         var removed = [];
397 |         if (Object.prototype.toString.call(dates) === "[object Array]") {
398 |           dates.sort(function (a, b) {
399 |             return b - a;
400 |           });
401 |           for (var i = 0; i < dates.length; i++) {
402 |             removed.push(removeDate.call(this, dates[i], type));
403 |           }
404 |         } else {
405 |           removed.push(removeDate.call(this, dates, type));
406 |         }
407 |         return removed;
408 |       },
409 |       removeIndexes: function (indexes, type) {
410 |         if (!type) type = "picked";
411 |         var removed = [];
412 |         if (Object.prototype.toString.call(indexes) === "[object Array]") {
413 |           indexes.sort(function (a, b) {
414 |             return b - a;
415 |           });
416 |           for (var i = 0; i < indexes.length; i++) {
417 |             removed.push(removeIndex.call(this, indexes[i], type));
418 |           }
419 |         } else {
420 |           removed.push(removeIndex.call(this, indexes, type));
421 |         }
422 |         return removed;
423 |       },
424 |       resetDates: function (type) {
425 |         if (!type) type = "picked";
426 |         this.multiDatesPicker.dates[type] = [];
427 |       },
428 |       toggleDate: function (date, type) {
429 |         if (!type) type = "picked";
430 | 
431 |         switch (this.multiDatesPicker.mode) {
432 |           case "daysRange":
433 |             this.multiDatesPicker.dates[type] = []; // deletes all picked/disabled dates
434 |             var end = this.multiDatesPicker.autoselectRange[1];
435 |             var begin = this.multiDatesPicker.autoselectRange[0];
436 |             if (end < begin) {
437 |               // swap
438 |               var tmp = end;
439 |               end = begin;
440 |               begin = tmp;
441 |             }
442 |             for (var i = begin; i < end; i++)
443 |               methods.addDates.call(
444 |                 this,
445 |                 methods.sumDays.call(this, date, i),
446 |                 type,
447 |               );
448 |             break;
449 |           default:
450 |             if (methods.gotDate.call(this, date) === false)
451 |               // adds dates
452 |               methods.addDates.call(this, date, type); // removes dates
453 |             else methods.removeDates.call(this, date, type);
454 |             break;
455 |         }
456 |       },
457 |       setMode: function (options) {
458 |         var $this = $(this);
459 |         if (options.mode) this.multiDatesPicker.mode = options.mode;
460 | 
461 |         switch (this.multiDatesPicker.mode) {
462 |           case "normal":
463 |             for (var option in options)
464 |               switch (option) {
465 |                 case "maxPicks":
466 |                 case "minPicks":
467 |                 case "pickableRange":
468 |                 case "adjustRangeToDisabled":
469 |                   this.multiDatesPicker[option] = options[option];
470 |                   break;
471 |                 //default: $.error('Option ' + option + ' ignored for mode "'.options.mode.'".');
472 |               }
473 |             break;
474 |           case "daysRange":
475 |           case "weeksRange":
476 |             var mandatory = 1;
477 |             for (option in options)
478 |               switch (option) {
479 |                 case "autoselectRange":
480 |                   mandatory--;
481 |                 case "pickableRange":
482 |                 case "adjustRangeToDisabled":
483 |                   this.multiDatesPicker[option] = options[option];
484 |                   break;
485 |                 //default: $.error('Option ' + option + ' does not exist for setMode on jQuery.multiDatesPicker');
486 |               }
487 |             if (mandatory > 0) $.error("Some mandatory options not specified!");
488 |             break;
489 |         }
490 | 
491 |         /*
492 | 				if(options.pickableRange) {
493 | 					$this.datepicker("option", "maxDate", options.pickableRange);
494 | 					$this.datepicker("option", "minDate", this.multiDatesPicker.minDate);
495 | 				}
496 | 				*/
497 | 
498 |         if (mdp_events.onSelect) mdp_events.onSelect();
499 |       },
500 |       destroy: function () {
501 |         this.multiDatesPicker = null;
502 |         $(this).datepicker("destroy");
503 |       },
504 |     };
505 | 
506 |     this.each(function () {
507 |       var $this = $(this);
508 |       if (!this.multiDatesPicker) {
509 |         this.multiDatesPicker = {
510 |           dates: {
511 |             picked: [],
512 |             disabled: [],
513 |           },
514 |           mode: "normal",
515 |           adjustRangeToDisabled: true,
516 |         };
517 |       }
518 | 
519 |       if (methods[method]) {
520 |         var exec_result = methods[method].apply(
521 |           this,
522 |           Array.prototype.slice.call(mdp_arguments, 1),
523 |         );
524 |         switch (method) {
525 |           case "removeDates":
526 |           case "removeIndexes":
527 |           case "resetDates":
528 |           case "toggleDate":
529 |           case "addDates":
530 |             var altField = $this.datepicker("option", "altField");
531 |             // @todo: should use altFormat for altField
532 |             var dates_string = methods.value.call(this);
533 |             if (altField !== undefined && altField != "") {
534 |               $(altField).val(dates_string).trigger("change");
535 |             }
536 |             $this.val(dates_string).trigger("change");
537 | 
538 |             $.datepicker._refreshDatepicker(this);
539 |         }
540 |         switch (method) {
541 |           case "removeDates":
542 |           case "getDates":
543 |           case "gotDate":
544 |           case "sumDays":
545 |           case "compareDates":
546 |           case "dateConvert":
547 |           case "value":
548 |             ret = exec_result;
549 |         }
550 |         return exec_result;
551 |       } else if (typeof method === "object" || !method) {
552 |         return methods.init.apply(this, mdp_arguments);
553 |       }
554 |       return $.error(
555 |         "Method " + method + " does not exist on jQuery.multiDatesPicker",
556 |       );
557 |     });
558 | 
559 |     return ret;
560 |   };
561 | 
562 |   var PROP_NAME = "multiDatesPicker";
563 |   var dpuuid = new Date().getTime();
564 |   var instActive;
565 | 
566 |   $.multiDatesPicker = { version: false };
567 |   //$.multiDatesPicker = new MultiDatesPicker(); // singleton instance
568 |   $.multiDatesPicker.initialized = false;
569 |   $.multiDatesPicker.uuid = new Date().getTime();
570 |   $.multiDatesPicker.version = $.ui.multiDatesPicker.version;
571 | 
572 |   // allows MDP not to hide everytime a date is picked
573 |   $.multiDatesPicker._hideDatepicker = $.datepicker._hideDatepicker;
574 |   $.datepicker._hideDatepicker = function (input) {
575 |     const inst = this._curInst;
576 |     if (!inst || (input && inst !== $.data(input, "datepicker"))) {
577 |       return;
578 |     }
579 | 
580 |     var target = this._curInst.input[0];
581 |     var mdp = target.multiDatesPicker;
582 |     if (!mdp || (this._curInst.inline === false && !mdp.changed)) {
583 |       return $.multiDatesPicker._hideDatepicker.apply(this, arguments);
584 |     } else {
585 |       mdp.changed = false;
586 |       $.datepicker._refreshDatepicker(target);
587 |       return;
588 |     }
589 |   };
590 | 
591 |   // Workaround for #4055
592 |   // Add another global to avoid noConflict issues with inline event handlers
593 |   window["DP_jQuery_" + dpuuid] = $;
594 | });
595 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5 |     <link rel="icon" type="image/png" href="mdp-icon.png" />
  6 |     <title>MultiDatesPicker for jQuery UI</title>
  7 |     <meta
  8 |       name="description"
  9 |       content="MDP is a little plugin that enables jQuery UI calendar to manage multiple dates."
 10 |     />
 11 |     <meta
 12 |       name="keywords"
 13 |       content="Multiple Dates Picker, jQuery, jQuery UI, javascript, calendar, Luca Lauretta, dubrox"
 14 |     />
 15 |     <meta name="author" content="Luca Lauretta aka dubrox" />
 16 | 
 17 |     <link
 18 |       rel="stylesheet"
 19 |       href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
 20 |       integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
 21 |       crossorigin="anonymous"
 22 |     />
 23 |     <script
 24 |       src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
 25 |       integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
 26 |       crossorigin="anonymous"
 27 |     ></script>
 28 |     <script
 29 |       src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
 30 |       integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
 31 |       crossorigin="anonymous"
 32 |     ></script>
 33 |     <script
 34 |       src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
 35 |       integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
 36 |       crossorigin="anonymous"
 37 |     ></script>
 38 |     <script async defer src="https://buttons.github.io/buttons.js"></script>
 39 |     <script type="text/javascript">
 40 |       $(function () {
 41 |         // Documentation
 42 |         $("i:contains(type)").attr(
 43 |           "title",
 44 |           '[Optional] accepted values are: "allowed" [default]; "disabled".',
 45 |         );
 46 |         $("i:contains(format)").attr(
 47 |           "title",
 48 |           '[Optional] accepted values are: "string" [default]; "object".',
 49 |         );
 50 |         $("#how-to")
 51 |           .find("h4")
 52 |           .each(function () {
 53 |             var $this = $(this);
 54 |             $this.wrap('<a href="#' + $this.closest("li").attr("id") + '" />');
 55 |           });
 56 |         $("#demos")
 57 |           .find(".demo")
 58 |           .each(function () {
 59 |             var $this = $(this);
 60 |             $this
 61 |               .find("h3")
 62 |               .wrapInner('<a href="#' + $this.attr("id") + '" />');
 63 |           });
 64 |       });
 65 |     </script>
 66 |     <style>
 67 |       h2 {
 68 |         margin-top: 2em;
 69 |       }
 70 |       #demos-list iframe {
 71 |         border: none;
 72 |         width: 100%;
 73 |         height: 300px;
 74 |       }
 75 |     </style>
 76 |   </head>
 77 |   <body>
 78 |     <div id="page" class="container">
 79 |       <div class="jumbotron">
 80 |         <h1 id="mdp-title" class="display-3">MultiDatesPicker for jQuery UI</h1>
 81 |         <p class="lead">
 82 |           MDP is a little plugin that enables jQuery UI calendar to manage
 83 |           multiple dates with the following features:
 84 |         </p>
 85 |         <ul>
 86 |           <li>Select date ranges.</li>
 87 |           <li>Pick multiple dates not in sequence.</li>
 88 |           <li>Define a maximum number of pickable dates.</li>
 89 |           <li>
 90 |             Define a range <code>X</code> days from where it is possible to
 91 |             select <code>Y</code> dates.
 92 |           </li>
 93 |           <li>Define unavailable dates.</li>
 94 |         </ul>
 95 | 
 96 |         <div id="share">
 97 |           <a
 98 |             class="github-button"
 99 |             href="https://github.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI"
100 |             data-style="mega"
101 |             data-count-href="/dubrox/Multiple-Dates-Picker-for-jQuery-UI/stargazers"
102 |             data-count-api="/repos/dubrox/Multiple-Dates-Picker-for-jQuery-UI#stargazers_count"
103 |             data-count-aria-label="# stargazers on GitHub"
104 |             aria-label="Star dubrox/Multiple-Dates-Picker-for-jQuery-UI on GitHub"
105 |             >Star</a
106 |           >
107 | 
108 |           <a
109 |             href="http://twitter.com/share"
110 |             class="twitter-share-button"
111 |             data-count="vertical"
112 |             data-url="http://multidatespickr.sourceforge.net/"
113 |             data-text="MultiDatesPicker for jQuery UI"
114 |             >Tweet</a
115 |           >
116 |           <script
117 |             type="text/javascript"
118 |             src="http://platform.twitter.com/widgets.js"
119 |           ></script>
120 |         </div>
121 |       </div>
122 | 
123 |       <div class="row">
124 |         <div id="install" class="col-md-6">
125 |           <h2>Install</h2>
126 |           <p>
127 |             Use <code>bower</code>, <code>npm</code>, <code>yarn</code> or
128 |             download the
129 |             <a
130 |               href="https://github.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/archive/latest.zip"
131 |               >zip</a
132 |             >. Refer to the
133 |             <a
134 |               href="https://github.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/"
135 |               >README</a
136 |             >
137 |             for the installation details.
138 |           </p>
139 |         </div>
140 | 
141 |         <div id="report" class="col-md-6">
142 |           <h2>Bugs or features request?</h2>
143 |           <p>
144 |             Please use the issue tracker on
145 |             <a
146 |               href="https://github.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/issues"
147 |               >GitHub Issues</a
148 |             >
149 |           </p>
150 |         </div>
151 |       </div>
152 | 
153 |       <div id="how-to">
154 |         <h2>How to use it</h2>
155 |         <p>
156 |           Being an extension to jQuery UI DatePicker you need to include both
157 |           jQuery and jQuery UI (with datepicker module included!) javascript
158 |           files to your HTML page, and right after that, include
159 |           MultiDatesPicker.
160 |         </p>
161 |         <p>
162 |           To apply it to an element, do it the same way as you would do with
163 |           jQuery UI datepicker, but write multiDatesPicker instead of
164 |           datepicker:
165 |           <br />
166 |           <code class="prettyprint"
167 |             >$(selector).multiDatesPicker(options_for_datepicker_and_mdp);</code
168 |           >
169 |         </p>
170 | 
171 |         <h3>MultiDatesPicker specific options</h3>
172 |         <ul class="list-unstyled row">
173 |           <li id="option-addDates" class="col-md-6">
174 |             <h4>addDates</h4>
175 |             <p>
176 |               Adds an array of dates specified in a string, milliseconds or
177 |               javascript date object format.
178 |               <br />
179 |               <em
180 |                 >NOTE: the string format you should pass to multiDatePicker
181 |                 depends on the localization of datepicker, see this page for
182 |                 more infos on how to configure it.</em
183 |               >
184 |             </p>
185 |           </li>
186 |           <li id="option-addDisabledDates" class="col-md-6">
187 |             <h4>addDisabledDates</h4>
188 |             <p>
189 |               Disables an array of dates specified in a string, milliseconds or
190 |               javascript date object format.
191 |               <br />
192 |               <em
193 |                 >NOTE: the string format you should pass to multiDatePicker
194 |                 depends on the localization of datepicker, see this page for
195 |                 more infos on how to configure it.</em
196 |               >
197 |             </p>
198 |           </li>
199 |           <li id="option-separator" class="col-md-6">
200 |             <h4>separator</h4>
201 |             <p>
202 |               Allows to specify a custom separator for the string representation
203 |               of the dates selected (defaults ", ").
204 |             </p>
205 |           </li>
206 |           <li id="option-mode" class="col-md-6">
207 |             <h4>mode</h4>
208 |             <p>
209 |               Allows to enable a different MDP modes: 'normal' (default) or
210 |               'daysRange'.
211 |             </p>
212 |             <h4>normal mode options</h4>
213 |             <ul>
214 |               <li id="option-maxPicks">
215 |                 <h4>maxPicks</h4>
216 |                 <p>
217 |                   Number of dates allowed to be selected (<a
218 |                     href="#demo-max-picks"
219 |                     >see demo</a
220 |                   >).
221 |                 </p>
222 |               </li>
223 |               <li id="option-pickableRange">
224 |                 <h4>pickableRange</h4>
225 |                 <p>
226 |                   Limits the range of dates available for selection to a certain
227 |                   number of days from the first selection (<a
228 |                     href="#demo-pickable-range"
229 |                     >see demo</a
230 |                   >).
231 |                 </p>
232 |               </li>
233 |               <li id="option-adjustRangeToDisabled">
234 |                 <h4>adjustRangeToDisabled</h4>
235 |                 <p>
236 |                   A boolean that allows to maintain the number of pickable days
237 |                   even in case there are disabled days within the range
238 |                   specified in 'pickableRange'.<br />
239 |                   See the <a href="#demo-pickable-range">corresponding demo</a>
240 |                   and try toggling this flag to see the results.
241 |                 </p>
242 |               </li>
243 |             </ul>
244 |             <h4>daysRange mode options</h4>
245 |             <ul>
246 |               <li id="option-autoselectRange">
247 |                 <h4>autoselectRange</h4>
248 |                 <p>
249 |                   Array of two integers: the first sets the beginning of the
250 |                   range relative to the date clicked on; the last sets the end
251 |                   of the range. Both numbers may be negative (<a
252 |                     href="#demo-days-range"
253 |                     >see demo</a
254 |                   >).
255 |                 </p>
256 |               </li>
257 |             </ul>
258 |           </li>
259 |         </ul>
260 | 
261 |         <h3>Available methods:</h3>
262 |         <ul class="list-unstyled row">
263 |           <li id="method-compareDates" class="col-md-6">
264 |             <h4>compareDates( date1, date2 )</h4>
265 |             <p>
266 |               Compares two dates returning 1, 0 or -1 if date2 is greater, equal
267 |               or smaller than date1 respectively.
268 |             </p>
269 |           </li>
270 |           <li id="method-gotDate" class="col-md-6">
271 |             <h4>gotDate( date, <i>type</i> )</h4>
272 |             <p>
273 |               Returns the index of the date in the dates array, or false in case
274 |               that date is not found.
275 |               <br />
276 |               The parameter dates can be a string or a date object.
277 |             </p>
278 |             <p>
279 |               Example:
280 |               <code class="prettyprint"
281 |                 >$('#simpliest-usage').multiDatesPicker('gotDate', new
282 |                 Date());</code
283 |               >
284 |             </p>
285 |           </li>
286 |           <li id="method-addDates" class="col-md-6">
287 |             <h4>addDates( dates, <i>type</i> )</h4>
288 |             <p>
289 |               Adds one or more dates to the calendar.
290 |               <br />
291 |               The parameter dates can be a string, a date object or an array (of
292 |               strings or javascript date objects).
293 |             </p>
294 |             <p>
295 |               Example adding today:
296 |               <code class="prettyprint"
297 |                 >$('#simpliest-usage').multiDatesPicker('addDates', new
298 |                 Date());</code
299 |               >
300 |             </p>
301 |           </li>
302 |           <li id="method-removeIndexes" class="col-md-6">
303 |             <h4>removeIndexes( indexes, <i>type</i> )</h4>
304 |             <p>
305 |               Removes one or more dates from the dates array using their
306 |               indexes.
307 |               <br />
308 |               The parameter indexes can be an integer or an array of integers.
309 |             </p>
310 |             <p>
311 |               Example removing first date:
312 |               <code class="prettyprint"
313 |                 >$('#simpliest-usage').multiDatesPicker('removeIndexes',
314 |                 0);</code
315 |               >
316 |             </p>
317 |           </li>
318 |           <li id="method-removeDates" class="col-md-6">
319 |             <h4>removeDates( dates, <i>type</i> )</h4>
320 |             <p>
321 |               Removes one or more dates from the dates array using their dates.
322 |               <br />
323 |               The parameter dates can be a single value or an array of
324 |               milliseconds, strings or date object.
325 |             </p>
326 |             <p>
327 |               Example removing today date:
328 |               <code class="prettyprint"
329 |                 >$('#simpliest-usage').multiDatesPicker('removeDates', new
330 |                 Date());</code
331 |               >
332 |             </p>
333 |           </li>
334 |           <li id="method-resetDates" class="col-md-6">
335 |             <h4>resetDates( <i>type</i> )</h4>
336 |             <p>
337 |               Removes all dates.
338 |               <br />
339 |               The array of dates to reset can be of <i>type</i> 'picked'
340 |               (default) or 'disabled'.
341 |             </p>
342 |             <p>
343 |               Example resetting disabled dates:
344 |               <code class="prettyprint"
345 |                 >$('#simpliest-usage').multiDatesPicker('resetDates',
346 |                 'disabled');</code
347 |               >
348 |             </p>
349 |           </li>
350 |           <li id="method-toggleDate" class="col-md-6">
351 |             <h4>toggleDate( date, <i>type</i> )</h4>
352 |             <p>
353 |               Adds/removes a single date from the calendar.
354 |               <br />
355 |               The date can be passed as string or as javascript date object.
356 |             </p>
357 |             <p>
358 |               Example toggling today:
359 |               <code class="prettyprint"
360 |                 >$('#simpliest-usage').multiDatesPicker('toggleDate', new
361 |                 Date());</code
362 |               >
363 |             </p>
364 |           </li>
365 |           <li id="method-getDates" class="col-md-6">
366 |             <h4>getDates( <i>format</i>, <i>type</i> )</h4>
367 |             <p>
368 |               Retrives the array of dates associated with the multiDatesPicker
369 |               in the specified format: "string" (default) for localized string
370 |               format, or "object" for javascript date object format.
371 |             </p>
372 |             <p>
373 |               Example:
374 |               <code class="prettyprint"
375 |                 >var dates =
376 |                 $('#simpliest-usage').multiDatesPicker('getDates');</code
377 |               >
378 |             </p>
379 |           </li>
380 |           <li id="method-value" class="col-md-6">
381 |             <h4>value( <i>string</i> )</h4>
382 |             <p>
383 |               If no parameter is passed, returns the string value that would be
384 |               used in input elements. Otherwise parses the string for dates to
385 |               add.
386 |             </p>
387 |             <p>
388 |               Get Example:
389 |               <code class="prettyprint"
390 |                 >var dates =
391 |                 $('#simpliest-usage').multiDatesPicker('value');</code
392 |               >
393 |             </p>
394 |             <p>
395 |               Set Example:
396 |               <code class="prettyprint"
397 |                 >$('#simpliest-usage').multiDatesPicker('value', '2/19/1985,
398 |                 11/14/2009');</code
399 |               >
400 |             </p>
401 |           </li>
402 |           <li id="method-destroy" class="col-md-6">
403 |             <h4>destroy()</h4>
404 |             <p>Destroys the MDP and Datepicker instances on the element.</p>
405 |             <p>
406 |               Example:
407 |               <code class="prettyprint"
408 |                 >$('#simpliest-usage').multiDatesPicker('destroy');</code
409 |               >
410 |             </p>
411 |           </li>
412 |         </ul>
413 |       </div>
414 | 
415 |       <div id="use_cases">
416 |         <h2>Use cases</h2>
417 |         <p>You can find MDP implemented in the following sites:</p>
418 |         <ul>
419 |           <li>
420 |             <a href="http://avisooportunoexpress.mx">avisooportunoexpress.mx</a>
421 |             <br />
422 |             A Mexican website developed by me, aimed to sell advertisements on
423 |             <a href="http://www.eluniversal.com.mx">El Universal CPN</a>
424 |             mexican newspaper products.
425 |           </li>
426 |         </ul>
427 |         <p>
428 |           If you're using MDP in your site and would like to share it, simply
429 |           <a href="#contactme">contact me</a>. You'd get free ad from here and
430 |           we get more examples of implementation from you :)
431 |         </p>
432 |       </div>
433 | 
434 |       <div id="demos">
435 |         <h2>Demos</h2>
436 |         <p>
437 |           Here are some demos for you to understand how it works and what you
438 |           can obtain with it.<br />
439 |           To see how it is implemented simply check the source code of this
440 |           page: I've tried to keep the code simple and clear :)
441 |         </p>
442 |         <ul id="demos-list" class="list-unstyled row">
443 |           <li id="demo-simple" class="demo col-md-4">
444 |             <h3>Simplest usage</h3>
445 |             <iframe src="demos/?demo=simple"></iframe>
446 |             <p class="description">
447 |               Just apply the plugin to an HTML element and you're ready to
448 |               select multiple dates :)
449 |             </p>
450 |           </li>
451 | 
452 |           <li id="demo-custom-format" class="demo col-md-4">
453 |             <h3>Custom date format</h3>
454 |             <iframe src="demos/?demo=custom-date-format"></iframe>
455 |             <p class="description">
456 |               Same as previous example, but using custom date formats and custom
457 |               default day.
458 |             </p>
459 |           </li>
460 | 
461 |           <li id="demo-pre-select-dates" class="demo col-md-4">
462 |             <h3>Pre-select dates</h3>
463 |             <iframe src="demos/?demo=preselect-dates"></iframe>
464 |             <p class="description">
465 |               The name says it all: you can preselect some dates specifying them
466 |               in an array.<br />
467 |               Dates in the array can be a mix of object date and string dates.
468 |             </p>
469 |           </li>
470 | 
471 |           <li id="demo-disable-dates" class="demo col-md-4">
472 |             <h3>Disable dates</h3>
473 |             <iframe src="demos/?demo=disable-dates"></iframe>
474 |             <p class="description">
475 |               Again, the name says it all: you can specify some dates to
476 |               disable.<br />
477 |               Dates in the array can be a mix of object date and string dates.
478 |             </p>
479 |           </li>
480 | 
481 |           <li id="demo-disable-calendar" class="demo col-md-4">
482 |             <h3>Disable calendar</h3>
483 |             <iframe src="demos/?demo=disable-calendar"></iframe>
484 |             <p class="description">Disable a calendar picking functionality.</p>
485 |           </li>
486 | 
487 |           <li id="demo-alt-field" class="demo col-md-4">
488 |             <h3>Using altField</h3>
489 |             <iframe src="demos/?demo=alt-field"></iframe>
490 |             <p class="description">
491 |               A way to have a calendar always displayed and a field that fills
492 |               with selected dates.
493 |             </p>
494 |           </li>
495 | 
496 |           <li id="demo-max-picks" class="demo col-md-4">
497 |             <h3>Set maximum picks</h3>
498 |             <iframe src="demos/?demo=max-picks"></iframe>
499 |             <p class="description">
500 |               Set the maximum number of dates that can be picked.
501 |             </p>
502 |           </li>
503 | 
504 |           <li id="demo-pickable-range" class="demo col-md-4">
505 |             <h3>Use pickableRange and adjustRangeToDisabled</h3>
506 |             <iframe src="demos/?demo=pickable-range"></iframe>
507 |             <p class="description">
508 |               Define a range of dates to be allowed after the first date have
509 |               been picked.<br />
510 |               Some dates have been disabled to show up how
511 |               <a href="#option-adjustRangeToDisabled">adjustRangeToDisabled</a>
512 |               works.
513 |             </p>
514 |           </li>
515 | 
516 |           <li id="demo-days-range" class="demo col-md-4">
517 |             <h3>Days range</h3>
518 |             <iframe src="demos/?demo=days-range"></iframe>
519 |             <p class="description">
520 |               This way you can automatically select a range of days with respect
521 |               to the day clicked.
522 |             </p>
523 |             <p class="example">
524 |               In this example the day range is set to [0, 5], which means from
525 |               the day clicked to 5 days in advance.<br />
526 |               You can also specify other combinations like:
527 |             </p>
528 |             <ul>
529 |               <li>
530 |                 [-1,2] from a day before to two days after the clicked day
531 |               </li>
532 |               <li>
533 |                 [1,3] from the day after to three days after the clicked day
534 |               </li>
535 |               <li>...</li>
536 |             </ul>
537 |           </li>
538 | 
539 |           <li id="demo-min-max" class="demo col-md-4">
540 |             <h3>Min and Max date</h3>
541 |             <iframe src="demos/?demo=min-max-date"></iframe>
542 |             <p class="description">
543 |               As with the jQuery Datespicker, you can define a minimum and
544 |               maximum date from where to pick dates.<br />
545 |               The values are relative to the current date.
546 |             </p>
547 |           </li>
548 | 
549 |           <li id="demo-input" class="demo col-md-4">
550 |             <h3>From input</h3>
551 |             <iframe src="demos/?demo=input"></iframe>
552 |             <p class="description">
553 |               Just an example of how it would work with an input text field.
554 |             </p>
555 |           </li>
556 | 
557 |           <li id="demo-ui-calendar-methods" class="demo col-md-4">
558 |             <h3>UI Calendar methods</h3>
559 |             <iframe src="demos/?demo=ui-calendar-methods"></iframe>
560 |             <p class="description">
561 |               Define <code>beforeShow</code>, <code>beforeShowDay</code
562 |               ><a class="reference-to" href="#custom-methods-reference">*</a>,
563 |               <code>onSelect</code> and <code>onClose</code> to apply custom
564 |               behaviours.
565 |             </p>
566 |             <p class="alert alert-info" id="custom-methods-reference">
567 |               <span class="reference-to">*</span> Being that MDP needs
568 |               <code>beforeShowDay</code> to change the way jQuery datepicker
569 |               behaves, there may be cases in which your custom definition in MDP
570 |               won't produce the same effects as if you were using it with
571 |               datepicker alone.
572 |             </p>
573 |           </li>
574 | 
575 |           <li id="demo-full-year" class="demo col-md-12">
576 |             <h3>Full year</h3>
577 |             <iframe src="demos/?demo=full-year" style="height: 700px"></iframe>
578 |             <p class="description">
579 |               Just an example of how it would look to show the full year.
580 |             </p>
581 |           </li>
582 |         </ul>
583 |       </div>
584 | 
585 |       <div id="tips">
586 |         <h2>Tips</h2>
587 |         <p>
588 |           MDP comes with a small CSS file that applies the following styles:
589 |         </p>
590 |         <script src="http://gist-it.appspot.com/https://github.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/blob/nmain/jquery-ui.multidatespicker.css"></script>
591 |         <p>
592 |           To even further customize the way the calendar looks, just modify the
593 |           jQuery UI's theme you're using.<br />
594 |           Multiple Dates Picker is about adding functionality not style :)
595 |         </p>
596 |       </div>
597 | 
598 |       <div id="to-do">
599 |         <h2>Things pending</h2>
600 |         <p>
601 |           Apart from some features and bug fixes, there is need for a better
602 |           documentation and a unit-test to guarantee that any improvements won't
603 |           break the existent functionalities.
604 |         </p>
605 |         <p>
606 |           I'll try to maintain this project in my spare time (it is not my
607 |           primary business), and I welcome anyone who wants to help (just
608 |           <a href="#contactme">contact me</a> :)
609 |         </p>
610 |       </div>
611 | 
612 |       <div id="contactme">
613 |         <h2>Contact me</h2>
614 |         <p>
615 |           You're welcome to get in touch with me to collaborate to this project:
616 |         </p>
617 |         <ul>
618 |           <li>
619 |             <a href="http://luca.lauretta.info">luca.lauretta.info</a>
620 |             <em
621 |               >please do not email me for support or bug reporting, use the
622 |               <a href="#report">report section</a> instead.</em
623 |             >
624 |           </li>
625 |         </ul>
626 |       </div>
627 |     </div>
628 |   </body>
629 | </html>
630 | 


--------------------------------------------------------------------------------
/__tests__/multidatespicker.test.js:
--------------------------------------------------------------------------------
  1 | // @jest-environment jsdom
  2 | 
  3 | describe("MDP Initialization", function () {
  4 |   let $input;
  5 |   let spyDatepickerUpdate;
  6 |   const normalDatepickerUpdates = 3;
  7 | 
  8 |   beforeEach(function () {
  9 |     document.body.innerHTML = '<input id="datepicker" />';
 10 |     $input = $("#datepicker");
 11 | 
 12 |     spyDatepickerUpdate = jest.spyOn($.datepicker, "_updateDatepicker");
 13 | 
 14 |     // fix the offsetWidth to make the datepicker visible in jsdom
 15 |     jest.spyOn($input[0], "offsetWidth", "get").mockReturnValue(1);
 16 |   });
 17 | 
 18 |   afterEach(function () {
 19 |     jest.restoreAllMocks();
 20 |   });
 21 | 
 22 |   it("should initialize the multi-date picker correctly", function () {
 23 |     $input.multiDatesPicker();
 24 |     expect($input.hasClass("hasDatepicker")).toBe(true);
 25 |   });
 26 | 
 27 |   it("should call a beforeShow event with default behavior", function () {
 28 |     $input.multiDatesPicker();
 29 | 
 30 |     // triggers the beforeShow event
 31 |     $input.trigger("focus");
 32 | 
 33 |     expect(spyDatepickerUpdate).toHaveBeenCalledTimes(normalDatepickerUpdates);
 34 |   });
 35 | 
 36 |   it("should call a custom beforeShow event that interrupts the default behavior", function () {
 37 |     const beforeShow = jest.fn((_) => false); // returning false to interrupt the default behavior
 38 |     $input.multiDatesPicker({ beforeShow });
 39 | 
 40 |     // triggers the beforeShow event with a custom function
 41 |     $input.trigger("focus");
 42 | 
 43 |     expect(beforeShow).toHaveBeenCalled();
 44 |     expect(spyDatepickerUpdate).toHaveBeenCalledTimes(
 45 |       normalDatepickerUpdates - 1,
 46 |     );
 47 |   });
 48 | });
 49 | 
 50 | describe("setMode", function () {
 51 |   let $input, date;
 52 | 
 53 |   beforeEach(function () {
 54 |     // Initialize the input field
 55 |     document.body.innerHTML = '<input id="datepicker" />';
 56 |     $input = $("#datepicker");
 57 |     date = new Date();
 58 | 
 59 |     $input.multiDatesPicker({
 60 |       mode: "normal",
 61 |       maxPicks: 5,
 62 |       pickableRange: 7,
 63 |       adjustRangeToDisabled: true,
 64 |       addDisabledDates: [
 65 |         new Date(date.setDate(10)),
 66 |         new Date(date.setDate(15)),
 67 |       ],
 68 |     });
 69 |   });
 70 | 
 71 |   it("should set mode to normal and restrict selection to maxPicks", function () {
 72 |     $input.multiDatesPicker("addDates", "10/10/2024");
 73 |     $input.multiDatesPicker("addDates", "10/11/2024");
 74 | 
 75 |     const selectedDates = $input.multiDatesPicker("getDates");
 76 |     expect(selectedDates.length).toBe(2);
 77 |     expect(selectedDates).toContain("10/10/2024");
 78 |     expect(selectedDates).toContain("10/11/2024");
 79 |     expect(selectedDates).not.toContain("10/12/2024");
 80 |   });
 81 | 
 82 |   it("should set pickableRange and adjust minDate and maxDate accordingly", function () {
 83 |     const options = { pickableRange: 5 };
 84 |     $input.multiDatesPicker("setMode", options);
 85 | 
 86 |     const currentDate = new Date();
 87 |     const maxDate = new Date(currentDate);
 88 |     maxDate.setDate(currentDate.getDate() + options.pickableRange);
 89 |     $input.datepicker("option", "maxDate", maxDate);
 90 | 
 91 |     const actualMaxDate = $input.datepicker("option", "maxDate");
 92 |     expect(actualMaxDate).toEqual(maxDate);
 93 |   });
 94 | 
 95 |   it("should limit the pickable range to 7 days", function () {
 96 |     const options = $input.multiDatesPicker();
 97 |     const mode = options[0].multiDatesPicker.mode;
 98 | 
 99 |     var startDate = new Date();
100 |     var endDate = new Date(startDate);
101 |     endDate.setDate(startDate.getDate() + 6);
102 | 
103 |     $input.multiDatesPicker("addDates", [startDate, endDate]);
104 |     var selectedDates = $input.multiDatesPicker("getDates");
105 |     var selectedStartDate = new Date(selectedDates[0]);
106 |     var selectedEndDate = new Date(selectedDates[selectedDates.length - 1]);
107 |     var range = (selectedEndDate - selectedStartDate) / (1000 * 60 * 60 * 24);
108 | 
109 |     expect(range).toBeLessThanOrEqual(7);
110 |     expect(mode).toBe("normal");
111 |   });
112 | 
113 |   it("should not allow selection of disabled dates in normal mode", function () {
114 |     $input.multiDatesPicker("addDates", [new Date(date.setDate(10))]);
115 |     const options = $input.multiDatesPicker();
116 |     const mode = options[0].multiDatesPicker.mode;
117 | 
118 |     var selectedDates = $input.multiDatesPicker("getDates");
119 |     var disabledDates = [
120 |       new Date(date.setDate(10)),
121 |       new Date(date.setDate(15)),
122 |     ];
123 |     var isDisabledDateSelected = selectedDates.some(function (date) {
124 |       return disabledDates.some(function (disabledDate) {
125 |         return new Date(date).getTime() === disabledDate.getTime();
126 |       });
127 |     });
128 | 
129 |     expect(isDisabledDateSelected).toBe(false);
130 |     expect(mode).toBe("normal");
131 |   });
132 | });
133 | 
134 | describe("init", function () {
135 |   let $input;
136 | 
137 |   beforeEach(function () {
138 |     // Set up the input element before each test
139 |     document.body.innerHTML = '<input id="datepicker">';
140 |     $input = $("#datepicker");
141 |   });
142 | 
143 |   it("should apply default settings when no options are provided", function () {
144 |     // Call the init function without options
145 |     $input.multiDatesPicker("init");
146 | 
147 |     // Check that the datepicker was initialized with default settings
148 |     const dateFormat = $input.datepicker("option", "dateFormat");
149 |     expect(dateFormat).toEqual("mm/dd/yy"); // Default format
150 |   });
151 | 
152 |   it("should merge custom options with default settings", function () {
153 |     // Call init with custom options
154 |     $input.multiDatesPicker("init", {
155 |       dateFormat: "dd-mm-yy",
156 |       minDate: new Date("10/01/2024"),
157 |       maxDate: new Date("10/20/2024"),
158 |     });
159 | 
160 |     // Check that the custom dateFormat is applied
161 |     const dateFormat = $input.datepicker("option", "dateFormat");
162 |     expect(dateFormat).toEqual("dd-mm-yy");
163 | 
164 |     // Check minDate and maxDate options
165 |     const minDate = $input.datepicker("option", "minDate");
166 |     const maxDate = $input.datepicker("option", "maxDate");
167 |     expect(minDate).toEqual(new Date("10/01/2024"));
168 |     expect(maxDate).toEqual(new Date("10/20/2024"));
169 |   });
170 | 
171 |   it("should call custom onSelect event and toggle date on select", function () {
172 |     const onSelectSpy = jest.fn();
173 | 
174 |     // Call init with custom onSelect
175 |     $input.multiDatesPicker("init", {
176 |       onSelect: onSelectSpy,
177 |     });
178 | 
179 |     // Simulate selecting a date
180 |     $input.datepicker("setDate", "10/11/2024");
181 |     $input.datepicker("option", "onSelect").call($input[0], "10/11/2024");
182 | 
183 |     // Check if custom onSelect is called
184 |     expect(onSelectSpy).toHaveBeenCalled();
185 | 
186 |     // Check if the date was toggled in the multiDatesPicker instance
187 |     const pickedDates = $input.multiDatesPicker("getDates");
188 |     expect(pickedDates).toContain("10/11/2024");
189 |   });
190 | 
191 |   it("should correctly set disabled dates and update calendar range", function () {
192 |     const $input = $('<input type="text" id="test-datepicker">').appendTo(
193 |       "body",
194 |     );
195 | 
196 |     // Initialize with options that set minDate and maxDate
197 |     $input.multiDatesPicker("init", {
198 |       minDate: "01/01/2024",
199 |       maxDate: "12/31/2024",
200 |       addDisabledDates: ["01/15/2024", "01/16/2024"],
201 |     });
202 | 
203 |     const minDate = $input.datepicker("option", "minDate");
204 |     const maxDate = $input.datepicker("option", "maxDate");
205 | 
206 |     expect(minDate).not.toBeNull();
207 |     expect(maxDate).not.toBeNull();
208 | 
209 |     // Clean up
210 |     $input.remove();
211 |   });
212 | 
213 |   it("should update altField with selected dates if specified", function () {
214 |     // Set up altField
215 |     document.body.innerHTML += '<input id="altField">';
216 |     const $altField = $("#altField");
217 | 
218 |     // Call init with altField option
219 |     $input.multiDatesPicker("init", {
220 |       altField: "#altField",
221 |     });
222 | 
223 |     // Simulate selecting a date
224 |     $input.datepicker("setDate", "10/15/2024");
225 |     $input.datepicker("option", "onSelect").call($input[0], "10/15/2024");
226 | 
227 |     // Check that the altField is updated with the selected date
228 |     expect($altField.val()).toEqual("10/15/2024");
229 |   });
230 | });
231 | 
232 | describe("invalid methods", function () {
233 |   let $input;
234 |   beforeEach(function () {
235 |     document.body.innerHTML = '<input id="datepicker" />';
236 |     $input = $("#datepicker");
237 |   });
238 | 
239 |   it("should error on non-existing method", function () {
240 |     expect(function () {
241 |       $input.multiDatesPicker("happyNewYear");
242 |     }).toThrowError(
243 |       "Method happyNewYear does not exist on jQuery.multiDatesPicker",
244 |     );
245 |   });
246 | });
247 | 
248 | describe("dateConvert", function () {
249 |   let $input;
250 |   beforeEach(function () {
251 |     document.body.innerHTML = '<input id="datepicker" />';
252 |     $input = $("#datepicker");
253 |   });
254 | 
255 |   it("should error on unsupported date conversion", function () {
256 |     expect(function () {
257 |       $input.multiDatesPicker("dateConvert", {}, "object");
258 |     }).toThrowError("Received date is in a non supported format!");
259 |   });
260 | });
261 | 
262 | describe("addDates", function () {
263 |   let $input;
264 |   beforeEach(function () {
265 |     document.body.innerHTML = '<input id="datepicker" />';
266 |     $input = $("#datepicker");
267 |   });
268 | 
269 |   it("should add a date", function () {
270 |     $input.multiDatesPicker();
271 |     try {
272 |       $input.multiDatesPicker("addDates", "05/15/2023");
273 |       const dates = $input.multiDatesPicker("getDates");
274 | 
275 |       expect(dates.length).toBe(1);
276 |       expect(dates[0]).toBe("05/15/2023");
277 |     } catch (error) {
278 |       console.error("Error in add date test:", error);
279 |       throw error;
280 |     }
281 |   });
282 | 
283 |   it("should ignore invalid date string", function () {
284 |     expect(function () {
285 |       $input.multiDatesPicker("addDates", "invalid-date");
286 |     }).toThrowError("Missing number");
287 |   });
288 | 
289 |   it("should ignore non-date objects", function () {
290 |     expect(function () {
291 |       $input.multiDatesPicker("addDates", { someKey: "someValue" });
292 |     }).toThrowError("Empty array of dates received.");
293 |   });
294 | 
295 |   it("should not allow adding a date beyond maxDate", function () {
296 |     // Set maxDate to today
297 |     var today = new Date();
298 |     $input.multiDatesPicker({
299 |       maxDate: today,
300 |     });
301 | 
302 |     // Add a future date beyond the maxDate
303 |     var futureDate = new Date(today);
304 |     futureDate.setDate(today.getDate() + 10);
305 | 
306 |     expect(function () {
307 |       $input.multiDatesPicker("addDates", futureDate);
308 |     }).toThrowError("Empty array of dates received.");
309 |   });
310 | 
311 |   it("should handle null input as invalid date", function () {
312 |     expect(function () {
313 |       // Trying to add null as a date
314 |       $input.multiDatesPicker("addDates", null);
315 |     }).toThrowError("Cannot read properties of null (reading 'length')");
316 |   });
317 | });
318 | 
319 | describe("compareDates", function () {
320 |   let $input;
321 | 
322 |   beforeEach(function () {
323 |     document.body.innerHTML = '<input id="datepicker" />';
324 |     $input = $("#datepicker");
325 |   });
326 | 
327 |   it("should return 0 when dates are the same", function () {
328 |     const date1 = new Date("2024-10-10");
329 |     const date2 = new Date("2024-10-10");
330 |     const result = $input.multiDatesPicker("compareDates", date1, date2);
331 | 
332 |     expect(result).toBe(0); // They are the same day
333 |   });
334 | 
335 |   it("should return a positive number when date1 is later than date2", function () {
336 |     const date1 = new Date("2024-10-15");
337 |     const date2 = new Date("2024-10-10");
338 |     const result = $input.multiDatesPicker("compareDates", date1, date2);
339 | 
340 |     expect(result).toBeGreaterThan(0); // date1 is later than date2
341 |   });
342 | 
343 |   it("should return a negative number when date1 is earlier than date2", function () {
344 |     const date1 = new Date("2024-10-05");
345 |     const date2 = new Date("2024-10-10");
346 |     const result = $input.multiDatesPicker("compareDates", date1, date2);
347 | 
348 |     expect(result).toBeLessThan(0);
349 |   });
350 | 
351 |   it("should compare dates with different years", function () {
352 |     const date1 = new Date("2025-10-10");
353 |     const date2 = new Date("2024-10-10");
354 |     const result = $input.multiDatesPicker("compareDates", date1, date2);
355 | 
356 |     expect(result).toBeGreaterThan(0);
357 |   });
358 | 
359 |   it("should compare dates with different months in the same year", function () {
360 |     const date1 = new Date("2024-11-10");
361 |     const date2 = new Date("2024-10-10");
362 |     const result = $input.multiDatesPicker("compareDates", date1, date2);
363 | 
364 |     expect(result).toBeGreaterThan(0);
365 |   });
366 | 
367 |   it("should compare dates with different days in the same month", function () {
368 |     const date1 = new Date("2024-10-12");
369 |     const date2 = new Date("2024-10-10");
370 |     const result = $input.multiDatesPicker("compareDates", date1, date2);
371 | 
372 |     expect(result).toBeGreaterThan(0);
373 |   });
374 | });
375 | 
376 | describe("removeDates", function () {
377 |   let $input;
378 | 
379 |   function formatDate(date) {
380 |     if (date === undefined) return undefined; // Handle undefined input
381 |     const d = new Date(date);
382 |     let month = "" + (d.getMonth() + 1);
383 |     let day = "" + d.getDate();
384 |     const year = d.getFullYear();
385 | 
386 |     if (month.length < 2) month = "0" + month;
387 |     if (day.length < 2) day = "0" + day;
388 | 
389 |     return [month, day, year].join("/");
390 |   }
391 | 
392 |   beforeEach(function () {
393 |     // Initialize the input with some dates
394 |     document.body.innerHTML = '<input id="datepicker" />';
395 |     $input = $("#datepicker");
396 | 
397 |     $input.multiDatesPicker({
398 |       addDates: ["10/10/2024", "10/12/2024", "10/14/2024", "10/16/2024"],
399 |     });
400 |   });
401 | 
402 |   it("should remove a single date", function () {
403 |     const removed = $input.multiDatesPicker("removeDates", "10/12/2024");
404 | 
405 |     const formattedRemoved = removed.map(formatDate);
406 |     expect(formattedRemoved).toEqual(["10/12/2024"]);
407 | 
408 |     const remainingDates = $input.multiDatesPicker("getDates");
409 |     const formattedRemaining = remainingDates.map(formatDate);
410 |     expect(formattedRemaining).toEqual([
411 |       "10/10/2024",
412 |       "10/14/2024",
413 |       "10/16/2024",
414 |     ]);
415 |   });
416 | 
417 |   it("should remove multiple dates", function () {
418 |     const removed = $input.multiDatesPicker("removeDates", [
419 |       "10/12/2024",
420 |       "10/16/2024",
421 |     ]);
422 | 
423 |     const formattedRemoved = removed.map(formatDate);
424 |     expect(formattedRemoved).toEqual(["10/12/2024", "10/16/2024"]);
425 | 
426 |     const remainingDates = $input.multiDatesPicker("getDates");
427 |     const formattedRemaining = remainingDates.map(formatDate);
428 |     expect(formattedRemaining).toEqual(["10/10/2024", "10/14/2024"]);
429 |   });
430 | 
431 |   it("should not remove a date that does not exist", function () {
432 |     const removed = $input.multiDatesPicker("removeDates", "10/18/2024");
433 | 
434 |     const formattedRemoved = removed.map(formatDate);
435 |     expect(formattedRemoved).toEqual([undefined]);
436 | 
437 |     const remainingDates = $input.multiDatesPicker("getDates");
438 |     const formattedRemaining = remainingDates.map(formatDate);
439 |     expect(formattedRemaining).toEqual([
440 |       "10/10/2024",
441 |       "10/12/2024",
442 |       "10/14/2024",
443 |       "10/16/2024",
444 |     ]);
445 |   });
446 | });
447 | 
448 | describe("toggleDate", function () {
449 |   let $input;
450 | 
451 |   beforeEach(function () {
452 |     document.body.innerHTML = '<input id="datepicker" />';
453 |     $input = $("#datepicker");
454 |     $input.multiDatesPicker({
455 |       addDates: ["10/10/2024", "10/12/2024", "10/14/2024"],
456 |     });
457 |   });
458 | 
459 |   it("should add a date that does not exist", function () {
460 |     $input.multiDatesPicker("toggleDate", "10/16/2024");
461 |     const remainingDates = $input.multiDatesPicker("getDates");
462 |     expect(remainingDates).toContain("10/16/2024");
463 |     expect(remainingDates.length).toBe(4);
464 |   });
465 | 
466 |   it("should remove a date that exists", function () {
467 |     $input.multiDatesPicker("toggleDate", "10/12/2024");
468 |     const remainingDates = $input.multiDatesPicker("getDates");
469 |     expect(remainingDates).not.toContain("10/12/2024");
470 |     expect(remainingDates.length).toBe(2);
471 |   });
472 | 
473 |   it("should handle daysRange mode", function () {
474 |     $input.multiDatesPicker("destroy");
475 |     $input.multiDatesPicker({
476 |       mode: "daysRange",
477 |       autoselectRange: [0, 2],
478 |     });
479 | 
480 |     $input.multiDatesPicker("toggleDate", "10/10/2024");
481 |     const remainingDates = $input.multiDatesPicker("getDates");
482 |     expect(remainingDates.length).toBe(2);
483 |     expect(remainingDates).toContain("10/10/2024");
484 |     expect(remainingDates).toContain("10/11/2024");
485 |   });
486 | 
487 |   it("should handle daysRange inverting the order of dates", function () {
488 |     $input.multiDatesPicker("destroy");
489 |     $input.multiDatesPicker({
490 |       mode: "daysRange",
491 |       autoselectRange: [2, 0],
492 |     });
493 |     const date = "10/10/2024";
494 |     $input.multiDatesPicker("toggleDate", date);
495 |     const dates = $input.multiDatesPicker("getDates");
496 |     expect(dates[0]).toBe(date);
497 |   });
498 | 
499 |   it("should throw an error when no date is provided", function () {
500 |     expect(function () {
501 |       $input.multiDatesPicker("toggleDate");
502 |     }).toThrow();
503 |   });
504 | });
505 | 
506 | describe("multiDatesPicker value function", function () {
507 |   let $input;
508 | 
509 |   beforeEach(function () {
510 |     // Initialize the multiDatesPicker with a separator
511 |     $input = $("<input>").multiDatesPicker({
512 |       separator: ",",
513 |     });
514 | 
515 |     // Add dates to the input
516 |     $input.multiDatesPicker("addDates", [
517 |       "10/10/2024",
518 |       "10/12/2024",
519 |       "10/14/2024",
520 |     ]);
521 |   });
522 | 
523 |   it("should set the value by adding dates from a string", function () {
524 |     const dateString = "10/16/2024,10/18/2024";
525 | 
526 |     // Clear previous dates before setting new ones
527 |     $input.multiDatesPicker("resetDates", "picked"); // Clear previously picked dates
528 |     $input.multiDatesPicker("value", dateString); // Set new dates
529 | 
530 |     const selectedDates = $input.multiDatesPicker("getDates");
531 |     expect(selectedDates).toEqual(["10/16/2024", "10/18/2024"]); // Check if new dates are added
532 |   });
533 | 
534 |   it("should return the current dates as a string", function () {
535 |     const valueString = $input.multiDatesPicker("value"); // Get dates as a string
536 |     expect(valueString).toEqual("10/10/2024,10/12/2024,10/14/2024"); // Should return pre-set dates
537 |   });
538 | 
539 |   it("should return an empty string when no dates are selected", function () {
540 |     // Initialize without any pre-set dates for this test
541 |     $input = $("<input>").multiDatesPicker({ separator: "," });
542 |     const valueString = $input.multiDatesPicker("value");
543 |     expect(valueString).toEqual(""); // Expect empty string when no dates are set
544 |   });
545 | });
546 | 
547 | describe("gotDate", function () {
548 |   let $input;
549 | 
550 |   beforeEach(function () {
551 |     // Initialize the multiDatesPicker with multiple dates
552 |     document.body.innerHTML = '<input id="datepicker">';
553 |     $input = $("#datepicker");
554 |     // $input.multiDatesPicker('addDates', ['10/10/2024', '10/12/2024', '10/14/2024']);
555 | 
556 |     // Add picked dates
557 |     $input.multiDatesPicker("addDates", [
558 |       "10/10/2024",
559 |       "10/12/2024",
560 |       "10/14/2024",
561 |     ]);
562 | 
563 |     // Add disabled dates
564 |     $input.multiDatesPicker(
565 |       "addDates",
566 |       ["10/11/2024", "10/13/2024"],
567 |       "disabled",
568 |     );
569 |   });
570 | 
571 |   it("should return the index of an existing date in the picked dates", function () {
572 |     const index = $input.multiDatesPicker("gotDate", "10/12/2024");
573 |     expect(index).toEqual(1); // Index should be 1 for '10/12/2024'
574 |   });
575 | 
576 |   it("should return false for a non-existing date", function () {
577 |     const index = $input.multiDatesPicker("gotDate", "10/15/2024");
578 |     expect(index).toEqual(false);
579 |   });
580 | 
581 |   it("should return the index of an existing date in the disabled dates", function () {
582 |     const index = $input.multiDatesPicker("gotDate", "10/13/2024", "disabled");
583 |     expect(index).toEqual(1);
584 |   });
585 | 
586 |   it("should default to checking picked dates when no type is provided", function () {
587 |     const index = $input.multiDatesPicker("gotDate", "10/12/2024");
588 |     expect(index).toEqual(1);
589 |   });
590 | });
591 | 
592 | describe("removeIndexes", function () {
593 |   let $input;
594 | 
595 |   beforeEach(function () {
596 |     document.body.innerHTML = '<input id="datepicker">';
597 |     $input = $("#datepicker");
598 |     $input.multiDatesPicker("addDates", [
599 |       "10/10/2024",
600 |       "10/12/2024",
601 |       "10/14/2024",
602 |     ]);
603 |   });
604 | 
605 |   it("should remove a single index from picked dates", function () {
606 |     $input.multiDatesPicker("removeIndexes", 1);
607 |     const pickedDates = $input.multiDatesPicker("getDates");
608 | 
609 |     expect(pickedDates).toEqual(["10/10/2024", "10/14/2024"]);
610 |   });
611 | 
612 |   it("should remove multiple indexes from picked dates", function () {
613 |     $input.multiDatesPicker("removeIndexes", [0, 2]);
614 |     const pickedDates = $input.multiDatesPicker("getDates");
615 | 
616 |     expect(pickedDates).toEqual(["10/12/2024"]);
617 |   });
618 | });
619 | 
620 | describe("resetDates", function () {
621 |   let $input;
622 | 
623 |   beforeEach(function () {
624 |     document.body.innerHTML = '<input id="datepicker">';
625 |     $input = $("#datepicker");
626 |     $input.multiDatesPicker("addDates", [
627 |       "10/10/2024",
628 |       "10/12/2024",
629 |       "10/14/2024",
630 |     ]);
631 |   });
632 | 
633 |   it("should reset picked dates", function () {
634 |     let pickedDates = $input.multiDatesPicker("getDates");
635 | 
636 |     expect(pickedDates).toEqual(["10/10/2024", "10/12/2024", "10/14/2024"]);
637 | 
638 |     $input.multiDatesPicker("resetDates", "picked");
639 | 
640 |     pickedDates = $input.multiDatesPicker("getDates");
641 |     expect(pickedDates).toEqual([]);
642 |   });
643 | 
644 |   it("should reset picked dates by default if no type is provided", function () {
645 |     let pickedDates = $input.multiDatesPicker("getDates");
646 |     expect(pickedDates).toEqual(["10/10/2024", "10/12/2024", "10/14/2024"]);
647 | 
648 |     $input.multiDatesPicker("resetDates");
649 | 
650 |     pickedDates = $input.multiDatesPicker("getDates");
651 |     expect(pickedDates).toEqual([]);
652 |   });
653 | });
654 | 
655 | describe("getDates", function () {
656 |   let $input;
657 | 
658 |   beforeEach(function () {
659 |     document.body.innerHTML = '<input id="datepicker">';
660 |     $input = $("#datepicker");
661 | 
662 |     // Add picked dates
663 |     $input.multiDatesPicker("addDates", [
664 |       "10/10/2024",
665 |       "10/12/2024",
666 |       "10/14/2024",
667 |     ]);
668 | 
669 |     // Add disabled dates
670 |     $input.multiDatesPicker(
671 |       "addDates",
672 |       ["10/11/2024", "10/13/2024"],
673 |       "disabled",
674 |     );
675 |   });
676 | 
677 |   it("should return picked dates as a string array by default", function () {
678 |     const pickedDates = $input.multiDatesPicker("getDates");
679 |     expect(pickedDates).toEqual(["10/10/2024", "10/12/2024", "10/14/2024"]);
680 |   });
681 | 
682 |   it("should return disabled dates as a string array", function () {
683 |     const disabledDates = $input.multiDatesPicker(
684 |       "getDates",
685 |       "string",
686 |       "disabled",
687 |     );
688 |     expect(disabledDates).toEqual(["10/11/2024", "10/13/2024"]);
689 |   });
690 | 
691 |   it('should return picked dates as objects when format is "object"', function () {
692 |     const pickedDates = $input.multiDatesPicker("getDates", "object");
693 |     expect(pickedDates).toEqual([
694 |       new Date("10/10/2024"),
695 |       new Date("10/12/2024"),
696 |       new Date("10/14/2024"),
697 |     ]);
698 |   });
699 | 
700 |   it('should return disabled dates as objects when format is "object"', function () {
701 |     const disabledDates = $input.multiDatesPicker(
702 |       "getDates",
703 |       "object",
704 |       "disabled",
705 |     );
706 |     expect(disabledDates).toEqual([
707 |       new Date("10/11/2024"),
708 |       new Date("10/13/2024"),
709 |     ]);
710 |   });
711 | 
712 |   it('should return picked dates as numbers when format is "number"', function () {
713 |     const pickedDates = $input.multiDatesPicker("getDates", "number");
714 |     expect(pickedDates).toEqual([
715 |       Date.parse("10/10/2024"),
716 |       Date.parse("10/12/2024"),
717 |       Date.parse("10/14/2024"),
718 |     ]);
719 |   });
720 | 
721 |   it('should return disabled dates as numbers when format is "number"', function () {
722 |     const disabledDates = $input.multiDatesPicker(
723 |       "getDates",
724 |       "number",
725 |       "disabled",
726 |     );
727 |     expect(disabledDates).toEqual([
728 |       Date.parse("10/11/2024"),
729 |       Date.parse("10/13/2024"),
730 |     ]);
731 |   });
732 | 
733 |   it("should throw an error for unsupported formats", function () {
734 |     expect(function () {
735 |       $input.multiDatesPicker("getDates", "unsupportedFormat");
736 |     }).toThrowError('Format "unsupportedFormat" not supported!');
737 |   });
738 | });
739 | 
740 | describe("sumDays", function () {
741 |   let $input;
742 | 
743 |   beforeEach(function () {
744 |     document.body.innerHTML = '<input id="datepicker">';
745 |     $input = $("#datepicker");
746 |   });
747 | 
748 |   it("should add positive days to a Date object", function () {
749 |     const initialDate = new Date(2024, 9, 1);
750 |     const n_days = 5;
751 | 
752 |     const result = $input.multiDatesPicker("sumDays", initialDate, n_days);
753 |     const expectedDate = new Date(2024, 9, 6);
754 | 
755 |     expect(result).toEqual(expectedDate);
756 |   });
757 | 
758 |   it("should subtract days when n_days is negative", function () {
759 |     const initialDate = new Date(2024, 9, 10);
760 |     const n_days = -3;
761 | 
762 |     const result = $input.multiDatesPicker("sumDays", initialDate, n_days);
763 |     const expectedDate = new Date(2024, 9, 7);
764 | 
765 |     expect(result).toEqual(expectedDate);
766 |   });
767 | 
768 |   it("should handle adding days to a date in string format", function () {
769 |     const initialDate = "10/01/2024";
770 |     const n_days = 10;
771 |     const result = $input.multiDatesPicker("sumDays", initialDate, n_days);
772 |     expect(result).toBe("10/11/2024");
773 |   });
774 | 
775 |   it("should handle leap years correctly", function () {
776 |     const initialDate = new Date(2024, 1, 28);
777 |     const n_days = 2;
778 | 
779 |     const result = $input.multiDatesPicker("sumDays", initialDate, n_days);
780 |     const expectedDate = new Date(2024, 2, 1);
781 | 
782 |     expect(result).toEqual(expectedDate);
783 |   });
784 | 
785 |   it("should handle month overflow correctly", function () {
786 |     const initialDate = new Date(2024, 9, 31);
787 |     const n_days = 5;
788 | 
789 |     // Call sumDays and check result
790 |     const result = $input.multiDatesPicker("sumDays", initialDate, n_days);
791 |     const expectedDate = new Date(2024, 10, 5);
792 | 
793 |     expect(result).toEqual(expectedDate);
794 |   });
795 | });
796 | 
797 | describe("destroy", function () {
798 |   let $input;
799 | 
800 |   beforeEach(function () {
801 |     document.body.innerHTML = '<input id="datepicker">';
802 |     $input = $("#datepicker");
803 |     $input.multiDatesPicker();
804 |   });
805 | 
806 |   it("should set multiDatesPicker instance to null and destroy the datepicker", function () {
807 |     expect($input[0].multiDatesPicker).toBeDefined();
808 | 
809 |     $input.multiDatesPicker("destroy");
810 | 
811 |     expect($input[0].multiDatesPicker).toBeNull();
812 |     expect($input.datepicker("getDate")).toBeNull();
813 |   });
814 | });
815 | 


--------------------------------------------------------------------------------