element_calendar.htm 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <html>
  2. <head>
  3. <meta charset="utf-8" />
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta name="description" content="" />
  7. <meta name="author" content="Maxim Sokhatsky" />
  8. <title>CALENDAR</title>
  9. <link rel="stylesheet" href="https://n2o.dev/blank.css" />
  10. <link rel="stylesheet" href="https://n2o.dev/zima.css" />
  11. </head>
  12. <body>
  13. <nav>
  14. <a href="https://n2o.dev">DEV</a>
  15. <a href="https://nitro.n2o.space">ELEMENT</a>
  16. <a href="#" style="background:#ededed;">CALENDAR</a>
  17. <div class="dropdown">
  18. <a onclick="drop()" class="dropbtn">EN</a>
  19. <div id="dropdown" class="dropdown-content">
  20. <a href="https://n2o.dev/deps/nitro/man/ua/element_calendar.htm">UA</a>
  21. <a href="#">EN</a>
  22. </div>
  23. </div>
  24. </nav>
  25. <header>
  26. <a href="../index.html"><img src="https://n2o.space/img/Synrc Neo.svg" /></a>
  27. <h1>CALENDAR</h1>
  28. </header>
  29. <main>
  30. <section>
  31. <h3>INTRO</h3>
  32. <p>The CALENDAR module provides a refreshing zero-dependency
  33. JavaScript Datapicker <a href="https://github.com/Pikaday/Pikaday">Pikaday</a>.</p>
  34. </section>
  35. <section>
  36. <h3>INPUT</h3>
  37. <figure><code>
  38. -record(calendar, { ?ELEMENT_BASE(element_calendar2),
  39. autocomplete=true,
  40. autofocus=false,
  41. disabled=false,
  42. form=[],
  43. list=[],
  44. maxDate={2019,2,2},
  45. minDate,
  46. format="YYYY-MM-DD",
  47. pattern=[],
  48. name=[],
  49. step=[],
  50. readonly=[],
  51. required=[],
  52. value={2020,2,2},
  53. placeholder=[],
  54. onSelect=[],
  55. disableDayFn=[],
  56. position=[],
  57. reposition=[],
  58. yearRange=100}).
  59. </code></figure>
  60. </section>
  61. <section>
  62. <h3>OUTPUT</h3>
  63. <figure><img src="img/calendar.png" width="320"/></figure>
  64. <figure><code>
  65. > IO.inspect :erlang.iolist_to_binary(:nitro.render(NITRO.calendar()))
  66. "&lt;input type=\"calendar\"/&gt;"
  67. > IO.inspect :erlang.iolist_to_binary(:nitro.render(:nitro.actions))
  68. "pickers[''] = new Pikaday({
  69. field: document.getElementById(''),
  70. firstDay: 0,
  71. i18n: clLangs.ua,
  72. defaultDate: new Date(2019, 10, 7),
  73. setDefaultDate: false,
  74. minDate: null,
  75. maxDate: new Date(2020,10,10),
  76. format: 'YYYY-MM-DD',
  77. onSelect: null,
  78. disableDayFn: null,
  79. position: 'bottom left',
  80. reposition: true,
  81. yearRange: 100});
  82. </code></figure>
  83. </section>
  84. <section>
  85. </section>
  86. <section>
  87. <p>This module may refer to: MAN_MODULES</p>
  88. </section>
  89. </main>
  90. <footer>2005—2019 © Synrc Research Center</footer>
  91. <script>function drop(){document.getElementById("dropdown").classList.toggle("show");}</script>
  92. </body></html>