var playgroundCalendar, playground_json, userConfig = { inline: true, enableTime: true }; function toggleConfig(e) { e.preventDefault(); var option = e.target.dataset.option, config = playgroundCalendar.config, element = playgroundCalendar.element, selectedDates; if (playgroundCalendar.selectedDates.length) selectedDates = playgroundCalendar.selectedDates; if (!Flatpickr.defaultConfig[option] && userConfig[option]) delete userConfig[option]; else userConfig[option] = typeof Flatpickr.defaultConfig[option] === "boolean" ? !Flatpickr.defaultConfig[option] : e.target.value; config[option] = userConfig[option]; if (config.enableTime) { config.dateFormat = config.noCalendar ? "H:i" + (config.enableSeconds ? ":S" : "") : Flatpickr.defaultConfig.dateFormat + " H:i" + (config.enableSeconds ? ":S" : ""); config.altFormat = config.noCalendar ? "h:i" + (config.enableSeconds ? ":S K" : " K") : Flatpickr.defaultConfig.altFormat + " h:i" + (config.enableSeconds ? ":S" : "") + " K"; } else { config.dateFormat = Flatpickr.defaultConfig.dateFormat; config.altFormat = Flatpickr.defaultConfig.altFormat; } if (selectedDates) config.defaultDate = selectedDates; playground_json.textContent = JSON.stringify(userConfig, null, 4); playgroundCalendar.destroy(); playgroundCalendar = new Flatpickr(element, config); } function setupPlayground() { playgroundCalendar = flatpickr("#playground_calendar", userConfig); var fragment = document.createDocumentFragment(), keys = [ "altInput", "allowInput", "enableTime", "enableSeconds", "inline", "noCalendar", "time_24hr", "utc" ], li, label, checkbox, span; for (var i = 0; i < keys.length; i++) { li = document.createElement("li"); label = document.createElement("label"); span = document.createElement("span"); checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.setAttribute("data-option", keys[i]); if (playgroundCalendar.config[keys[i]]) checkbox.checked = "checked"; checkbox.addEventListener("change", toggleConfig); span.innerHTML = keys[i]; label.appendChild(checkbox); label.appendChild(span); li.appendChild(label); fragment.appendChild(li); } document.getElementById("playground").insertBefore( fragment, document.getElementById("playground").firstChild ); document.getElementById("minDate").addEventListener("change", function(e){ if (e.target.value) playgroundCalendar.set("minDate", e.target.value); else playgroundCalendar.set("minDate", null); }); document.getElementById("minDateClear").addEventListener("click", function(){ playgroundCalendar.set("minDate", null); document.getElementById("minDate").value = ""; if (playgroundCalendar.selectedDates && playgroundCalendar.config.minDate && playgroundCalendar.config.minDate.getTime() > playgroundCalendar.selectedDates[0].getTime() ) playgroundCalendar.clear(); }); var modes = document.getElementsByClassName("mode"); for (var i = 0; i < modes.length; i++) { modes[i].addEventListener("change", toggleConfig); } playground_json = document.getElementById("playground_json"); playground_json.textContent= JSON.stringify(userConfig, null, 4); playground_json.style.display = "none"; document.getElementById("show_json").addEventListener("click", function(){ playground_json.style.display = playground_json.style.display === "block" ? "none" : "block"; }); } function fp_ready(){ // setting custom defaults Flatpickr.l10n.firstDayOfWeek = 1; //Regular flatpickr var calendars = document.getElementsByClassName("flatpickr").flatpickr(); document.getElementById("disableRange").flatpickr({ disable: [ { from: "2016-08-16", to: "2016-08-19" }, "2016-08-24", new Date().fp_incr(30) // 30 days from now ] }); document.getElementById("disableOddDays").flatpickr({ disable: [ function(date) { return date.getDate()%2; } // disable odd days ] }); document.getElementById("enableNextSeven").flatpickr({ enable: [ { from: "today", to: new Date().fp_incr(7) } ] }); document.getElementById("enableCustom").flatpickr({ enable: [ function(dateObj){ return dateObj.getDay() %6 !== 0 && dateObj.getFullYear() === 2016; } ] }); // Event API var events = document.getElementById("events"); document.getElementById("events-api-example").flatpickr({ minDate: "today", enableTime: true, onChange: function(dateObj, dateStr, fp) { console.log(fp.selectedDateObj); events.innerHTML += "onChange (" + dateObj + ", " + dateStr + " )
"; events.scrollTop = events.offsetTop; }, onOpen: function(dateObj, dateStr, fp){ events.innerHTML += "onOpen (" + dateObj + ", " + dateStr + " )
"; events.scrollTop = events.offsetTop; }, onClose: function(dateObj, dateStr, fp){ events.innerHTML += "onClose (" + dateObj + ", " + dateStr + " )
"; events.scrollTop = events.offsetTop; }, onReady: function(dateObj, dateStr, fp){ events.innerHTML += "onReady (" + dateObj + ", " + dateStr + " )
"; events.scrollTop = events.offsetTop; } }); flatpickr("#dayCreate", { onDayCreate: function(dObj, dStr, fp, dayElem){ if (Math.random() < 0.15) dayElem.innerHTML += ""; else if (Math.random() > 0.85) dayElem.innerHTML += ""; } }); var fiscal = document.getElementById("fiscal").flatpickr({ weekNumbers: true }); // Fiscal calendar fiscal.getWeek = function(givenDate){ var checkDate = new Date(givenDate.getTime()); checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7)); var time = checkDate.getTime(); checkDate.setMonth(7); checkDate.setDate(28); var week = (Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 2); if (week < 1) { week = 52 + week; } return 'FW' + ("0" + week).slice(-2); } fiscal.redraw(); // Date format var fpInstance = new Flatpickr(document.createElement("input")), formatOutput = document.getElementById("dateFormatOutput"), now = new Date(); // document.getElementById("dateFormatComposer").addEventListener("keyup", function(e){ // formatOutput.textContent = fpInstance.formatDate(e.target.value, now); // }); setupPlayground(); }