index.html 20 KB

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