foundation.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599
  1. <!DOCTYPE html>
  2. <html class="no-js">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Vanilla JS Datepicker Demo</title>
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
  8. <link rel="stylesheet" type="text/css" href="../dist/css/datepicker-foundation.css">
  9. <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  10. <style type="text/css">
  11. main .section {
  12. padding: 3rem 1.5rem;
  13. }
  14. aside {
  15. position: fixed;
  16. top: 0;
  17. bottom: 0;
  18. right: -300px;
  19. width: 300px;
  20. overflow: auto;
  21. background-color: #fff;
  22. box-shadow: inset 1px 1px rgba(0, 0, 0, 10%);
  23. transition: right 0.3s;
  24. }
  25. .open aside {
  26. right: 0;
  27. }
  28. aside hr {
  29. margin-top: 0.5rem;
  30. }
  31. .code-wrap {
  32. position: relative;
  33. margin-top: calc(-1rem + 1px);
  34. margin-bottom: 1rem;
  35. }
  36. .code-wrap pre {
  37. background-color: whitesmoke;
  38. padding: 1.25rem 1.5rem;
  39. }
  40. .code-wrap pre:not(.is-active) {
  41. height: 0;
  42. overflow: hidden;
  43. opacity: 0.5;
  44. }
  45. .code-wrap .collapse-button {
  46. position: absolute;
  47. top: 0;
  48. right: 0;
  49. left: auto;
  50. cursor: pointer;
  51. padding: 0.125rem 0.25rem;
  52. font-size: 0.75rem;
  53. }
  54. .check-group {
  55. display: flex;
  56. flex-wrap: wrap;
  57. }
  58. .field.has-tip {
  59. display: block;
  60. border-bottom: 0;
  61. }
  62. .toggle-btn {
  63. position: fixed;
  64. top: 0.75rem;
  65. right: 0.75rem;
  66. width: 1.5rem;
  67. background-color: #fff;
  68. line-height: 1.5rem;
  69. border: 1px solid rgba(0, 0, 0, 10%);
  70. border-radius: 2px;
  71. box-shadow: 1px 1px rgba(0, 0, 0, 10%);
  72. cursor: pointer;
  73. }
  74. .toggle-btn::before {
  75. content: '\25c0';
  76. padding-left: 0.25rem;
  77. }
  78. .open .toggle-btn::before {
  79. content: '\25b6';
  80. }
  81. @media (min-width: 481px) {
  82. main {
  83. margin-right: 38.1966%;
  84. }
  85. aside {
  86. right: 0;
  87. width: 38.1966%;
  88. }
  89. .toggle-btn {
  90. display: none;
  91. }
  92. }
  93. .text-success {
  94. color: #3adb76 !important;
  95. }
  96. .text-warning {
  97. color: #ffae00 !important;
  98. }
  99. .text-alert {
  100. color: #cc4b37 !important;
  101. }
  102. .background-success {
  103. background-color: #3adb76 !important;
  104. }
  105. .background-warning {
  106. background-color: #ffae00 !important;
  107. }
  108. .background-alert {
  109. background-color: #cc4b37 !important;
  110. }
  111. </style>
  112. </head>
  113. <body>
  114. <main>
  115. <section class="section container-fluid">
  116. <div class="row">
  117. <div class="columns">
  118. <p>Vanilla JS Datepicker</p>
  119. <h1 class="title">Demo</h1>
  120. <div id="sandbox"></div>
  121. </div>
  122. </div>
  123. <div class="row">
  124. <div class="columns">
  125. <p><small>Style: <a href="index.html">Bulma</a> | <a href="bs4.html">Bootstrap</a> | <em>Foundation</em> | <a href="plain-css.html">Plain CSS</a></small></p>
  126. </div>
  127. </div>
  128. </section>
  129. </main>
  130. <aside>
  131. <section class="section">
  132. <div class="grid-x grid-padding-x grid-padding-y">
  133. <div class="cell">
  134. <h4 class="subtitle">Type</h4>
  135. <form id="types">
  136. <div class="field">
  137. <input type="radio" id="type-input" name="type" value="input" checked>
  138. <label for="type-input">Input</label>
  139. <input type="radio" id="type-inline" name="type" value="inline">
  140. <label for="type-inline">Inline</label>
  141. <input type="radio" id="type-range" name="type" value="range">
  142. <label for="type-range">Range</label>
  143. </div>
  144. </form>
  145. </div>
  146. <div class="cell">
  147. <hr>
  148. <h4 class="subtitle">Options</h4>
  149. <form id="options">
  150. <div class="field" data-tooltip title="Only effective in range picker">
  151. <input type="checkbox" id="allowOneSidedRange" name="allowOneSidedRange" value="true">
  152. <label for="allowOneSidedRange">allowOneSidedRange</label>
  153. </div>
  154. <div class="field">
  155. <input type="checkbox" id="autohide" name="autohide" value="true">
  156. <label for="autohide">autohide</label>
  157. </div>
  158. <div class="field">
  159. <input type="checkbox" id="beforeShowDay" name="beforeShowDay" value="true">
  160. <label for="beforeShowDay">beforeShowDay</label>
  161. <div class="code-wrap">
  162. <pre id="code-beforeShowDay"></pre>
  163. <div class="collapse-button" data-target="code-beforeShowDay">show/hide</div>
  164. </div>
  165. </div>
  166. <div class="field">
  167. <input type="checkbox" id="beforeShowMonth" name="beforeShowMonth" value="true">
  168. <label for="beforeShowMonth">beforeShowMonth</label>
  169. <div class="code-wrap">
  170. <pre id="code-beforeShowMonth"></pre>
  171. <div class="collapse-button" data-target="code-beforeShowMonth">show/hide</div>
  172. </div>
  173. </div>
  174. <div class="field">
  175. <input type="checkbox" id="beforeShowYear" name="beforeShowYear" value="true">
  176. <label for="beforeShowYear">beforeShowYear</label>
  177. <div class="code-wrap">
  178. <pre id="code-beforeShowYear"></pre>
  179. <div class="collapse-button" data-target="code-beforeShowYear">show/hide</div>
  180. </div>
  181. </div>
  182. <div class="field">
  183. <input type="checkbox" id="beforeShowDecade" name="beforeShowDecade" value="true">
  184. <label for="beforeShowDecade">beforeShowDecade</label>
  185. <div class="code-wrap">
  186. <pre id="code-beforeShowDecade"></pre>
  187. <div class="collapse-button" data-target="code-beforeShowDecade">show/hide</div>
  188. </div>
  189. </div>
  190. <div class="field">
  191. <input type="checkbox" id="calendarWeeks" name="calendarWeeks" value="true">
  192. <label for="calendarWeeks">calendarWeeks</label>
  193. </div>
  194. <div class="field">
  195. <input type="checkbox" id="clearBtn" name="clearBtn" value="true">
  196. <label for="clearBtn">clearBtn</label>
  197. </div>
  198. <div class="field">
  199. <label>
  200. dateDelimiter
  201. <input type="text" name="dateDelimiter" placeholder=",">
  202. </label>
  203. </div>
  204. <div class="field" data-tooltip title="enter in JSON format">
  205. <label>
  206. datesDisabled
  207. <textarea name="datesDisabled" placeholder="[]"></textarea>
  208. <span class="form-error is-visible"></span>
  209. </label>
  210. </div>
  211. <div class="field">
  212. <label>daysOfWeekDisabled</label>
  213. <div class="check-group">
  214. <div class="check-group-item">
  215. <input type="checkbox" id="daysOfWeekDisabled-0" name="daysOfWeekDisabled" value="0">
  216. <label for="daysOfWeekDisabled-0">0</label>&nbsp;
  217. </div>
  218. <div class="check-group-item">
  219. <input type="checkbox" id="daysOfWeekDisabled-1" name="daysOfWeekDisabled" value="1">
  220. <label for="daysOfWeekDisabled-1">1</label>&nbsp;
  221. </div>
  222. <div class="check-group-item">
  223. <input type="checkbox" id="daysOfWeekDisabled-2" name="daysOfWeekDisabled" value="2">
  224. <label for="daysOfWeekDisabled-2">2</label>&nbsp;
  225. </div>
  226. <div class="check-group-item">
  227. <input type="checkbox" id="daysOfWeekDisabled-3" name="daysOfWeekDisabled" value="3">
  228. <label for="daysOfWeekDisabled-3">3</label>&nbsp;
  229. </div>
  230. <div class="check-group-item">
  231. <input type="checkbox" id="daysOfWeekDisabled-4" name="daysOfWeekDisabled" value="4">
  232. <label for="daysOfWeekDisabled-4">4</label>&nbsp;
  233. </div>
  234. <div class="check-group-item">
  235. <input type="checkbox" id="daysOfWeekDisabled-5" name="daysOfWeekDisabled" value="5">
  236. <label for="daysOfWeekDisabled-5">5</label>&nbsp;
  237. </div>
  238. <div class="check-group-item">
  239. <input type="checkbox" id="daysOfWeekDisabled-6" name="daysOfWeekDisabled" value="6">
  240. <label for="daysOfWeekDisabled-6">6</label>&nbsp;
  241. </div>
  242. </div>
  243. </div>
  244. <div class="field">
  245. <label>daysOfWeekHighlighted</label>
  246. <div class="check-group">
  247. <div class="check-group-item">
  248. <input type="checkbox" id="daysOfWeekHighlighted-0" name="daysOfWeekHighlighted" value="0">
  249. <label for="daysOfWeekHighlighted-0">0</label>&nbsp;
  250. </div>
  251. <div class="check-group-item">
  252. <input type="checkbox" id="daysOfWeekHighlighted-1" name="daysOfWeekHighlighted" value="1">
  253. <label for="daysOfWeekHighlighted-1">1</label>&nbsp;
  254. </div>
  255. <div class="check-group-item">
  256. <input type="checkbox" id="daysOfWeekHighlighted-2" name="daysOfWeekHighlighted" value="2">
  257. <label for="daysOfWeekHighlighted-2">2</label>&nbsp;
  258. </div>
  259. <div class="check-group-item">
  260. <input type="checkbox" id="daysOfWeekHighlighted-3" name="daysOfWeekHighlighted" value="3">
  261. <label for="daysOfWeekHighlighted-3">3</label>&nbsp;
  262. </div>
  263. <div class="check-group-item">
  264. <input type="checkbox" id="daysOfWeekHighlighted-4" name="daysOfWeekHighlighted" value="4">
  265. <label for="daysOfWeekHighlighted-4">4</label>&nbsp;
  266. </div>
  267. <div class="check-group-item">
  268. <input type="checkbox" id="daysOfWeekHighlighted-5" name="daysOfWeekHighlighted" value="5">
  269. <label for="daysOfWeekHighlighted-5">5</label>&nbsp;
  270. </div>
  271. <div class="check-group-item">
  272. <input type="checkbox" id="daysOfWeekHighlighted-6" name="daysOfWeekHighlighted" value="6">
  273. <label for="daysOfWeekHighlighted-6">6</label>&nbsp;
  274. </div>
  275. </div>
  276. </div>
  277. <div class="field">
  278. <label>
  279. defaultViewDate
  280. <input type="text" name="defaultViewDate" placeholder="today">
  281. </label>
  282. </div>
  283. <div class="field">
  284. <input type="checkbox" id="disableTouchKeyboard" name="disableTouchKeyboard" value="true">
  285. <label for="disableTouchKeyboard">disableTouchKeyboard</label>
  286. </div>
  287. <div class="field">
  288. <label>
  289. format
  290. <input type="text" name="format" placeholder="mm/dd/yyyy">
  291. </label>
  292. </div>
  293. <div class="field">
  294. <label>
  295. language
  296. <select name="language" >
  297. <option valUe="en">en – English (US)</option>
  298. </select>
  299. </label>
  300. </div>
  301. <div class="field">
  302. <label>
  303. maxDate
  304. <input type="text" name="maxDate" placeholder="null">
  305. </label>
  306. </div>
  307. <div class="field" data-tooltip title="Not effective in range picker">
  308. <label>
  309. maxNumberOfDates
  310. <input type="text" name="maxNumberOfDates" placeholder="1">
  311. </label>
  312. </div>
  313. <div class="field">
  314. <label>
  315. maxView
  316. <select name="maxView">
  317. <option value="0">0 – days</option>
  318. <option value="1">1 – months</option>
  319. <option value="2">2 – years</option>
  320. <option value="3" selected>3 – decades</option>
  321. </select>
  322. </label>
  323. </div>
  324. <div class="field">
  325. <label>
  326. minDate
  327. <input type="text" name="minDate" placeholder="null">
  328. </label>
  329. </div>
  330. <div class="field">
  331. <label>
  332. nextArrow
  333. <textarea name="nextArrow" placeholder="»"></textarea>
  334. </label>
  335. </div>
  336. <div class="field">
  337. <label>
  338. orientation
  339. <select name="orientation" >
  340. <option value="auto">auto</option>
  341. <option value="top auto">top auto</option>
  342. <option value="bottom auto">bottom auto</option>
  343. <option value="auto left">auto left</option>
  344. <option value="top left">top left</option>
  345. <option value="bottom left">bottom left</option>
  346. <option value="auto right">auto right</option>
  347. <option value="top right">top right</option>
  348. <option value="bottom right">bottom right</option>
  349. </select>
  350. </label>
  351. </div>
  352. <div class="field">
  353. <label>
  354. pickLevel
  355. <select name="pickLevel">
  356. <option value="0">0 – date</option>
  357. <option value="1">1 – month</option>
  358. <option value="2">2 – year</option>
  359. </select>
  360. </label>
  361. </div>
  362. <div class="field">
  363. <label>
  364. prevArrow
  365. <textarea name="prevArrow" placeholder="«"></textarea>
  366. </label>
  367. </div>
  368. <div class="field">
  369. <input type="checkbox" id="showDaysOfWeek" name="showDaysOfWeek" value="true" checked>
  370. <label for="showDaysOfWeek">showDaysOfWeek</label>
  371. </div>
  372. <div class="field">
  373. <input type="checkbox" id="showOnClick" name="showOnClick" value="true" checked>
  374. <label for="showOnClick">showOnClick</label>
  375. </div>
  376. <div class="field">
  377. <input type="checkbox" id="showOnFocus" name="showOnFocus" value="true" checked>
  378. <label for="showOnFocus">showOnFocus</label>
  379. </div>
  380. <div class="field">
  381. <label>
  382. startView
  383. <select name="startView">
  384. <option value="0">0 – days</option>
  385. <option value="1">1 – months</option>
  386. <option value="2">2 – years</option>
  387. <option value="3">3 – decades</option>
  388. </select>
  389. </label>
  390. </div>
  391. <div class="field">
  392. <label>
  393. title
  394. <input type="text" name="title">
  395. </label>
  396. </div>
  397. <div class="field">
  398. <input type="checkbox" id="todayBtn" name="todayBtn" value="true">
  399. <label for="todayBtn">todayBtn</label>
  400. </div>
  401. <div class="field">
  402. <label>
  403. todayBtnMode
  404. <select name="todayBtnMode">
  405. <option value="0">0 – focus</option>
  406. <option value="1">1 – select</option>
  407. </select>
  408. </label>
  409. </div>
  410. <div class="field">
  411. <input type="checkbox" id="todayHighlight" name="todayHighlight" value="true">
  412. <label for="todayHighlight">todayHighlight</label>
  413. </div>
  414. <div class="field">
  415. <input type="checkbox" id="updateOnBlur" name="updateOnBlur" value="true" checked>
  416. <label for="updateOnBlur">updateOnBlur</label>
  417. </div>
  418. <div class="field">
  419. <label>
  420. weekStart
  421. <input type="text" name="weekStart" placeholder="0">
  422. </label>
  423. </div>
  424. </form>
  425. </div>
  426. <div class="cell">
  427. <hr>
  428. <h4 class="subtitle">Text direction</h4>
  429. <form id="direction">
  430. <div class="field">
  431. <input type="radio" id="direction-ltr" name="direction" value="ltr" checked>
  432. <label for="direction-ltr">LTR</label>
  433. <input type="radio" id="direction-rtl" name="direction" value="rtl">
  434. <label for="direction-rtl">RTL</label>
  435. </div>
  436. </form>
  437. </div>
  438. </div>
  439. </section>
  440. </aside>
  441. <div class="toggle-btn"></div>
  442. <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  443. <script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.2.6/what-input.min.js"></script>
  444. <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
  445. <script src="../dist/js/datepicker-full.js"></script>
  446. <script src="./live-demo.js"></script>
  447. <script>
  448. /*global $ initialize onChangeType onChnageDirection onChangeInputOption onChangeInputOption onChangeTextareaOption onClickcheckboxOptions switchPicker */
  449. window.templates = {
  450. input: `<div class="field"><input type="text" class="date"></div>`,
  451. inline: `<div class="date"></div>`,
  452. range: `<div class="input-group date input-daterange">
  453. <input type="text" name="range-start" class="input-group-field">
  454. <span class="input-group-label" disabled>to</span>
  455. <input type="text" name="range-end" class="input-group-field">
  456. </div>`,
  457. };
  458. window.beforeShowFns = {
  459. beforeShowDay(date) {
  460. if (date.getMonth() == new Date().getMonth()) {
  461. switch (date.getDate()) {
  462. case 4:
  463. return {
  464. content: '<span data-tooltip title="Example tooltip">4</span>',
  465. classes: 'background-warning'
  466. };
  467. case 8:
  468. return false;
  469. case 12:
  470. return "text-success";
  471. }
  472. }
  473. },
  474. beforeShowMonth(date) {
  475. switch (date.getMonth()) {
  476. case 6:
  477. if (date.getFullYear() === new Date().getFullYear()) {
  478. return {content: '🎉'};
  479. }
  480. break;
  481. case 8:
  482. return false;
  483. }
  484. },
  485. beforeShowYear(date) {
  486. switch (date.getFullYear()) {
  487. case 2017:
  488. return false;
  489. case 2020:
  490. return {content: '<span data-tooltip data-placement="bottom" title="Tooltip text">2020</span>'};
  491. }
  492. },
  493. beforeShowDecade(date) {
  494. switch (date.getFullYear()) {
  495. case 2000:
  496. return false;
  497. case 2100:
  498. return {
  499. content: '💯',
  500. classes: 'background-success',
  501. };
  502. }
  503. },
  504. };
  505. window.addError = (el, message) => {
  506. el.classList.add('is-invalid-input');
  507. el.parentElement.querySelector('.form-error').textContent = message;
  508. };
  509. window.removeErrors = (el) => {
  510. el.classList.remove('is-invalid-input');
  511. el.parentElement.querySelector('.form-error').textContent = '';
  512. };
  513. $(document).foundation();
  514. initialize();
  515. document.getElementById('types').querySelectorAll('input').forEach((el) => {
  516. el.addEventListener('change', onChangeType);
  517. });
  518. document.getElementById('direction').querySelectorAll('input').forEach((el) => {
  519. el.addEventListener('change', onChnageDirection);
  520. });
  521. const optsForm = document.getElementById('options');
  522. optsForm.querySelectorAll('input[type=text], input[type=radio], select').forEach((el) => {
  523. el.addEventListener('change', onChangeInputOption);
  524. });
  525. optsForm.querySelectorAll('textarea').forEach((el) => {
  526. let listener;
  527. if (el.dataset.validator) {
  528. el.addEventListener('change', (ev) => {
  529. if (el.classList.contains(Foundation.Abide.defaults.inputErrorClass)) {
  530. return;
  531. }
  532. onChangeTextareaOption(ev);
  533. });
  534. } else {
  535. listener = onChangeTextareaOption;
  536. }
  537. el.addEventListener('change', listener);
  538. });
  539. optsForm.querySelectorAll('input[type=checkbox]').forEach((el) => {
  540. el.addEventListener('click', onClickCheckboxOptions);
  541. });
  542. switchPicker('input');
  543. const initTooltips = () => {
  544. document.querySelectorAll('[data-tooltip]').forEach((el) => {
  545. if (!el.classList.contains('has-tip')) {
  546. new Foundation.Tooltip($(el));
  547. }
  548. });
  549. };
  550. setInterval(initTooltips, 1000);
  551. </script>
  552. </body>
  553. </html>