Bootstrap Snippet using HTML Javascript

JotForm.setConditions([{"action":[{"id":"action_1581690116457","visibility":"Hide","isError":false,"field":"10"}],"id":"1581690133174","index":"0","link":"Any","priority":"0","terms":[{"id":"term_1581690116457","field":"17","operator":"isEmpty","value":"","isError":false}],"type":"field"},{"action":[{"id":"action_0_1581690045611","visibility":"Hide","isError":false,"field":"10"}],"id":"1581689801697","index":"1","link":"Any","priority":"1","terms":[{"id":"term_0_1581690045611","field":"17","operator":"equals","value":"Yes","isError":false}],"type":"field"},{"action":[{"field":"11","visibility":"Show","id":"action_1_1581689802691"}],"id":"1581689543679","index":"2","link":"Any","priority":"2","terms":[{"field":"15","operator":"equals","value":"Yes"}],"type":"field"},{"action":[{"field":"18","visibility":"Show","id":"action_0_1581945983644","isError":false}],"id":"1581689543680","index":"3","link":"Any","priority":"3","terms":[{"field":"15","operator":"equals","value":"Yes","id":"term_0_1581945983644","isError":false}],"type":"field"},{"action":[{"field":"10","visibility":"Show","id":"action_3_1581689802691"}],"id":"1581689543681","index":"4","link":"Any","priority":"4","terms":[{"field":"15","operator":"equals","value":"Yes"}],"type":"field"}]); JotForm.init(function(){ productID = {"0":"input_19_1004","1":"input_19_1005","2":"input_19_1006","3":"input_19_1007","4":"input_19_1008"}; paymentType = "product"; JotForm.setCurrencyFormat('USD',true, 'point'); JotForm.totalCounter({"input_19_1004":{"price":"118","quantityField":"input_19_quantity_1004_0","specialPriceField":"input_19_quantity_1004_0","specialPriceList":["10","10","10","10","10","10"]},"input_19_1005":{"price":"74","quantityField":"input_19_quantity_1005_0"},"input_19_1006":{"price":"64"},"input_19_1007":{"price":"274","quantityField":"input_19_quantity_1007_0"},"input_19_1008":{"price":"284"}}); $$('.form-product-custom_quantity').each(function(el, i){el.observe('blur', function(){isNaN(this.value) || this.value < 1 ? this.value = '0' : this.value = parseInt(this.value)})}); $$('.form-product-custom_quantity').each(function(el, i){el.observe('focus', function(){this.value == 0 ? this.value = '' : this.value})}); JotForm.handleProductLightbox(); setTimeout(function() { $('input_3').hint('ex: myname@example.com'); }, 20); JotForm.setPhoneMaskingValidator( 'input_5_full', '(###) ###-####' ); JotForm.calendarMonths = ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"]; JotForm.calendarDays = ["Segunda-feira","Terça-feira","Quarta-feira","Quinta-feira","Sexta-feira","Sábado","Domingo"]; JotForm.calendarOther = "Today"; JotForm.checkAppointmentAvailability = function checkAppointmentAvailability(day, slot, data) { if (!(day && slot && data && data[day])) return false; return data[day][slot]; }; (function init(props) { var PREFIX = window.location.href.indexOf('jotform.pro') > -1 || window.location.pathname.indexOf('build') > -1 || window.location.pathname.indexOf('form-templates') > -1 || window.location.pathname.indexOf('pdf-templates') > -1 ? '/server.php' : JotForm.server; // boilerplate var effectsOut = null; var changed = {}; var constructed = false; var _window = window, document = _window.document; var wrapper = document.querySelector('#' + props.qid.value); var element = wrapper.querySelector('.appointmentField'); var input = wrapper.querySelector('#input_' + props.id.value + '_date'); var tzInput = wrapper.querySelector('#input_' + props.id.value + '_timezone'); function debounce(func, wait, immediate) { var timeout = void 0; return function wrappedFN() { for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } var context = this; var later = function later() { timeout = null; if (!immediate) func.apply.apply(func, [context].concat(args)); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply.apply(func, [context].concat(args)); }; } var classNames = function classNames(obj) { return Object.keys(obj).reduce(function (acc, key) { if (!obj[key]) return acc; return [].concat(acc, [key]); }, []).join(' '); }; var assignObject = function assignObject() { for (var _len2 = arguments.length, objects = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { objects[_key2] = arguments[_key2]; } return objects.reduce(function (acc, obj) { Object.keys(obj).forEach(function (key) { acc[key] = obj[key]; }); return acc; }, {}); }; var objectEntries = function objectEntries(obj) { return Object.keys(obj).reduce(function (acc, key) { var value = obj[key]; var pair = [key, value]; return [].concat(acc, [pair]); }, []); }; var fillArray = function fillArray(arr, value) { var newArr = []; for (var i = 0; i < arr.length; i++) { newArr.push(value); } return newArr; }; var getJSON = function getJSON(url, cb) { return new Ajax.Request(url, { evalJSON: 'force', method: 'GET', onComplete: function onComplete(response) { return cb(response.responseJSON); } }); }; var beforeRender = function beforeRender() { if (effectsOut) { effectsOut(); effectsOut = null; } }; var afterRender = function afterRender() { effectsOut = effects(); }; var setState = function setState(newState) { var changedKeys = Object.keys(newState).filter(function (key) { return state[key] !== newState[key]; }); if (!changedKeys.length) { return; } changed = changedKeys.reduce(function (acc, key) { var _assignObject; return assignObject({}, acc, (_assignObject = {}, _assignObject[key] = state[key], _assignObject)); }, changed); state = assignObject({}, state, newState); if (constructed) { render(); } }; var isStartWeekOnMonday = function isStartWeekOnMonday() { var _props = props, startDay = _props.startWeekOn.value; return !startDay || startDay === 'Monday'; }; var monthNames = function monthNames() { return (JotForm.calendarMonthsTranslated || JotForm.calendarMonths || _Utils.specialOptions.Months.value).map(function (monthName) { return String.prototype.locale ? monthName.locale() : monthName; }); }; var daysOfWeek = function daysOfWeek() { return (JotForm.calendarDaysTranslated || JotForm.calendarDays || _Utils.specialOptions.Days.value).map(function (dayName) { return String.prototype.locale ? dayName.locale() : dayName; }); }; // we need remove unnecessary "Sunday", if there is time field on the form var dayNames = function dayNames() { var days = daysOfWeek().length === 8 ? daysOfWeek().slice(1) : daysOfWeek(); return isStartWeekOnMonday() ? days : [days[days.length - 1]].concat(days.slice(0, 6)); }; var oneHour = 1000 * 60 * 60; // const oneDay = oneHour * 24; var intPrefix = function intPrefix(d) { if (d < 10) { return '0' + d; } return '' + d; }; var toFormattedDateStr = function toFormattedDateStr(date) { var _props2 = props, _props2$dateFormat$va = _props2.dateFormat.value, format = _props2$dateFormat$va === undefined ? 'yyyy-mm-dd' : _props2$dateFormat$va; if (!date) return; if (typeof date === 'string') { var _date$split = date.split('-'), _year = _date$split[0], _month = _date$split[1], _day = _date$split[2]; return format.replace(/yyyy/, _year).replace(/mm/, _month).replace(/dd/, _day); } var year = date.getFullYear(); var month = intPrefix(date.getMonth() + 1); var day = intPrefix(date.getUTCDate()); return format.replace(/yyyy/, year).replace(/mm/, month).replace(/dd/, day); }; var toDateStr = function toDateStr(date) { if (!date) return; var year = date.getFullYear(); var month = intPrefix(date.getMonth() + 1); var day = intPrefix(date.getDate()); return year + '-' + month + '-' + day; }; var toDateTimeStr = function toDateTimeStr(date) { if (!date) return; var ymd = toDateStr(date); var hour = intPrefix(date.getHours()); var minute = intPrefix(date.getMinutes()); return ymd + ' ' + hour + ':' + minute; }; var getTimezoneOffset = function getTimezoneOffset(timezone) { if (!timezone) { return 0; } var cityArgs = timezone.split(' '); var splitted = cityArgs[cityArgs.length - 1].replace(/$GMT|$/g, '').split(':'); return parseInt(splitted[0] || 0, 10) + parseInt(splitted[1] || 0, 10) / 60; }; var getGMTSuffix = function getGMTSuffix(offset) { if (offset === 0) { return ''; } var offsetMinutes = Math.abs(offset) % 60; var offsetHours = Math.abs(offset - offsetMinutes) / 60; var str = intPrefix(offsetHours) + ':' + intPrefix(offsetMinutes); if (offset < 0) { return '+' + str; } return '-' + str; }; // const toJSDate = (dateStr, timezone) => { // if (!dateStr) return; // const gmtSuffix = getGMTSuffix(timezone || state.timezone); // return new Date(`${dateStr} GMT${gmtSuffix}`); // }; var getYearMonth = function getYearMonth(date) { if (!date) return; var _date$split2 = date.split('-'), y = _date$split2[0], m = _date$split2[1]; return y + '-' + m; }; var getMondayBasedDay = function getMondayBasedDay(date) { var day = date.getUTCDay(); if (day === 0) { return 6; // sunday index } return day - 1; }; var getDay = function getDay(date) { return isStartWeekOnMonday() ? getMondayBasedDay(date) : date.getUTCDay(); }; var getUserTimezone = function getUserTimezone() { try { var tzStr = Intl.DateTimeFormat().resolvedOptions().timeZone; if (tzStr) { var tz = tzStr + ' (GMT' + getGMTSuffix(new Date().getTimezoneOffset()) + ')'; return tz; } } catch (e) { console.error(e.message); } return props.timezone.value; }; var getStateFromProps = function getStateFromProps() { var newProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var startDate = new Date(newProps.startDate ? newProps.startDate.value : ''); var today = new Date(); var date = toDateStr(new Date(Math.max(startDate, today) || today)); return { date: date, timezones: state ? state.timezones : { loading: true } }; }; var getFirstAvailableDates = function getFirstAvailableDates(cb) { var _props3 = props, _props3$formID = _props3.formID, formID = _props3$formID === undefined ? global.__formInfo.id : _props3$formID; var _state = state, _state$timezone = _state.timezone, timezone = _state$timezone === undefined ? props.timezone.value : _state$timezone; // eslint-disable-next-line max-len var url = PREFIX + '?action=getAppointments&formID=' + formID + '&timezone=' + encodeURIComponent(timezone) + '&ncTz=' + new Date().getTime() + '&firstAvailableDates'; return getJSON(url, function (_ref) { var content = _ref.content; return cb(content); }); }; var state = getStateFromProps(props); var loadTimezones = function loadTimezones(cb) { setState({ timezones: { loading: true } }); getJSON((props.cdnconfig.CDN || '/') + 'assets/form/timezones.json', function (data) { var timezones = objectEntries(data).reduce(function (acc, _ref2) { var group = _ref2[0], cities = _ref2[1]; acc.push({ group: group, cities: cities }); return acc; }, []); cb(timezones); }); }; var loadMonthData = function loadMonthData(startDate, endDate, cb) { var _props4 = props, _props4$formID = _props4.formID, formID = _props4$formID === undefined ? global.__formInfo.id : _props4$formID, id = _props4.id.value; var _state2 = state, timezone = _state2.timezone; // eslint-disable-next-line max-len var url = PREFIX + '?action=getAppointments&formID=' + formID + '&qid=' + id + '&timezone=' + encodeURIComponent(timezone) + '&startDate=' + toDateStr(startDate) + '&endDate=' + toDateStr(endDate) + '&ncTz=' + new Date().getTime(); return getJSON(url, function (_ref3) { var data = _ref3.content; return cb(data); }); }; var generateMonthData = function generateMonthData(startDate, endDate, data) { var d1 = startDate.getDate(); var d2 = endDate.getDate(); var dPrefix = startDate.getFullYear() + '-' + intPrefix(startDate.getMonth() + 1) + '-'; var daysLength = d2 - d1 + 1 || 0; var days = fillArray(new Array(daysLength), ''); var slots = days.reduce(function (acc, x, day) { var _assignObject2; var dayStr = '' + dPrefix + intPrefix(day + 1); return assignObject(acc, (_assignObject2 = {}, _assignObject2[dayStr] = data[dayStr] || false, _assignObject2)); }, {}); var availableDays = Object.keys(data).filter(function (d) { return !Array.isArray(slots[d]) && !!slots[d]; }); return { availableDays: availableDays, slots: slots }; }; var lastReq = void 0; var updateMonthData = function updateMonthData(startDate, endDate, data) { var _generateMonthData = generateMonthData(startDate, endDate, data), availableDays = _generateMonthData.availableDays, slots = _generateMonthData.slots; if (JSON.stringify(slots) === JSON.stringify(state.slots)) { return; } setState({ availableDays: availableDays, slots: slots }); }; var getDateRange = function getDateRange(dateStr) { var _dateStr$split = dateStr.split('-'), y = _dateStr$split[0], m = _dateStr$split[1]; var startDate = new Date(y, m - 1, 1); var endDate = new Date(y, m, 0); return [startDate, endDate]; }; var load = function load() { var _state3 = state, dateStr = _state3.date; var _getDateRange = getDateRange(dateStr), startDate = _getDateRange[0], endDate = _getDateRange[1]; setState(assignObject({ loading: true }, generateMonthData(startDate, endDate, {}))); var req = loadMonthData(startDate, endDate, function (data) { if (lastReq !== req) { return; } updateMonthData(startDate, endDate, data); var _state4 = state, availableDays = _state4.availableDays; var newDate = availableDays.indexOf(dateStr) === -1 ? availableDays[0] : dateStr; setState({ loading: false, date: newDate || dateStr }); }); lastReq = req; }; var dateInTimeZone = function dateInTimeZone(date) { if (!date) return; var _state5 = state, timezone = _state5.timezone; var diffTime = (getTimezoneOffset(timezone) + 4) * oneHour; return new Date(date.getTime() - diffTime); }; var dz = function dz(date, tz1, tz2) { if (!date) return; var diffTime = (-tz1 + tz2) * oneHour; return new Date(date.getTime() + diffTime); }; var amPmConverter = function amPmConverter(_time) { var _props5 = props, _props5$timeFormat = _props5.timeFormat; _props5$timeFormat = _props5$timeFormat === undefined ? {} : _props5$timeFormat; var _props5$timeFormat$va = _props5$timeFormat.value, timeFormat = _props5$timeFormat$va === undefined ? '24 Hour' : _props5$timeFormat$va; if (!_time || !(typeof _time === 'string') || _time.indexOf('M') > -1 || !timeFormat || timeFormat === '24 Hour') { return _time; } var time = _time.substring(0, 2); var hour = time % 12 || 12; var ampm = time < 12 ? 'AM' : 'PM'; return '' + hour + _time.substring(2, 5) + ' ' + ampm; }; var validate = function validate(dateStr, cb) { var parts = dateStr.split(' '); var slot = parts.slice(1).join(' '); var _parts$0$split = parts[0].split('-'), y = _parts$0$split[0], m = _parts$0$split[1], d = _parts$0$split[2]; var startDate = new Date(y, m - 1, 1); var endDate = new Date(y, m, 0); loadMonthData(startDate, endDate, function (data) { var day = y + '-' + m + '-' + d; var isValid = JotForm.checkAppointmentAvailability(day, amPmConverter(slot), data); cb(isValid); if (!isValid) { var _assignObject3; // add unavailable slot if it is not in response for deselection data[day] = assignObject({}, data[day], (_assignObject3 = {}, _assignObject3[slot] = false, _assignObject3)); } // still in same month if (state.date.indexOf(y + '-' + m) === 0) { updateMonthData(startDate, endDate, data); } }); }; // let validationInterval; var setValue = function setValue(value) { input.value = value ? toDateTimeStr(dateInTimeZone(new Date(value.replace(/-/g, '/')))) : ''; setState({ value: value }); // clearInterval(validationInterval); var validation = function validation(_value) { var shouldValidate = _value || $(input).hasClassName('validate'); if (!shouldValidate) { $(input).addClassName('valid'); JotForm.corrected(input); return; } if (!_value) { $(input).removeClassName('valid'); return JotForm.errored(input, JotForm.texts.required); } validate(_value, function (isValid) { if (isValid) { $(input).addClassName('valid'); return JotForm.corrected(input); } // clearInterval(validationInterval); var parts = _value.split(' '); var dateStr = parts[0]; var date = new Date(dateStr); var day = getDay(date); var datetime = dayNames()[day] + ', ' + monthNames()[date.getMonth()] + ' ' + intPrefix(date.getUTCDate()) + ', ' + date.getFullYear(); var time = parts.slice(1).join(' '); var errorText = JotForm.texts.slotUnavailable.replace('{time}', time).replace('{date}', datetime); $(input).removeClassName('valid'); JotForm.errored(input, errorText); }); }; validation(value); // validationInterval = setInterval(() => { validation(state.value); }, 1000 * 5); }; var handleClick = function handleClick(e) { var target = e.target; var $target = $(target); if (!$target || !$target.hasClassName) { return; } if ($target.hasClassName('disabled') && !$target.hasClassName('active')) { return; } e.preventDefault(); var value = target.dataset.value; setValue($target.hasClassName('active') ? undefined : value); }; var setTimezone = function setTimezone(timezone) { tzInput.value = timezone; setState({ timezone: timezone }); if (input.value) { var date = toDateTimeStr(dz(new Date(input.value.replace(/-/g, '/')), -4, getTimezoneOffset(state.timezone))); setDate(date.split(' ')[0]); setState({ value: date }); } }; var handleTimezoneChange = function handleTimezoneChange(e) { var target = e.target; var timezone = target.value; setTimezone(timezone); }; var setDate = function setDate(date) { return setState({ date: date }); }; var handleDateChange = function handleDateChange(e) { var target = e.target; var date = target.dataset.value; if (!date) return; setDate(date); }; var handleMonthYearChange = function handleMonthYearChange(e) { var _e$target = e.target, dataset = _e$target.dataset, inputVal = _e$target.value; var name = dataset.name; if (!name) { return; } var _state6 = state, date = _state6.date; var oldDate = new Date(date); var oldMonth = oldDate.getMonth(); var oldYear = oldDate.getFullYear(); var oldDay = oldDate.getUTCDate(); var value = inputVal || e.target.getAttribute('value'); if (name === 'month') { return setDate(toDateStr(new Date(oldYear, value, oldDay))); } return setDate(toDateStr(new Date(value, oldMonth, oldDay))); }; var toggleMobileState = function toggleMobileState() { var $wrapper = $(wrapper); if ($wrapper.hasClassName('isOpenMobile')) { $wrapper.removeClassName('isOpenMobile'); } else { $wrapper.addClassName('isOpenMobile'); } }; var keepSlotsScrollPosition = function keepSlotsScrollPosition() { var visibleSlot = element.querySelector('.appointmentSlots.slots .slot.active, .appointmentSlots.slots .slot:not(.disabled)'); element.querySelector('.appointmentSlots.slots').scrollTop = visibleSlot ? visibleSlot.offsetTop : 0; }; var handleUIUpdate = function handleUIUpdate() { try { var breakpoints = { 450: 'isLarge', 225: 'isNormal', 175: 'shouldBreakIntoNewLine' }; var offsetWidth = function () { try { var appointmentCalendarRow = element.querySelector('.appointmentFieldRow.forCalendar'); var appointmendCalendar = element.querySelector('.appointmentCalendar'); return appointmentCalendarRow.getBoundingClientRect().width - appointmendCalendar.getBoundingClientRect().width; } catch (e) { return null; } }(); if (offsetWidth === null || parseInt(wrapper.readAttribute('data-breakpoint-offset'), 10) === offsetWidth) { return; } var breakpoint = Object.keys(breakpoints).reduce(function (prev, curr) { return Math.abs(curr - offsetWidth) < Math.abs(prev - offsetWidth) ? curr : prev; }); var breakpointName = breakpoints[breakpoint]; wrapper.setAttribute('data-breakpoint', breakpointName); wrapper.setAttribute('data-breakpoint-offset', offsetWidth); } catch (e) { // noop. } }; var uiUpdateInterval = void 0; var effects = function effects() { clearInterval(uiUpdateInterval); var shouldLoad = changed.timezone && changed.timezone !== state.timezone || // time zone changed changed.date && getYearMonth(changed.date) !== getYearMonth(state.date); // y-m changed changed = {}; if (shouldLoad) { load(); } var cancelBtn = element.querySelector('.cancel'); if (cancelBtn) { cancelBtn.addEventListener('click', function () { setValue(undefined); }); } var forSelectedDate = element.querySelector('.forSelectedDate span'); if (forSelectedDate) { forSelectedDate.addEventListener('click', function () { setDate(state.value.split(' ')[0]); }); } element.querySelector('.calendar .days').addEventListener('click', handleDateChange); element.querySelector('.monthYearPicker').addEventListener('change', handleMonthYearChange); element.querySelector('.dayPicker').addEventListener('click', handleDateChange); element.querySelector('.timezonePicker').addEventListener('change', handleTimezoneChange); element.querySelector('.selectedDate').addEventListener('click', toggleMobileState); Array.prototype.slice.call(element.querySelectorAll('.monthYearPicker .pickerArrow')).forEach(function (el) { return el.addEventListener('click', handleMonthYearChange); }); Array.prototype.slice.call(element.querySelectorAll('.slot')).forEach(function (el) { return el.addEventListener('click', handleClick); }); keepSlotsScrollPosition(); uiUpdateInterval = setInterval(handleUIUpdate, 250); JotForm.runAllCalculations(); }; var renderMonthYearPicker = function renderMonthYearPicker() { var _state7 = state, date = _state7.date; var _split = (date || '-').split('-'), year = _split[0], month = _split[1]; var yearOpts = fillArray(new Array(20), '').map(function (v, i) { return '' + (2020 + i); }); return '\n <div class=\'monthYearPicker\'>\n <div class=\'pickerItem\'>\n <select class=\'pickerMonth\' data-name=\'month\'>\n ' + monthNames().map(function (monthName, i) { return '<option ' + (parseInt(month, 10) === i + 1 ? 'selected' : '') + ' value=\'' + i + '\'>' + monthName + '</option>'; }).join('') + '\n </select>\n <button type=\'button\' class=\'pickerArrow pickerMonthArrow prev\' value=\'' + (parseInt(month, 10) - 2) + '\' data-name=\'month\'></button>\n <button type=\'button\' class=\'pickerArrow pickerMonthArrow next\' value=\'' + parseInt(month, 10) + '\' data-name=\'month\'></button>\n </div>\n <div class=\'pickerItem\'>\n <select class=\'pickerYear\' data-name=\'year\'>\n ' + yearOpts.map(function (yearName) { return '<option ' + (year === yearName ? 'selected' : '') + '>' + yearName + '</option>'; }).join('') + '\n </select>\n <button type=\'button\' class=\'pickerArrow pickerYearArrow prev\' value=\'' + (parseInt(year, 10) - 1) + '\' data-name=\'year\' />\n <button type=\'button\' class=\'pickerArrow pickerYearArrow next\' value=\'' + (parseInt(year, 10) + 1) + '\' data-name=\'year\' />\n </div>\n </div>\n '; }; var getNav = function getNav() { var _state8 = state, availableDays = _state8.availableDays, dateStr = _state8.date; var next = void 0; var prev = void 0; var _dateStr$split2 = dateStr.split('-'), year = _dateStr$split2[0], month = _dateStr$split2[1]; if (availableDays) { var dayIndex = availableDays.indexOf(dateStr); if (dayIndex > 0) { prev = availableDays[dayIndex - 1]; } else { var prevDate = new Date(year, month - 1, 0); prev = toDateStr(prevDate); } if (dayIndex + 1 < availableDays.length) { next = availableDays[dayIndex + 1]; } else { var nextDate = new Date(year, month, 1); next = toDateStr(nextDate); } } return { prev: prev, next: next }; }; var renderDayPicker = function renderDayPicker() { var _state9 = state, loading = _state9.loading; var _getNav = getNav(), prev = _getNav.prev, next = _getNav.next; return '\n <div class=\'appointmentDayPicker dayPicker\'>\n <button type=\'button\' ' + (loading || !prev ? 'disabled' : '') + ' class="appointmentDayPickerButton prev" ' + (prev && 'data-value="' + prev + '"') + '><</button>\n <button type=\'button\' ' + (loading || !next ? 'disabled' : '') + ' class="appointmentDayPickerButton next" ' + (next && 'data-value="' + next + '"') + '>></button>\n </div>\n '; }; var renderTimezonePicker = function renderTimezonePicker() { var _state10 = state, timezone = _state10.timezone, timezones = _state10.timezones; return '\n <div class=\'timezonePickerWrapper\'> \n <select class=\'timezonePicker\'>\n ' + (!timezones.loading && timezones.map(function (_ref4) { var group = _ref4.group, cities = _ref4.cities; return '\n <optgroup label="' + group + '">\n ' + cities.map(function (val) { return '<option ' + (timezone === group + '/' + val ? 'selected' : '') + ' value=\'' + group + '/' + val + '\'>' + val + '</option>'; }).join('') + '\n </optgroup>\n '; }).join('')) + '\n </select>\n <div class=\'timezonePickerName\'>' + timezone + '</div>\n </div>\n '; }; var renderCalendarDays = function renderCalendarDays() { var _state11 = state, slots = _state11.slots, dateStr = _state11.date, value = _state11.value, availableDays = _state11.availableDays; var days = slots ? Object.keys(slots) : []; var todayStr = toDateStr(new Date()); if (!days.length) { return ''; } var firstDay = getDay(new Date(days[0])); days.unshift.apply(days, fillArray(new Array(firstDay), 'precedingDay')); var trailingDays = Math.ceil(days.length / 7) * 7 - days.length; days.push.apply(days, fillArray(new Array(trailingDays), 'trailingDay')); var weeks = days.map(function (item, i) { return i % 7 === 0 ? days.slice(i, i + 7) : null; }).filter(function (a) { return a; }); var dateValue = value && value.split(' ')[0]; return '\n ' + weeks.map(function (week) { return '<div class=\'calendarWeek\'>' + week.map(function (day) { if (day === 'precedingDay' || day === 'trailingDay') { return '<div class="calendarDay ' + day + ' empty"></div>'; } var active = day === dateStr; var isToday = todayStr === day; var isUnavailable = availableDays.indexOf(day) === -1; var isSelected = day === dateValue; var classes = 'calendarDay ' + classNames({ isSelected: isSelected, isToday: isToday, isUnavailable: isUnavailable, isActive: active }); return '<div class=\'' + classes + '\' data-value=\'' + day + '\'><span class=\'calendarDayEach\'>' + day.split('-')[2].replace(/^0/, '') + '</span></div>'; }).join('') + '</div>'; }).join('') + '\n '; }; var renderEmptyState = function renderEmptyState() { /* eslint-disable */ return '\n <div class="appointmentSlots-empty">\n <div class="appointmentSlots-empty-container">\n <div class="appointmentSlots-empty-icon">\n <svg width="124" height="102" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <defs>\n <path d="M55 32.001c0 21.54 17.46 39 39 39 3.457 0 6.81-.45 10-1.294v34.794H0v-104l71 .001c-9.7 7.095-16 18.561-16 31.5z" id="a"/>\n </defs>\n <g fill="none" fill-rule="evenodd">\n <g transform="translate(-1 -1)">\n <mask id="b" fill="#fff">\n <use xlink:href="#a"/>\n </mask>\n <g mask="url(#b)">\n <path d="M18.85 52.001c9.858 0 17.85 7.992 17.85 17.85 0 9.859-7.992 17.85-17.85 17.85S1 79.71 1 69.851c0-9.858 7.992-17.85 17.85-17.85zm5.666 10.842L17.38 69.98l-2.44-2.44a2.192 2.192 0 00-3.1 3.1l3.99 3.987a2.192 2.192 0 003.098 0l8.687-8.686a2.191 2.191 0 00-3.1-3.099z" fill="#D5D6DA"/>\n <path d="M92.043 10.643H81.597V7.576A6.582 6.582 0 0075.023 1a6.582 6.582 0 00-6.574 6.575v3.067H41.833V7.576A6.582 6.582 0 0035.26 1a6.582 6.582 0 00-6.574 6.575v3.149a2.187 2.187 0 00-.585-.082H19.37c-6.042 0-10.957 4.916-10.957 10.958v27.126a2.192 2.192 0 004.383 0V33.215h86.211a2.192 2.192 0 000-4.383H12.795v-7.231a6.582 6.582 0 016.574-6.575H28.1c.203 0 .398-.03.585-.08v2.82a6.582 6.582 0 006.574 6.574c3.625 0 10.574-2.95 10.574-6.574v-2.74H68.45v2.74a6.582 6.582 0 006.574 6.574c3.625 0 7.574-2.95 7.574-6.574v-2.74h9.446a6.582 6.582 0 016.574 6.575v73.072a3.95 3.95 0 01-3.946 3.945h-77.95a3.95 3.95 0 01-3.944-3.944v-5.67c0-1.047-.981-2.192-2.192-2.192-1.21 0-2.191.981-2.191 2.192v5.67c0 4.592 3.736 8.327 8.327 8.327h77.95c4.592 0 8.328-3.736 8.328-8.328V21.601c0-6.042-4.915-10.958-10.957-10.958zM37.45 17.766a2.194 2.194 0 01-2.191 2.191 2.194 2.194 0 01-2.191-2.191V7.576c0-1.209.983-2.192 2.19-2.192 1.21 0 2.192.983 2.192 2.192v10.19zm39.764 0a2.194 2.194 0 01-2.191 2.191 2.194 2.194 0 01-2.191-2.191V7.576c0-1.209.983-2.192 2.191-2.192 1.208 0 2.191.983 2.191 2.192v10.19z" fill="#D5D6DA" fill-rule="nonzero"/>\n <path d="M55.68 63.556c-4.592 0-8.328 3.736-8.328 8.327 0 4.592 3.736 8.328 8.327 8.328 4.592 0 8.328-3.736 8.328-8.328 0-4.591-3.736-8.327-8.328-8.327zm0 12.272a3.95 3.95 0 01-3.945-3.945 3.95 3.95 0 013.944-3.944 3.95 3.95 0 013.945 3.944 3.95 3.95 0 01-3.945 3.945zm26.854-12.272c-4.591 0-8.327 3.736-8.327 8.327 0 4.592 3.736 8.328 8.327 8.328 4.592 0 8.328-3.736 8.328-8.328 0-4.591-3.736-8.327-8.328-8.327zm0 12.272a3.95 3.95 0 01-3.944-3.945 3.95 3.95 0 013.944-3.944 3.95 3.95 0 013.945 3.944 3.95 3.95 0 01-3.945 3.945zM30.126 36.701c-4.591 0-8.327 3.736-8.327 8.328 0 4.591 3.736 8.327 8.327 8.327 4.592 0 8.328-3.736 8.328-8.327 0-4.592-3.736-8.328-8.328-8.328zm0 12.272a3.95 3.95 0 01-3.944-3.944 3.95 3.95 0 013.944-3.945 3.95 3.95 0 013.945 3.945 3.95 3.95 0 01-3.945 3.944z" fill="#D5D6DA" fill-rule="nonzero"/>\n <path d="M83.836 36.701c-4.592 0-8.328 3.736-8.328 8.328 0 4.591 3.736 8.327 8.328 8.327 4.591 0 8.327-3.736 8.327-8.327 0-4.592-3.736-8.328-8.327-8.328zm0 12.272a3.95 3.95 0 01-3.945-3.944 3.95 3.95 0 013.945-3.945 3.95 3.95 0 013.944 3.945 3.95 3.95 0 01-3.944 3.944z" fill="#2B3245" fill-rule="nonzero"/>\n <path d="M56.981 36.701c-4.592 0-8.327 3.736-8.327 8.328 0 4.591 3.735 8.327 8.327 8.327 4.592 0 8.327-3.736 8.327-8.327 0-4.592-3.735-8.328-8.327-8.328zm0 12.272a3.95 3.95 0 01-3.944-3.944 3.95 3.95 0 013.944-3.945 3.95 3.95 0 013.945 3.945 3.95 3.95 0 01-3.945 3.944z" fill="#D5D6DA" fill-rule="nonzero"/>\n <path d="M68.829 11.201l.001 6.375a6.375 6.375 0 006.146 6.371l.229.004a6.375 6.375 0 006.371-6.146l.004-.229-.001-6.375h6.871c6.627 0 12 5.373 12 12v8.4H11.2v-8.4c0-6.627 5.373-12 12-12h5.849l.001 6.75a6 6 0 005.775 5.996l.225.004h.375a6.375 6.375 0 006.375-6.375l-.001-6.375h27.03z" fill="#D5D6DA"/>\n </g>\n </g>\n <path d="M92 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32C60 14.327 74.327 0 92 0zm21.268 15.365L75.365 53.268A26.884 26.884 0 0092 59c14.912 0 27-12.088 27-27a26.88 26.88 0 00-5.732-16.635zM92 5C77.088 5 65 17.088 65 32c0 6.475 2.28 12.417 6.079 17.069l37.99-37.99A26.888 26.888 0 0092 5z" fill="#D5D6DA"/>\n </g>\n </svg>\n </div>\n <div class="appointmentSlots-empty-text">' + JotForm.texts.noSlotsAvailable + '</div>\n </div>\n </div>\n '; /* eslint-enable */ }; var renderSlots = function renderSlots() { var _state12 = state, dateStr = _state12.date, _state12$value = _state12.value, dateValue = _state12$value === undefined ? '' : _state12$value; var _props6 = props, _props6$timeFormat = _props6.timeFormat; _props6$timeFormat = _props6$timeFormat === undefined ? {} : _props6$timeFormat; var _props6$timeFormat$va = _props6$timeFormat.value, timeFormat = _props6$timeFormat$va === undefined ? '24 Hour' : _props6$timeFormat$va; var entries = state.slots && state.slots[dateStr] && objectEntries(state.slots[dateStr]); if (!entries || !entries.length) { return renderEmptyState(); } var stateTime = new Date(dateValue.replace(/-/g, '/')).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: timeFormat === 'AM/PM' }); var stateDate = dateValue && dateValue.split(' ')[0]; return entries.map(function (_ref5) { var name = _ref5[0], value = _ref5[1]; var slotValue = dateStr + ' ' + name; var stateValue = stateDate + ' ' + stateTime; var isActive = stateValue === slotValue; return '<div class="appointmentSlot slot ' + classNames({ disabled: !value, active: isActive }) + '" data-value="' + slotValue + '">' + name + '</div>'; }).join(''); }; var renderDay = function renderDay() { var _state13 = state, dateStr = _state13.date; var date = new Date(dateStr); var day = getDay(date); return '\n <div class=\'appointmentDate\'>\n ' + (dateStr && dayNames()[day] + ', ' + monthNames()[date.getUTCMonth()] + ' ' + intPrefix(date.getUTCDate())) + '\n </div>\n '; }; var renderCalendar = function renderCalendar() { var _state14 = state, dateStr = _state14.date; return '\n <div class=\'selectedDate\'>\n <input class=\'currentDate\' type=\'text\' value=\'' + toFormattedDateStr(dateStr) + '\' style=\'pointer-events: none;\' />\n </div>\n ' + renderMonthYearPicker() + '\n <div class=\'appointmentCalendarDays days\'>\n <div class=\'daysOfWeek\'>\n ' + dayNames().map(function (day) { return '<div class="dayOfWeek ' + day.toLowerCase() + '">' + day.toUpperCase().slice(0, 3) + '</div>'; }).join('') + '\n </div>\n ' + renderCalendarDays() + '\n </div>\n '; }; var renderSelectedDate = function renderSelectedDate() { var _state15 = state, _state15$value = _state15.value, value = _state15$value === undefined ? '' : _state15$value; var dateStr = value && value.split(' ')[0]; var _props7 = props, _props7$timeFormat = _props7.timeFormat; _props7$timeFormat = _props7$timeFormat === undefined ? {} : _props7$timeFormat; var _props7$timeFormat$va = _props7$timeFormat.value, timeFormat = _props7$timeFormat$va === undefined ? '24 Hour' : _props7$timeFormat$va; var date = new Date(dateStr); var time = new Date(value.replace(/-/g, '/')).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: timeFormat === 'AM/PM' }); var day = getDay(date); var datetime = dayNames()[day] + ', ' + monthNames()[date.getUTCMonth()] + ' ' + intPrefix(date.getUTCDate()) + ', ' + date.getFullYear(); var text = JotForm.texts.appointmentSelected.replace('{time}', time).replace('{date}', datetime); var valEl = '<div style=\'display: none\' class=\'jsAppointmentValue\'>' + datetime + ' ' + time + '</div>'; return value ? valEl + '<div class=\'appointmentFieldRow forSelectedDate\'><span>' + text + '</span><button type=\'button\' class=\'cancel\'>x</button></div>' : ''; }; var render = debounce(function () { var _state16 = state, loading = _state16.loading; beforeRender(); element.innerHTML = '\n <div class=\'appointmentFieldContainer\'>\n <div class=\'appointmentFieldRow forCalendar\'>\n <div class=\'calendar appointmentCalendar\'>\n <div class=\'appointmentCalendarContainer\'>\n ' + renderCalendar() + '\n </div>\n </div>\n <div class=\'appointmentDates\'>\n <div class=\'appointmentDateSelect\'>\n ' + renderDay() + '\n ' + renderDayPicker() + '\n </div>\n <div class=\'appointmentSlots slots ' + classNames({ isLoading: loading }) + '\'>\n <div class=\'appointmentSlotsContainer\'>\n ' + renderSlots() + '\n </div>\n </div>\n <div class=\'appointmentCalendarTimezone forTimezonePicker\'>\n ' + renderTimezonePicker() + '\n </div>\n </div>\n </div>\n ' + renderSelectedDate() + '\n </div>\n '; afterRender(); }); var update = function update(newProps) { state = assignObject({}, state, getStateFromProps(newProps)); props = newProps; load(); }; input.addEventListener('change', function (e) { var date = toDateTimeStr(dz(new Date(e.target.value), -4, getTimezoneOffset(state.timezone))); setDate(date.split(' ')[0]); setState({ value: date }); }); tzInput.addEventListener('change', function (e) { return setTimezone(e.target.value); }); document.addEventListener('translationLoad', function () { return render(); }); var getInitialData = function getInitialData(timezones) { getFirstAvailableDates(function (data) { JotForm.appointments.initialData = data; JotForm.appointments.listeners.forEach(function (fn) { return fn({ data: data, timezones: timezones }); }); }); }; if (!JotForm.appointments) { JotForm.appointments = { listeners: [] }; loadTimezones(function (timezones) { JotForm.timezones = timezones; getInitialData(timezones); }); } var requestTry = 1; var requestTimeout = 1000; var construct = function construct(_ref6) { var data = _ref6.data, timezones = _ref6.timezones; var qdata = data[props.id.value]; if (!qdata || qdata.error) { constructed = true; if (!qdata && requestTry < 4) { requestTry += 1; setTimeout(function () { getInitialData(JotForm.timezones); }, requestTry * requestTimeout); } return; } constructed = false; var userTimezone = getUserTimezone(); var _userTimezone$split = userTimezone.split('/'), cont = _userTimezone$split[0], city = _userTimezone$split[1]; var timezone = timezones[cont] && timezones[cont].find(function (c) { return c.indexOf(city) !== -1; }) && userTimezone || props.timezone.value; setTimezone(timezone); var dateStr = Object.keys(qdata)[0]; var _getDateRange2 = getDateRange(dateStr), startDate = _getDateRange2[0], endDate = _getDateRange2[1]; updateMonthData(startDate, endDate, qdata); var _state17 = state, availableDays = _state17.availableDays; var newDate = availableDays.indexOf(dateStr) === -1 ? availableDays[0] : dateStr; constructed = true; setState({ timezones: timezones, loading: false, date: newDate || dateStr }); }; JotForm.appointments.listeners.push(construct); if (JotForm.appointments.initialData) { setTimeout(function () { construct({ data: JotForm.appointments.initialData, timezones: JotForm.timezones }); }, requestTimeout); }

"Untitled"
Bootstrap 4.1.1 Snippet by maandi

Related: See More

Questions / Comments:

"Untitled" Bootstrap 4.1.1 Snippet by maandi

Related: See More

Questions / Comments:

"Untitled"
Bootstrap 4.1.1 Snippet by maandi