123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Vanilla JS Datepicker Demo</title>
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.css">
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bulma-tooltip@3.0.2/dist/css/bulma-tooltip.min.css">
- <link rel="stylesheet" type="text/css" href="../dist/css/datepicker-bulma.css">
- <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
- <style type="text/css">
- aside {
- position: fixed;
- top: 0;
- bottom: 0;
- right: -300px;
- width: 300px;
- overflow: auto;
- background-color: #fff;
- box-shadow: inset 1px 1px rgba(0, 0, 0, 10%);
- transition: right 0.3s;
- }
- .open aside {
- right: 0;
- }
- aside hr {
- margin-top: 0.5rem;
- }
- .code-wrap {
- position: relative;
- }
- .code-wrap pre:not(.is-active) {
- height: 0;
- overflow: hidden;
- opacity: 0.5;
- }
- .code-wrap .collapse-button {
- position: absolute;
- top: 0;
- right: 0;
- left: auto;
- cursor: pointer;
- padding: 0.125rem 0.25rem;
- font-size: 0.75rem;
- }
- .toggle-btn {
- position: fixed;
- top: 0.75rem;
- right: 0.75rem;
- width: 1.5rem;
- background-color: #fff;
- line-height: 1.5rem;
- border: 1px solid rgba(0, 0, 0, 10%);
- border-radius: 2px;
- box-shadow: 1px 1px rgba(0, 0, 0, 10%);
- cursor: pointer;
- }
- .toggle-btn::before {
- content: '\25c0';
- padding-left: 0.25rem;
- }
- .open .toggle-btn::before {
- content: '\25b6';
- }
- @media (min-width: 481px) {
- main {
- margin-right: 38.1966%;
- }
- aside {
- right: 0;
- width: 38.1966%;
- }
- .toggle-btn {
- display: none;
- }
- }
- </style>
- </head>
- <body>
- <main>
- <section class="section container is-fluid">
- <div class="columns">
- <div class="column">
- <p>Vanilla JS Datepicker</p>
- <h1 class="title">Demo</h1>
- <div id="sandbox"></div>
- </div>
- </div>
- <div class="columns">
- <div class="column content">
- <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>
- <p class="is-size-7">* This page uses <a href="https://wikiki.github.io/elements/tooltip/" target="_blank">bulma-tooltip</a> for tooltips.</p>
- </div>
- </div>
- </section>
- </main>
- <aside>
- <section class="section">
- <div class="tile is-parent is-vertical">
- <div class="tile is-child">
- <h4 class="subtitle">Type</h4>
- <form id="types">
- <div class="field">
- <div class="control">
- <label class="radio">
- <input type="radio" name="type" value="input" checked>
- Input
- </label>
- <label class="radio">
- <input type="radio" name="type" value="inline">
- Inline
- </label>
- <label class="radio">
- <input type="radio" name="type" value="range">
- Range
- </label>
- </div>
- </div>
- </form>
- </div>
- <hr>
- <div class="tile is-child">
- <h4 class="subtitle">Options</h4>
- <form id="options">
- <div class="field">
- <div class="control tooltip" data-tooltip="Only effective in range picker">
- <label class="label checkbox">
- <input type="checkbox" name="allowOneSidedRange" value="true">
- allowOneSidedRange
- </label>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="autohide" value="true">
- autohide
- </label>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="beforeShowDay" value="true">
- beforeShowDay
- </label>
- </div>
- <div class="code-wrap">
- <pre id="code-beforeShowDay"></pre>
- <div class="collapse-button" data-target="code-beforeShowDay">show/hide</div>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="beforeShowMonth" value="true">
- beforeShowMonth
- </label>
- </div>
- <div class="code-wrap">
- <pre id="code-beforeShowMonth"></pre>
- <div class="collapse-button" data-target="code-beforeShowMonth">show/hide</div>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="beforeShowYear" value="true">
- beforeShowYear
- </label>
- </div>
- <div class="code-wrap">
- <pre id="code-beforeShowYear"></pre>
- <div class="collapse-button" data-target="code-beforeShowYear">show/hide</div>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="beforeShowDecade" value="true">
- beforeShowDecade
- </label>
- </div>
- <div class="code-wrap">
- <pre id="code-beforeShowDecade"></pre>
- <div class="collapse-button" data-target="code-beforeShowDecade">show/hide</div>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="calendarWeeks" value="true">
- calendarWeeks
- </label>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="clearBtn" value="true">
- clearBtn
- </label>
- </div>
- </div>
- <div class="field">
- <label class="label">dateDelimiter</label>
- <div class="control">
- <input type="text" class="input" name="dateDelimiter" placeholder=",">
- </div>
- </div>
- <div class="field">
- <label class="label">datesDisabled</label>
- <div class="control tooltip" data-tooltip="enter in JSON format">
- <textarea class="input" name="datesDisabled" placeholder="[]"></textarea>
- </div>
- </div>
- <div class="field">
- <label class="label">daysOfWeekDisabled</label>
- <div class="control">
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekDisabled" value="0"> 0
- </label>
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekDisabled" value="1"> 1
- </label>
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekDisabled" value="2"> 2
- </label>
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekDisabled" value="3"> 3
- </label>
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekDisabled" value="4"> 4
- </label>
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekDisabled" value="5"> 5
- </label>
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekDisabled" value="6"> 6
- </label>
- </div>
- </div>
- <div class="field">
- <label class="label">daysOfWeekHighlighted</label>
- <div class="control">
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekHighlighted" value="0"> 0
- </label>
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekHighlighted" value="1"> 1
- </label>
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekHighlighted" value="2"> 2
- </label>
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekHighlighted" value="3"> 3
- </label>
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekHighlighted" value="4"> 4
- </label>
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekHighlighted" value="5"> 5
- </label>
- <label class="checkbox">
- <input type="checkbox" name="daysOfWeekHighlighted" value="6"> 6
- </label>
- </div>
- </div>
- <div class="field">
- <label class="label">defaultViewDate</label>
- <div class="control">
- <input type="text" class="input" name="defaultViewDate" placeholder="today">
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="disableTouchKeyboard" value="true">
- disableTouchKeyboard
- </label>
- </div>
- </div>
- <div class="field">
- <label class="label">format</label>
- <div class="control">
- <input type="text" class="input" name="format" placeholder="mm/dd/yyyy">
- </div>
- </div>
- <div class="field">
- <label class="label">language</label>
- <div class="control">
- <div class="select">
- <select name="language" >
- <option value="en">en – English (US)</option>
- </select>
- </div>
- </div>
- </div>
- <div class="field">
- <label class="label">maxDate</label>
- <div class="control">
- <input type="text" class="input" name="maxDate" placeholder="null">
- </div>
- </div>
- <div class="field">
- <label class="label">maxNumberOfDates</label>
- <div class="control tooltip" data-tooltip="Not effective in range picker">
- <input type="text" class="input" name="maxNumberOfDates" placeholder="1">
- </div>
- </div>
- <div class="field">
- <label class="label">maxView</label>
- <div class="control">
- <div class="select">
- <select name="maxView">
- <option value="0">0 – days</option>
- <option value="1">1 – months</option>
- <option value="2">2 – years</option>
- <option value="3" selected>3 – decades</option>
- </select>
- </div>
- </div>
- </div>
- <div class="field">
- <label class="label">minDate</label>
- <div class="control">
- <input type="text" class="input" name="minDate" placeholder="null">
- </div>
- </div>
- <div class="field">
- <label class="label">nextArrow</label>
- <div class="control">
- <textarea class="input" name="nextArrow" placeholder="»"></textarea>
- </div>
- </div>
- <div class="field">
- <label class="label">orientation</label>
- <div class="control">
- <div class="select">
- <select name="orientation" >
- <option value="auto">auto</option>
- <option value="top auto">top auto</option>
- <option value="bottom auto">bottom auto</option>
- <option value="auto left">auto left</option>
- <option value="top left">top left</option>
- <option value="bottom left">bottom left</option>
- <option value="auto right">auto right</option>
- <option value="top right">top right</option>
- <option value="bottom right">bottom right</option>
- </select>
- </div>
- </div>
- </div>
- <div class="field">
- <label class="label">pickLevel</label>
- <div class="control">
- <div class="select">
- <select name="pickLevel">
- <option value="0">0 – date</option>
- <option value="1">1 – month</option>
- <option value="2">2 – year</option>
- </select>
- </div>
- </div>
- </div>
- <div class="field">
- <label class="label">prevArrow</label>
- <div class="control">
- <textarea class="input" name="prevArrow" placeholder="«"></textarea>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="showDaysOfWeek" value="true" checked>
- showDaysOfWeek
- </label>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="showOnClick" value="true" checked>
- showOnClick
- </label>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="showOnFocus" value="true" checked>
- showOnFocus
- </label>
- </div>
- </div>
- <div class="field">
- <label class="label">startView</label>
- <div class="control">
- <div class="select">
- <select name="startView">
- <option value="0">0 – days</option>
- <option value="1">1 – months</option>
- <option value="2">2 – years</option>
- <option value="3">3 – decades</option>
- </select>
- </div>
- </div>
- </div>
- <div class="field">
- <label class="label">title</label>
- <div class="control">
- <input type="text" class="input" name="title">
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="todayBtn" value="true">
- todayBtn
- </label>
- </div>
- </div>
- <div class="field">
- <label class="label">todayBtnMode</label>
- <div class="control">
- <div class="select">
- <select name="todayBtnMode">
- <option value="0">0 – focus</option>
- <option value="1">1 – select</option>
- </select>
- </div>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="todayHighlight" value="true">
- todayHighlight
- </label>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <label class="label checkbox">
- <input type="checkbox" name="updateOnBlur" value="true" checked>
- updateOnBlur
- </label>
- </div>
- </div>
- <div class="field">
- <label class="label">weekStart</label>
- <div class="control">
- <input type="text" class="input" name="weekStart" placeholder="0">
- </div>
- </div>
- </form>
- </div>
- <hr>
- <div class="tile is-child">
- <h4 class="subtitle">Text direction</h4>
- <form id="direction">
- <div class="field">
- <div class="control">
- <label class="radio">
- <input type="radio" name="direction" value="ltr" checked>
- LTR
- </label>
- <label class="radio">
- <input type="radio" name="direction" value="rtl">
- RTL
- </label>
- </div>
- </div>
- </form>
- </div>
- </div>
- </section>
- </aside>
- <div class="toggle-btn"></div>
- <script src="../dist/js/datepicker-full.js"></script>
- <script src="./live-demo.js"></script>
- <script>
- /*global initialize onChangeType onChnageDirection onChangeInputOption onChangeInputOption onChangeTextareaOption onClickCheckboxOptions switchPicker */
- initialize();
- document.getElementById('types').querySelectorAll('input').forEach((el) => {
- el.addEventListener('change', onChangeType);
- });
- document.getElementById('direction').querySelectorAll('input').forEach((el) => {
- el.addEventListener('change', onChnageDirection);
- });
- const optsForm = document.getElementById('options');
- optsForm.querySelectorAll('input[type=text], input[type=radio], select').forEach((el) => {
- el.addEventListener('change', onChangeInputOption);
- });
- optsForm.querySelectorAll('textarea').forEach((el) => {
- el.addEventListener('change', onChangeTextareaOption);
- });
- optsForm.querySelectorAll('.checkbox').forEach((el) => {
- el.addEventListener('click', onClickCheckboxOptions);
- });
- switchPicker('input');
- </script>
- </body>
- </html>
|