bs4.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538
  1. <!DOCTYPE html>
  2. <html>
  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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  8. <link rel="stylesheet" type="text/css" href="../dist/css/datepicker-bs4.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. }
  34. .code-wrap pre {
  35. background-color: whitesmoke;
  36. padding: 1.25rem 1.5rem;
  37. }
  38. .code-wrap pre:not(.is-active) {
  39. height: 0;
  40. overflow: hidden;
  41. opacity: 0.5;
  42. }
  43. .code-wrap .collapse-button {
  44. position: absolute;
  45. top: 0;
  46. right: 0;
  47. left: auto;
  48. cursor: pointer;
  49. padding: 0.125rem 0.25rem;
  50. font-size: 0.75rem;
  51. }
  52. .toggle-btn {
  53. position: fixed;
  54. top: 0.75rem;
  55. right: 0.75rem;
  56. width: 1.5rem;
  57. background-color: #fff;
  58. line-height: 1.5rem;
  59. border: 1px solid rgba(0, 0, 0, 10%);
  60. border-radius: 2px;
  61. box-shadow: 1px 1px rgba(0, 0, 0, 10%);
  62. cursor: pointer;
  63. }
  64. .toggle-btn::before {
  65. content: '\25c0';
  66. padding-left: 0.25rem;
  67. }
  68. .open .toggle-btn::before {
  69. content: '\25b6';
  70. }
  71. @media (min-width: 481px) {
  72. main {
  73. margin-right: 38.1966%;
  74. }
  75. aside {
  76. right: 0;
  77. width: 38.1966%;
  78. }
  79. .toggle-btn {
  80. display: none;
  81. }
  82. }
  83. </style>
  84. </head>
  85. <body>
  86. <main>
  87. <section class="section container-fluid">
  88. <div class="row">
  89. <div class="col">
  90. <p>Vanilla JS Datepicker</p>
  91. <h1 class="title">Demo</h1>
  92. <div id="sandbox"></div>
  93. </div>
  94. </div>
  95. <div class="row">
  96. <div class="col">
  97. <p><small>Style: <a href="index.html">Bulma</a> | <em>Bootstrap</em> | <a href="foundation.html">Foundation</a> | <a href="plain-css.html">Plain CSS</a></small></p>
  98. </div>
  99. </div>
  100. </section>
  101. </main>
  102. <aside>
  103. <section class="section">
  104. <div class="card">
  105. <div class="card-body">
  106. <h4 class="subtitle">Type</h4>
  107. <form id="types">
  108. <div class="form-group">
  109. <div class="form-check form-check-inline">
  110. <input type="radio" class="form-check-input" id="type-input" name="type" value="input" checked>
  111. <label for="type-input" class="form-check-label">Input</label>
  112. </div>
  113. <div class="form-check form-check-inline">
  114. <input type="radio" class="form-check-input" id="type-inline" name="type" value="inline">
  115. <label for="type-inline" class="form-check-label">Inline</label>
  116. </div>
  117. <div class="form-check form-check-inline">
  118. <input type="radio" class="form-check-input" id="type-range" name="type" value="range">
  119. <label for="type-range" class="form-check-label">Range</label>
  120. </div>
  121. </div>
  122. </form>
  123. </div>
  124. <hr>
  125. <div class="card-body">
  126. <h4 class="subtitle">Options</h4>
  127. <form id="options">
  128. <div class="form-group form-check" data-toggle="tooltip" title="Only effective in range picker">
  129. <input type="checkbox" class="form-check-input" id="allowOneSidedRange" name="allowOneSidedRange" value="true">
  130. <label for="allowOneSidedRange" class="form-check-label">allowOneSidedRange</label>
  131. </div>
  132. <div class="form-group form-check">
  133. <input type="checkbox" class="form-check-input" id="autohide" name="autohide" value="true">
  134. <label for="autohide" class="form-check-label">autohide</label>
  135. </div>
  136. <div class="form-group form-check">
  137. <input type="checkbox" class="form-check-input" id="beforeShowDay" name="beforeShowDay" value="true">
  138. <label for="beforeShowDay" class="form-check-label">beforeShowDay</label>
  139. <div class="code-wrap">
  140. <pre id="code-beforeShowDay"></pre>
  141. <div class="collapse-button" data-target="code-beforeShowDay">show/hide</div>
  142. </div>
  143. </div>
  144. <div class="form-group form-check">
  145. <input type="checkbox" class="form-check-input" id="beforeShowMonth" name="beforeShowMonth" value="true">
  146. <label for="beforeShowMonth" class="form-check-label">beforeShowMonth</label>
  147. <div class="code-wrap">
  148. <pre id="code-beforeShowMonth"></pre>
  149. <div class="collapse-button" data-target="code-beforeShowMonth">show/hide</div>
  150. </div>
  151. </div>
  152. <div class="form-group form-check">
  153. <input type="checkbox" class="form-check-input" id="beforeShowYear" name="beforeShowYear" value="true">
  154. <label for="beforeShowYear" class="form-check-label">beforeShowYear</label>
  155. <div class="code-wrap">
  156. <pre id="code-beforeShowYear"></pre>
  157. <div class="collapse-button" data-target="code-beforeShowYear">show/hide</div>
  158. </div>
  159. </div>
  160. <div class="form-group form-check">
  161. <input type="checkbox" class="form-check-input" id="beforeShowDecade" name="beforeShowDecade" value="true">
  162. <label for="beforeShowDecade" class="form-check-label">beforeShowDecade</label>
  163. <div class="code-wrap">
  164. <pre id="code-beforeShowDecade"></pre>
  165. <div class="collapse-button" data-target="code-beforeShowDecade">show/hide</div>
  166. </div>
  167. </div>
  168. <div class="form-group form-check">
  169. <input type="checkbox" class="form-check-input" id="calendarWeeks" name="calendarWeeks" value="true">
  170. <label for="calendarWeeks" class="form-check-label">calendarWeeks</label>
  171. </div>
  172. <div class="form-group form-check">
  173. <input type="checkbox" class="form-check-input" id="clearBtn" name="clearBtn" value="true">
  174. <label for="clearBtn" class="form-check-label">clearBtn</label>
  175. </div>
  176. <div class="form-group">
  177. <label class="label">dateDelimiter</label>
  178. <input type="text" class="form-control" name="dateDelimiter" placeholder=",">
  179. </div>
  180. <div class="form-group" data-toggle="tooltip" title="enter in JSON format">
  181. <label class="label">datesDisabled</label>
  182. <textarea class="form-control" name="datesDisabled" placeholder="[]"></textarea>
  183. <div class="invalid-feedback"></div>
  184. </div>
  185. <div class="form-group">
  186. <label for="daysOfWeekDisabled" class="label">daysOfWeekDisabled</label>
  187. <div>
  188. <div class="form-check form-check-inline">
  189. <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-0" name="daysOfWeekDisabled" value="0">
  190. <label for="daysOfWeekDisabled-0" class="form-check-label">0</label>&nbsp;
  191. </div>
  192. <div class="form-check form-check-inline">
  193. <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-1" name="daysOfWeekDisabled" value="1">
  194. <label for="daysOfWeekDisabled-1" class="form-check-label">1</label>&nbsp;
  195. </div>
  196. <div class="form-check form-check-inline">
  197. <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-2" name="daysOfWeekDisabled" value="2">
  198. <label for="daysOfWeekDisabled-2" class="form-check-label">2</label>&nbsp;
  199. </div>
  200. <div class="form-check form-check-inline">
  201. <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-3" name="daysOfWeekDisabled" value="3">
  202. <label for="daysOfWeekDisabled-3" class="form-check-label">3</label>&nbsp;
  203. </div>
  204. <div class="form-check form-check-inline">
  205. <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-4" name="daysOfWeekDisabled" value="4">
  206. <label for="daysOfWeekDisabled-4" class="form-check-label">4</label>&nbsp;
  207. </div>
  208. <div class="form-check form-check-inline">
  209. <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-5" name="daysOfWeekDisabled" value="5">
  210. <label for="daysOfWeekDisabled-5" class="form-check-label">5</label>&nbsp;
  211. </div>
  212. <div class="form-check form-check-inline">
  213. <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-6" name="daysOfWeekDisabled" value="6">
  214. <label for="daysOfWeekDisabled-6" class="form-check-label">6</label>&nbsp;
  215. </div>
  216. </div>
  217. </div>
  218. <div class="form-group">
  219. <label for="daysOfWeekHighlighted" class="label">daysOfWeekHighlighted</label>
  220. <div>
  221. <div class="form-check form-check-inline">
  222. <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-0" name="daysOfWeekHighlighted" value="0">
  223. <label for="daysOfWeekHighlighted-0" class="form-check-label">0</label>&nbsp;
  224. </div>
  225. <div class="form-check form-check-inline">
  226. <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-1" name="daysOfWeekHighlighted" value="1">
  227. <label for="daysOfWeekHighlighted-1" class="form-check-label">1</label>&nbsp;
  228. </div>
  229. <div class="form-check form-check-inline">
  230. <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-2" name="daysOfWeekHighlighted" value="2">
  231. <label for="daysOfWeekHighlighted-2" class="form-check-label">2</label>&nbsp;
  232. </div>
  233. <div class="form-check form-check-inline">
  234. <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-3" name="daysOfWeekHighlighted" value="3">
  235. <label for="daysOfWeekHighlighted-3" class="form-check-label">3</label>&nbsp;
  236. </div>
  237. <div class="form-check form-check-inline">
  238. <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-4" name="daysOfWeekHighlighted" value="4">
  239. <label for="daysOfWeekHighlighted-4" class="form-check-label">4</label>&nbsp;
  240. </div>
  241. <div class="form-check form-check-inline">
  242. <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-5" name="daysOfWeekHighlighted" value="5">
  243. <label for="daysOfWeekHighlighted-5" class="form-check-label">5</label>&nbsp;
  244. </div>
  245. <div class="form-check form-check-inline">
  246. <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-6" name="daysOfWeekHighlighted" value="6">
  247. <label for="daysOfWeekHighlighted-6" class="form-check-label">6</label>&nbsp;
  248. </div>
  249. </div>
  250. </div>
  251. <div class="form-group">
  252. <label class="label">defaultViewDate</label>
  253. <input type="text" class="form-control" name="defaultViewDate" placeholder="today">
  254. </div>
  255. <div class="form-group form-check">
  256. <input type="checkbox" class="form-check-input" id="disableTouchKeyboard" name="disableTouchKeyboard" value="true">
  257. <label for="disableTouchKeyboard" class="form-check-label">disableTouchKeyboard</label>
  258. </div>
  259. <div class="form-group">
  260. <label class="label">format</label>
  261. <input type="text" class="form-control" name="format" placeholder="mm/dd/yyyy">
  262. </div>
  263. <div class="form-group">
  264. <label class="label">language</label>
  265. <select class="form-control" name="language" >
  266. <option value="en">en – English (US)</option>
  267. </select>
  268. </div>
  269. <div class="form-group">
  270. <label class="label">maxDate</label>
  271. <input type="text" class="form-control" name="maxDate" placeholder="null">
  272. </div>
  273. <div class="form-group" data-toggle="tooltip" title="Not effective in range picker">
  274. <label class="label">maxNumberOfDates</label>
  275. <input type="text" class="form-control" name="maxNumberOfDates" placeholder="1">
  276. </div>
  277. <div class="form-group">
  278. <label class="label">maxView</label>
  279. <select class="form-control" name="maxView">
  280. <option value="0">0 – days</option>
  281. <option value="1">1 – months</option>
  282. <option value="2">2 – years</option>
  283. <option value="3" selected>3 – decades</option>
  284. </select>
  285. </div>
  286. <div class="form-group">
  287. <label class="label">minDate</label>
  288. <input type="text" class="form-control" name="minDate" placeholder="null">
  289. </div>
  290. <div class="form-group">
  291. <label class="label">nextArrow</label>
  292. <textarea class="form-control" name="nextArrow" placeholder="»"></textarea>
  293. </div>
  294. <div class="form-group">
  295. <label class="label">orientation</label>
  296. <select class="form-control" name="orientation" >
  297. <option value="auto">auto</option>
  298. <option value="top auto">top auto</option>
  299. <option value="bottom auto">bottom auto</option>
  300. <option value="auto left">auto left</option>
  301. <option value="top left">top left</option>
  302. <option value="bottom left">bottom left</option>
  303. <option value="auto right">auto right</option>
  304. <option value="top right">top right</option>
  305. <option value="bottom right">bottom right</option>
  306. </select>
  307. </div>
  308. <div class="form-group">
  309. <label class="label">pickLevel</label>
  310. <select class="form-control" name="pickLevel">
  311. <option value="0">0 – date</option>
  312. <option value="1">1 – month</option>
  313. <option value="2">2 – year</option>
  314. </select>
  315. </div>
  316. <div class="form-group">
  317. <label class="label">prevArrow</label>
  318. <textarea class="form-control" name="prevArrow" placeholder="«"></textarea>
  319. </div>
  320. <div class="form-group form-check">
  321. <input type="checkbox" class="form-check-input" id="showDaysOfWeek" name="showDaysOfWeek" value="true" checked>
  322. <label for="showDaysOfWeek" class="form-check-label">showDaysOfWeek</label>
  323. </div>
  324. <div class="form-group form-check">
  325. <input type="checkbox" class="form-check-input" id="showOnClick" name="showOnClick" value="true" checked>
  326. <label for="showOnClick" class="form-check-label">showOnClick</label>
  327. </div>
  328. <div class="form-group form-check">
  329. <input type="checkbox" class="form-check-input" id="showOnFocus" name="showOnFocus" value="true" checked>
  330. <label for="showOnFocus" class="form-check-label">showOnFocus</label>
  331. </div>
  332. <div class="form-group">
  333. <label class="label">startView</label>
  334. <select class="form-control" name="startView">
  335. <option value="0">0 – days</option>
  336. <option value="1">1 – months</option>
  337. <option value="2">2 – years</option>
  338. <option value="3">3 – decades</option>
  339. </select>
  340. </div>
  341. <div class="form-group">
  342. <label class="label">title</label>
  343. <input type="text" class="form-control" name="title">
  344. </div>
  345. <div class="form-group form-check">
  346. <input type="checkbox" class="form-check-input" id="todayBtn" name="todayBtn" value="true">
  347. <label for="todayBtn" class="form-check-label">todayBtn</label>
  348. </div>
  349. <div class="form-group">
  350. <label class="label">todayBtnMode</label>
  351. <select class="form-control" name="todayBtnMode">
  352. <option value="0">0 – focus</option>
  353. <option value="1">1 – select</option>
  354. </select>
  355. </div>
  356. <div class="form-group form-check">
  357. <input type="checkbox" class="form-check-input" id="todayHighlight" name="todayHighlight" value="true">
  358. <label for="todayHighlight" class="form-check-label">todayHighlight</label>
  359. </div>
  360. <div class="form-group form-check">
  361. <input type="checkbox" class="form-check-input" id="updateOnBlur" name="updateOnBlur" value="true" checked>
  362. <label for="updateOnBlur" class="form-check-label">updateOnBlur</label>
  363. </div>
  364. <div class="form-group">
  365. <label class="label">weekStart</label>
  366. <input type="text" class="form-control" name="weekStart" placeholder="0">
  367. </div>
  368. </form>
  369. </div>
  370. <hr>
  371. <div class="card-body">
  372. <h4 class="subtitle">Text direction</h4>
  373. <form id="direction">
  374. <div class="form-group">
  375. <div class="form-check form-check-inline">
  376. <input type="radio" class="form-check-input" id="direction-ltr" name="direction" value="ltr" checked>
  377. <label for="direction-ltr" class="form-check-label">LTR</label>
  378. </div>
  379. <div class="form-check form-check-inline">
  380. <input type="radio" class="form-check-input" id="direction-rtl" name="direction" value="rtl">
  381. <label for="direction-rtl" class="form-check-label">RTL</label>
  382. </div>
  383. </div>
  384. </form>
  385. </div>
  386. </div>
  387. </section>
  388. </aside>
  389. <div class="toggle-btn"></div>
  390. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  391. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  392. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  393. <script src="../dist/js/datepicker-full.js"></script>
  394. <script src="./live-demo.js"></script>
  395. <script>
  396. /*global $ initialize onChangeType onChnageDirection onChangeInputOption onChangeInputOption onChangeTextareaOption onClickCheckboxOptions switchPicker */
  397. window.templates = {
  398. input: `<div class="form-group"><input type="text" class="form-control date"></div>`,
  399. inline: `<div class="date"></div>`,
  400. range: `<div class="d-flex flex-row date input-daterange">
  401. <div class="form-group">
  402. <input type="text" name="range-start" class="form-control">
  403. </div>
  404. <div class="flex-grow-0">
  405. <a class="btn" disabled>to</a>
  406. </div>
  407. <div class="form-group">
  408. <input type="text" name="range-end" class="form-control">
  409. </div>
  410. </div>`,
  411. };
  412. window.beforeShowFns = {
  413. beforeShowDay(date) {
  414. if (date.getMonth() == new Date().getMonth()) {
  415. switch (date.getDate()) {
  416. case 4:
  417. return {
  418. content: '<span data-toggle="tooltip" title="Example tooltip">4</span>',
  419. classes: 'bg-info'
  420. };
  421. case 8:
  422. return false;
  423. case 12:
  424. return "text-success";
  425. }
  426. }
  427. },
  428. beforeShowMonth(date) {
  429. switch (date.getMonth()) {
  430. case 6:
  431. if (date.getFullYear() === new Date().getFullYear()) {
  432. return {content: '🎉'};
  433. }
  434. break;
  435. case 8:
  436. return false;
  437. }
  438. },
  439. beforeShowYear(date) {
  440. switch (date.getFullYear()) {
  441. case 2017:
  442. return false;
  443. case 2020:
  444. return {content: '<span data-toggle="tooltip" data-placement="bottom" title="Tooltip text">2020</span>'};
  445. }
  446. },
  447. beforeShowDecade(date) {
  448. switch (date.getFullYear()) {
  449. case 2000:
  450. return false;
  451. case 2100:
  452. return {
  453. content: '💯',
  454. classes: 'bg-success',
  455. };
  456. }
  457. },
  458. };
  459. window.buttonClass = 'btn';
  460. window.addError = function addError(el, message) {
  461. el.classList.add('is-invalid');
  462. el.parentElement.querySelector('.invalid-feedback').textContent = message;
  463. }
  464. window.removeErrors = function removeErrors(el) {
  465. el.classList.remove('is-invalid');
  466. el.parentElement.querySelector('.invalid-feedback').textContent = '';
  467. }
  468. initialize();
  469. document.getElementById('types').querySelectorAll('input').forEach((el) => {
  470. el.addEventListener('change', onChangeType);
  471. });
  472. document.getElementById('direction').querySelectorAll('input').forEach((el) => {
  473. el.addEventListener('change', onChnageDirection);
  474. });
  475. const optsForm = document.getElementById('options');
  476. optsForm.querySelectorAll('input[type=text], input[type=radio], select').forEach((el) => {
  477. el.addEventListener('change', onChangeInputOption);
  478. });
  479. optsForm.querySelectorAll('textarea').forEach((el) => {
  480. el.addEventListener('change', onChangeTextareaOption);
  481. });
  482. optsForm.querySelectorAll('input[type=checkbox]').forEach((el) => {
  483. el.addEventListener('click', onClickCheckboxOptions);
  484. });
  485. switchPicker('input');
  486. const initTooltips = () => {
  487. $('[data-toggle="tooltip"]').tooltip();
  488. };
  489. setInterval(initTooltips, 1000);
  490. initTooltips();
  491. </script>
  492. </body>
  493. </html>