tickets.avonturenboerderij.nl
Open in
urlscan Pro
20.105.232.2
Public Scan
Submitted URL: https://www.tickets.avonturenboerderij.nl/
Effective URL: https://tickets.avonturenboerderij.nl/nl-NL/tickets
Submission: On April 26 via automatic, source certstream-suspicious — Scanned from NL
Effective URL: https://tickets.avonturenboerderij.nl/nl-NL/tickets
Submission: On April 26 via automatic, source certstream-suspicious — Scanned from NL
Form analysis 1 forms found in the DOM
POST /nl-NL/tickets/Confirm
<form class="orderForm" id="orderForm-de3d0dcd-60e0-49f8-8c5c-31a34a7a07c2" method="post" action="/nl-NL/tickets/Confirm">
<div class="row">
<div class="col-lg-4 order-lg-last mb-md-4 mb-lg-0">
<div class="sticky-wrapper">
<div id="selectedDate">
<div class="day">
<h6>%DAYNAME%</h6>
</div>
<div class="date">
<span>%DAYNR%</span> %MONTHNAME% %YEAR%
</div>
<!-- Button trigger modal -->
<button type="button" id="resetDateTrigger" class="btn btn-primary btn-sm"> Datum aanpassen <i class="fas fa-edit"></i>
</button>
</div>
<div id="priceTypeShoppingCart">
<div class="form-row m-0">
<div class="col-12 p-0">
<div class="priceTypeShoppingCartHeader">
<span>Winkelmand</span>
<span class="badge" id="shopping-cart-total-amount">0</span>
<i class="fas fa-angle-double-up d-inline-block d-md-none"></i>
</div>
</div>
<div class="priceTypeShoppingCartContentWrapper col-12 p-0">
<div class="form-row m-0">
<div class="col-12 priceTypeShoppingCartPlaceholderWrapper p-0">
<div class="priceTypeShoppingCartPlaceholder">
<p>Je winkelmand is leeg</p>
</div>
</div>
<div class="col-12 product-wrapper p-0">
<div class="form-row"></div>
</div>
<div class="scroll-show">
<i class="fas fa-angle-down"></i><span></span>
</div>
<div class="col-12 order-2 p-0">
<div class="priceTypeShoppingCartFooter">
<div class="priceTypeShoppingCartFooterDiscount">
<button class="btn btn-link text-decoration-none p-0" type="button"><i class="fas fa-angle-right"></i> Promotiecode invoeren</button>
<div class="input-group code-input">
<input class="form-control form-control-sm" id="discount-code" type="text" placeholder="Vul hier je code in">
<div class="input-group-append">
<button class="btn btn-primary btn-sm" type="button"><i class="fas fa-plus"></i></button>
</div>
</div>
</div>
<div class="priceTypeShoppingCartFooterTotal priceTypeShoppingCartDiscountTotal" style="display:none;">
<h6 id="discount-total-value">Korting</h6>
<h6 class="totalPrice" id="shopping-cart-discount-price"></h6>
</div>
<div class="priceTypeShoppingCartFooterTotal">
<h6>Totaal</h6>
<h6 class="totalPrice" id="shopping-cart-total-price">€ %totalPrice%</h6>
</div>
<button class="btn btn-primary place-order" type="button">Bestelling afronden <i class="fas fa-angle-right"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="priceTypeShoppingCartItemTemplate">
<div class="priceTypeShoppingCartItemContent">
<div class="overlay"></div>
<h6>%priceTypeTicketName% <i class="actionIcon fas fa-trash-alt actionDeleteFromCart"></i></h6>
<span class="cartItemDate" style="display: none;">%priceTypeDateFull%</span>
<div class="controls-wrapper">
<div class="controls">
<div class="timeSlot-wrapper">
<select class="timeSlot form-control form-control-sm">
<option value="" disabled="" selected="">Selecteer tijdslot</option>
<option value="540">09:00 ~ 10:00</option>
<option value="600">10:00 ~ 11:00</option>
<option value="660">11:00 ~ 12:00</option>
<option value="720">12:00 ~ 13:00</option>
<option value="780">13:00 ~ 14:00</option>
<option value="840">14:00 ~ 15:00</option>
<option value="900">15:00 ~ 16:00</option>
<option value="960">16:00 ~ 17:00</option>
</select>
</div>
<div class="amountChoice-wrapper">
<select class="amountChoice form-control form-control-sm">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
<div class="total-price">
<h6>€ %totalItemPricePresentation%</h6>
</div>
</div>
</div>
</div>
<div id="priceTypeMenuItemTemplate">
<div class="priceTypeMenuItemContent">
<div class="overlay"></div>
<div class="priceTypeMenuItemDescription">
<h5>%priceTypeTicketName%</h5>
<h6 class="d-block d-md-none">%pricePresentation%</h6>
<p>
<span class="icon-wrapper" data-toggle="tooltip" title="Tijdslot keuze vereist">
<i class="infoIcon"></i>
</span> %priceTypeDescription%
</p>
<div class="controls"></div>
</div>
<div class="priceTypeMenuItemTotal">
<h6 class="d-none d-md-block">%pricePresentation%</h6>
</div>
</div>
</div>
<div id="productCardTemplate">
<div class="card-header" id="heading%categoryId%">
<button class="btn collapsed" data-toggle="collapse" data-target="#collapse%categoryId%" aria-expanded="true" aria-controls="collapse%categoryId%" type="button" tabindex="0">
<div>%categoryName% <span class="badge"></span></div><i class="fas fa-plus-circle"></i>
</button>
</div>
<div id="collapse%categoryId%" class="collapse" aria-labelledby="heading%categoryId%" data-parent="#accordion">
<div class="card-body">
<div class="priceTypeMenu form-row"></div>
</div>
</div>
</div>
<div class="alert alert-primary alert-date" role="alert"> Let op! Deze tickets zijn uitsluitend te gebruiken op <strong id="alert-selected-date">%selectedDate%</strong>. </div>
<div id="group-alert" class="alert alert-tertiary" style="display:none"> NOTICE_GROUP_TICKETS_MIN_NOT_REACHED </div>
</div>
</div>
<div class="col-lg-8 order-lg-first">
<h1 class="content-title step-datepicker">
<span class="current-step">Stap 1 van 3</span> Wanneer wil je ons bezoeken? <div id="sub-header" style="display:none">SUB_TITLE_CHOOSE_DATE</div>
</h1>
<h1 class="content-title step-productselect" style="display:none;">
<span class="current-step">Stap 2 van 3</span> Welke tickets wil je boeken?
</h1>
<h1 class="content-title step-userdata" style="display:none;">
<span class="current-step">Laatste stap</span> Persoonlijke gegevens
</h1>
<div class="form-row">
<div class="col form-group">
<div id="datepicker" class="hasDatepicker">
<div class="loading">
<div class="loader"></div>
<p>Kalenderdagen worden opgehaald, een moment geduld aub...</p>
</div>
<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="display: block; width: 34em;">
<div class="ui-datepicker-group ui-datepicker-group-first tallest-panel">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left"><a class="ui-datepicker-prev ui-corner-all ui-state-disabled" title="←"><span class="ui-icon ui-icon-circle-triangle-w">←</span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">april</span> <span class="ui-datepicker-year">2023</span></div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th scope="col"><span title="maandag">ma</span></th>
<th scope="col"><span title="dinsdag">di</span></th>
<th scope="col"><span title="woensdag">wo</span></th>
<th scope="col"><span title="donderdag">do</span></th>
<th scope="col"><span title="vrijdag">vr</span></th>
<th scope="col" class="ui-datepicker-week-end"><span title="zaterdag">za</span></th>
<th scope="col" class="ui-datepicker-week-end"><span title="zondag">zo</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ui-datepicker-current-day" data-full-ymd-date="2023-04-01"><span class="ui-state-default">1</span></td>
<td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-02"><span class="ui-state-default">2</span></td>
</tr>
<tr>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-03"><span class="ui-state-default">3</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-04"><span class="ui-state-default">4</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-05"><span class="ui-state-default">5</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-06"><span class="ui-state-default">6</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-07"><span class="ui-state-default">7</span></td>
<td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-08"><span class="ui-state-default">8</span></td>
<td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-09"><span class="ui-state-default">9</span></td>
</tr>
<tr>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-10"><span class="ui-state-default">10</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-11"><span class="ui-state-default">11</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-12"><span class="ui-state-default">12</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-13"><span class="ui-state-default">13</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-14"><span class="ui-state-default">14</span></td>
<td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-15"><span class="ui-state-default">15</span></td>
<td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-16"><span class="ui-state-default">16</span></td>
</tr>
<tr>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-17"><span class="ui-state-default">17</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-18"><span class="ui-state-default">18</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-19"><span class="ui-state-default">19</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-20"><span class="ui-state-default">20</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-21"><span class="ui-state-default">21</span></td>
<td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-22"><span class="ui-state-default">22</span></td>
<td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-23"><span class="ui-state-default">23</span></td>
</tr>
<tr>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-24"><span class="ui-state-default">24</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled" data-full-ymd-date="2023-04-25"><span class="ui-state-default">25</span></td>
<td class="ui-datepicker-unselectable ui-state-disabled ui-datepicker-today" data-full-ymd-date="2023-04-26"><span class="ui-state-default">26</span></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="3" data-year="2023" data-full-ymd-date="2023-04-27"><a class="ui-state-default" href="#">27</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="3" data-year="2023" data-full-ymd-date="2023-04-28"><a class="ui-state-default" href="#">28</a></td>
<td class="ui-datepicker-week-end tc-tag-groen" data-handler="selectDay" data-event="click" data-month="3" data-year="2023" data-full-ymd-date="2023-04-29"><a class="ui-state-default" href="#">29</a></td>
<td class="ui-datepicker-week-end tc-tag-groen" data-handler="selectDay" data-event="click" data-month="3" data-year="2023" data-full-ymd-date="2023-04-30"><a class="ui-state-default" href="#">30</a></td>
</tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-last">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right">
<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="→"><span class="ui-icon ui-icon-circle-triangle-e">→</span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">mei</span> <span class="ui-datepicker-year">2023</span></div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th scope="col"><span title="maandag">ma</span></th>
<th scope="col"><span title="dinsdag">di</span></th>
<th scope="col"><span title="woensdag">wo</span></th>
<th scope="col"><span title="donderdag">do</span></th>
<th scope="col"><span title="vrijdag">vr</span></th>
<th scope="col" class="ui-datepicker-week-end"><span title="zaterdag">za</span></th>
<th scope="col" class="ui-datepicker-week-end"><span title="zondag">zo</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-01"><a class="ui-state-default" href="#">1</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-02"><a class="ui-state-default" href="#">2</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-03"><a class="ui-state-default" href="#">3</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-04"><a class="ui-state-default" href="#">4</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-05"><a class="ui-state-default" href="#">5</a></td>
<td class="ui-datepicker-week-end tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-06"><a class="ui-state-default" href="#">6</a></td>
<td class="ui-datepicker-week-end tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-07"><a class="ui-state-default" href="#">7</a></td>
</tr>
<tr>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-08"><a class="ui-state-default" href="#">8</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-09"><a class="ui-state-default" href="#">9</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-10"><a class="ui-state-default" href="#">10</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-11"><a class="ui-state-default" href="#">11</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-12"><a class="ui-state-default" href="#">12</a></td>
<td class="ui-datepicker-week-end tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-13"><a class="ui-state-default" href="#">13</a></td>
<td class="ui-datepicker-week-end tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-14"><a class="ui-state-default" href="#">14</a></td>
</tr>
<tr>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-15"><a class="ui-state-default" href="#">15</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-16"><a class="ui-state-default" href="#">16</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-17"><a class="ui-state-default" href="#">17</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-18"><a class="ui-state-default" href="#">18</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-19"><a class="ui-state-default" href="#">19</a></td>
<td class="ui-datepicker-week-end tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-20"><a class="ui-state-default" href="#">20</a></td>
<td class="ui-datepicker-week-end tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-21"><a class="ui-state-default" href="#">21</a></td>
</tr>
<tr>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-22"><a class="ui-state-default" href="#">22</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-23"><a class="ui-state-default" href="#">23</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-24"><a class="ui-state-default" href="#">24</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-25"><a class="ui-state-default" href="#">25</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-26"><a class="ui-state-default" href="#">26</a></td>
<td class="ui-datepicker-week-end tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-27"><a class="ui-state-default" href="#">27</a></td>
<td class="ui-datepicker-week-end tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-28"><a class="ui-state-default" href="#">28</a></td>
</tr>
<tr>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-29"><a class="ui-state-default" href="#">29</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-30"><a class="ui-state-default" href="#">30</a></td>
<td class="tc-tag-groen" data-handler="selectDay" data-event="click" data-month="4" data-year="2023" data-full-ymd-date="2023-05-31"><a class="ui-state-default" href="#">31</a></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-row-break"></div>
</div>
<div class="datepicker-legend order-last text-left mt-3 border">
<div class="row">
<div class="col-auto tc-tag-groen">
<div class="datepicker-legend__item">
<div class="square"></div>
<div>Voldoende beschikbaarheid</div>
</div>
</div>
<div class="col-auto tc-tag-oranje">
<div class="datepicker-legend__item">
<div class="square"></div>
<div>Gezellig druk</div>
</div>
</div>
<div class="col-auto tc-tag-rood">
<div class="datepicker-legend__item">
<div class="square"></div>
<div>Uitverkocht</div>
</div>
</div>
</div>
</div>
</div>
<input id="datepickerYmd" type="hidden" name="dateSelection" value="">
</div>
</div>
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults($.datepicker.regional['nl']);
// https://codepen.io/dzentbolas/pen/QjXQVw
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
$.datepicker._updateDatepicker_original(inst);
var afterShow = this._get(inst, 'afterShow');
if (afterShow) afterShow.apply((inst.input ? inst.input[0] : null)); // trigger custom callback
}
var datepickerElement = $("#datepicker");
var datePickerElementLoader = $(".datepicker-box > .loader");
var datepickerYmd = $("#datepickerYmd");
datepickerElement.attr("readonly");
datepickerElement.focus(function() {
this.blur();
});
var datepicker_dayValues = [];
var datepicker_soldOutValues = [];
var datepicker_tags = [];
var lastKnownDate = new Date();
function datepicker_getMinDate() {
if (datepicker_dayValues[0] || datepicker_soldOutValues[0]) {
var dateParts = "2000-01-01".split('-');
if (datepicker_dayValues[0]) {
dateParts = datepicker_dayValues[0].split('-');
} else if (datepicker_dayValues[0] && datepicker_soldOutValues[0] && datepicker_soldOutValues[0] < datepicker_dayValues[0]) {
dateParts = datepicker_soldOutValues[0].split('-');
}
var dateYMD = (dateParts[0] + "-" + dateParts[1] + "-01");
return $.datepicker.formatDate('DD d MM yy', new Date(dateYMD));
} else {
return '';
}
}
function datepicker_drawPanelSeparator() {
$('.ui-datepicker-group').removeClass('tallest-panel');
if ($('.ui-datepicker-group.ui-datepicker-group-last').height() > $('.ui-datepicker-group.ui-datepicker-group-first').height()) {
$('.ui-datepicker-group.ui-datepicker-group-last').addClass('tallest-panel');
} else {
$('.ui-datepicker-group.ui-datepicker-group-first').addClass('tallest-panel');
}
}
function datepicker_onSelectHandler(date, onAfter) {
// Note: "dateYMD" actually contains a textual representation: like "Donnerstag 17 Januar 2019"
var dateYMD = $.datepicker.formatDate('yy-mm-dd', datepickerElement.datepicker('getDate'));
var localisedDay = $.datepicker.formatDate('dd', datepickerElement.datepicker('getDate'));
var localisedDayName = $.datepicker.formatDate('DD', datepickerElement.datepicker('getDate'));
var localisedMonth = $.datepicker.formatDate('MM', datepickerElement.datepicker('getDate'));
var localisedYear = $.datepicker.formatDate('yy', datepickerElement.datepicker('getDate'));
datepickerYmd.val(dateYMD).data('localised-day-name', localisedDayName).data('localised-day', localisedDay).data('localised-month', localisedMonth).data('localised-year', localisedYear);
datepickerYmd.trigger('change');
}
function datepicker_onChangeMonthYear(year, month, inst) {
datepickerElement.trigger('navigated');
}
let params = new URLSearchParams(document.location.search);
var ajaxParams = {};
if (params.has("journey")) {
ajaxParams.journey = params.get("journey");
}
if (params.has("calendar-base")) {
ajaxParams["calendar-base"] = params.get("calendar-base");
}
// Initial setup
datepickerElement.addClass('inprogress');
function populateCalendar() {
$.ajax({
type: "GET",
url: "/api/v1/de3d0dcd-60e0-49f8-8c5c-31a34a7a07c2/8011d1fb-393f-4a4c-9c9b-297061014952/calendardates-basic/2023-04-26/2023-06-30/nl-NL",
data: ajaxParams,
async: true,
success: function(data) {
// first populate the array
for (var i = 0; i < data.length; i++) {
//datepicker_dayValues.push(data[i]);
if (data[i].isAvailable && data[i].isSoldOut === false) {
datepicker_dayValues.push(data[i].capacityDate);
}
if (data[i].isSoldOut) {
datepicker_soldOutValues.push(data[i].capacityDate);
}
if (data[i].tags !== null && data[i].tags !== []) {
if (!datepicker_tags[data[i].capacityDate]) {
datepicker_tags[data[i].capacityDate] = {
tags: []
};
}
$.merge(datepicker_tags[data[i].capacityDate].tags, data[i].tags);
}
}
lastKnownDate = new Date("2023-06-30")
//datepickerElement.datepicker("refresh");
datepickerElement.datepicker({
dateFormat: 'DD d MM yy',
//dateFormat: 'yy-mm-dd',
firstDay: 1, // Sunday
numberOfMonths: (window.innerWidth < 600 ? 1 : 2),
beforeShowDay: function(date) {
var day = $.datepicker.formatDate('yy-mm-dd', date);
return [$.inArray(day, datepicker_dayValues) >= 0 ? true : false, "full-ymd-date-" + day];
},
minDate: datepicker_getMinDate(),
afterShow: function(inst) {
datepicker_drawPanelSeparator();
$('[class*="full-ymd-date-"]').each(function() {
var element = $(this);
var classList = $(this).attr('class').split(/\s+/);
$.each(classList, function(index, item) {
if (item.includes('full-ymd-date-')) {
var date = item.replace('full-ymd-date-', '');
element.attr('data-full-ymd-date', date);
element.removeClass(item);
if (datepicker_soldOutValues.includes(date)) {
//console.log(date);
element.addClass('is-sold-out');
}
if (datepicker_tags.hasOwnProperty(date)) {
$.each(datepicker_tags[date].tags, function(key, tagName) {
element.addClass('tc-tag-' + tagName.toLowerCase());
});
}
}
});
});
},
onChangeMonthYear: datepicker_onChangeMonthYear,
onSelect: datepicker_onSelectHandler
});
datepickerElement.removeClass('inprogress');
datePickerElementLoader.addClass('complete');
// Fetch a couple of extra ones in this particular case, adding up to 8 months of fresh calendar info
lazyLoadMoreDates(true, function() {
datepickerElement.trigger('ready');
lazyLoadMoreDates(false, function() {
//lazyLoadMoreDates(
//false,
//function(){
//lazyLoadMoreDates(
//false,
//function() {
if (datepickerYmd.val() == '') {
datepickerElement.datepicker("setDate", datepicker_getMinDate());
} else {}
datepickerElement.trigger('painted');
//}
//);
//}
//);
});
});
}
});
}
populateCalendar();
function lazyLoadMoreDates(lock, callback) {
if (lock) {
datepickerElement.addClass('inprogress');
}
var lastKnownDatePlus = new Date();
lastKnownDatePlus.setFullYear(lastKnownDate.getFullYear(), lastKnownDate.getMonth() + 3, 0); // https://stackoverflow.com/q/222309
$.ajax({
type: "GET",
data: ajaxParams,
url: "/api/v1/de3d0dcd-60e0-49f8-8c5c-31a34a7a07c2/8011d1fb-393f-4a4c-9c9b-297061014952/calendardates-basic/" + $.datepicker.formatDate('yy-mm-dd', lastKnownDate) + "/" + $.datepicker.formatDate('yy-mm-dd', lastKnownDatePlus) +
"/nl-NL",
async: false, //
success: function(data) {
// first populate the array
for (var i = 0; i < data.length; i++) {
//datepicker_dayValues.push(data[i]);
if (data[i].isAvailable && data[i].isSoldOut === false) {
datepicker_dayValues.push(data[i].capacityDate);
}
if (data[i].isSoldOut) {
datepicker_soldOutValues.push(data[i].capacityDate);
}
if (data[i].tags !== null && data[i].tags !== []) {
if (!datepicker_tags[data[i].capacityDate]) {
datepicker_tags[data[i].capacityDate] = {
tags: []
};
}
$.merge(datepicker_tags[data[i].capacityDate].tags, data[i].tags);
}
}
datepickerElement.datepicker("refresh");
datepickerElement.removeClass('inprogress');
lastKnownDate = lastKnownDatePlus;
datepickerElement.trigger('loadedMoreDates');
if (callback) {
callback();
}
}
});
}
$(document).on('click', '.ui-datepicker-next', lazyLoadMoreDates);
$(document).on('click', '.ui-datepicker-prev,.ui-datepicker-next,#datepicker', datepicker_drawPanelSeparator);
$('#calendarChoiceSkip').on('click', function() {
$("#datepickerYmd").trigger("change");
});
datepickerElement.on('request-refresh', function(e, params) {
ajaxParams.journey = params.journey;
datepicker_dayValues = [];
lastKnownDate = new Date();
datepickerElement.removeClass('hasDatepicker');
$('.ui-datepicker').remove();
populateCalendar();
});
});
</script>
<div id="accordion">
<div class="card default-card">
<div class="card-header" id="headingOne">
<div class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div>Entree <span class="badge"></span></div><i class="fas fa-plus-circle"></i>
</div>
</div>
<div id="collapseOne" class="show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div class="priceTypeMenu form-row"></div>
</div>
</div>
</div>
</div>
<div id="personalDetails">
<div class="form-row">
<div class="col-12 col-sm">
<div class="form-group">
<label for="inputFirstname" class="required">Voornaam</label>
<input type="text" class="form-control" id="inputFirstname" placeholder="Voornaam" name="FirstName">
</div>
</div>
<div class="col-12 col-sm">
<div class="form-group">
<label for="inputLastname" class="required">Achternaam</label>
<input type="text" class="form-control" id="inputLastname" placeholder="Achternaam" name="LastName">
</div>
</div>
</div>
<div class="form-row">
<div class="col-12 col-sm">
<div class="form-group">
<label for="inputPostal" class="required">Postcode</label>
<input type="text" class="form-control" id="inputPostal" placeholder="Postcode" name="Address[PostalCode]">
</div>
</div>
</div>
<div class="form-row">
<div class="col-12 col-sm">
<div class="form-group">
<label for="inputEmail" class="required">E-mail</label>
<input type="text" class="form-control" id="inputEmail" placeholder="E-mail" name="MailAddress">
</div>
</div>
<div class="col-12 col-sm">
<div class="form-group">
<label for="inputEmailVerification" class="required">E-mail ter verificatie</label>
<input type="text" class="form-control" id="inputEmailVerification" placeholder="E-mail ter verificatie" name="MailAddressRepeat">
</div>
</div>
<div class="col-12">
<div class="alert alert-primary"> Een bevestiging van je bestelling wordt verstuurd naar het opgegeven e-mailadres. </div>
</div>
</div>
<div class="form-row mb-3">
<div class="col-12 col-sm">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="receive_passbooks" value="true" name="ReceivePassbooks:boolean">
<label class="custom-control-label" for="receive_passbooks">Ja, ik wil ook graag mijn tickets als mobiele tickets (Wallet) ontvangen</label>
</div>
</div>
</div>
</div>
<div id="payment">
<h3>Kies je betaalmethode</h3>
<div class="insurances">
<div class="row">
<div class="col-auto"><i class="fas fa-lock"></i> Beveiligde verbinding</div>
<div class="col-auto"><i class="fas fa-user-shield"></i> Privacy gewaarborgd</div>
</div>
</div>
<div class="form-row">
<div class="paymentMethod col-12 col-sm-6 col-xl-4">
<input type="radio" name="paymentId" id="ideal" value="ideal" data-category="0" checked="">
<label role="img" aria-label="ideal" class="paymentMethod" for="ideal" tabindex="0"><img src="/images/payment-options/ideal.png" alt="">
<h6>iDeal</h6>
</label>
</div>
<div class="paymentMethod col-12 col-sm-6 col-xl-4">
<input type="radio" name="paymentId" id="mrcash" value="mrcash" data-category="4">
<label role="img" aria-label="mrcash" class="paymentMethod" for="mrcash" tabindex="0"><img src="/images/payment-options/mrcash.png" alt="">
<h6>Bancontact</h6>
</label>
</div>
<div class="paymentMethod col-12 col-sm-6 col-xl-4">
<input type="radio" name="paymentId" id="sofortuber" value="sofortuber" data-category="5">
<label role="img" aria-label="sofortuber" class="paymentMethod" for="sofortuber" tabindex="0"><img src="/images/payment-options/sofortuber.png" alt="">
<h6>Sofort</h6>
</label>
</div>
</div>
<div class="form-row">
<div class="col-auto">
<h4 class="iDEALBankSelect-wrapper-title">Kies je bank</h4>
<div class="iDEALBankSelect-wrapper">
<select id="iDEALBankSelect" class="form-control">
<option value="" selected="" disabled="" hidden="">Kies je bank</option>
<option name="iDealBankId" id="ABNANL2A" value="ABNANL2A">ABN AMRO Bank</option>
<option name="iDealBankId" id="ASNBNL21" value="ASNBNL21">ASN Bank</option>
<option name="iDealBankId" id="BUNQNL2A" value="BUNQNL2A">BUNQ</option>
<option name="iDealBankId" id="HANDNL2A" value="HANDNL2A">Handelsbanken</option>
<option name="iDealBankId" id="INGBNL2A" value="INGBNL2A">ING Bank</option>
<option name="iDealBankId" id="KNABNL2H" value="KNABNL2H">Knab</option>
<option name="iDealBankId" id="RABONL2U" value="RABONL2U">Rabobank</option>
<option name="iDealBankId" id="RBRBNL21" value="RBRBNL21">RegioBank</option>
<option name="iDealBankId" id="REVOLT21" value="REVOLT21">Revolut</option>
<option name="iDealBankId" id="SNSBNL2A" value="SNSBNL2A">SNS Bank</option>
<option name="iDealBankId" id="TRIONL2U" value="TRIONL2U">Triodos Bank</option>
<option name="iDealBankId" id="FVLBNL22" value="FVLBNL22">Van Lanschot</option>
<option name="iDealBankId" id="BITSNL2A" value="BITSNL2A">Yoursafe</option>
</select><input class="form-check-input" id="hiddenIdealBankSelectorInput" name="iDealBankId" type="hidden" value="null">
</div>
</div>
</div>
</div>
<div id="terms">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="conditions" value="true" name="PrimaryConditions:boolean">
<label class="custom-control-label" for="conditions">Ik ga akkoord met de <a href="/termsconditions/nl.html" class="ajax-popup-link">voorwaarden</a> *</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="houseRules" value="true" name="Optin1:boolean" required="">
<label class="custom-control-label" for="houseRules">Ja, ik ga akkoord met het <a href="https://www.avonturenboerderij.nl/parkreglement" target="_blank">parkreglement</a> *</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="newsletter" value="true" name="ReceiveNewsletter:boolean">
<label class="custom-control-label" for="newsletter">Ja, houd mij op de hoogte van het laatste nieuws op de Avonturenboerderij met een nieuwsbrief. </label>
</div>
</div>
<div class="form-navigation justify-content-between">
<button class="btn btn-secondary backButton"><i class="fas fa-angle-left"></i> Ga terug</button>
<button type="submit" class="btn btn-primary nextButton">
<div class="d-inline-block">%stepName%</div><i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</div>
</form>Text Content
%DAYNAME% %DAYNR% %MONTHNAME% %YEAR% Datum aanpassen Winkelmand 0 Je winkelmand is leeg Promotiecode invoeren KORTING TOTAAL € %TOTALPRICE% Bestelling afronden %PRICETYPETICKETNAME% %priceTypeDateFull% Selecteer tijdslot 09:00 ~ 10:00 10:00 ~ 11:00 11:00 ~ 12:00 12:00 ~ 13:00 13:00 ~ 14:00 14:00 ~ 15:00 15:00 ~ 16:00 16:00 ~ 17:00 0 1 2 3 4 5 6 7 8 9 10 € %TOTALITEMPRICEPRESENTATION% %PRICETYPETICKETNAME% %PRICEPRESENTATION% %priceTypeDescription% %PRICEPRESENTATION% %categoryName% Let op! Deze tickets zijn uitsluitend te gebruiken op %selectedDate%. NOTICE_GROUP_TICKETS_MIN_NOT_REACHED STAP 1 VAN 3 WANNEER WIL JE ONS BEZOEKEN? SUB_TITLE_CHOOSE_DATE STAP 2 VAN 3 WELKE TICKETS WIL JE BOEKEN? LAATSTE STAP PERSOONLIJKE GEGEVENS Kalenderdagen worden opgehaald, een moment geduld aub... ← april 2023 madiwodovrzazo 123456789101112131415161718192021222324252627282930 → mei 2023 madiwodovrzazo12345678910111213141516171819202122232425262728293031 Voldoende beschikbaarheid Gezellig druk Uitverkocht Entree Voornaam Achternaam Postcode E-mail E-mail ter verificatie Een bevestiging van je bestelling wordt verstuurd naar het opgegeven e-mailadres. Ja, ik wil ook graag mijn tickets als mobiele tickets (Wallet) ontvangen KIES JE BETAALMETHODE Beveiligde verbinding Privacy gewaarborgd IDEAL BANCONTACT SOFORT KIES JE BANK Kies je bank ABN AMRO Bank ASN Bank BUNQ Handelsbanken ING Bank Knab Rabobank RegioBank Revolut SNS Bank Triodos Bank Van Lanschot Yoursafe Ik ga akkoord met de voorwaarden * Ja, ik ga akkoord met het parkreglement * Ja, houd mij op de hoogte van het laatste nieuws op de Avonturenboerderij met een nieuwsbrief. Ga terug %stepName% LET OP! DE INHOUD VAN JE WINKELMAND WORDT VERWIJDERD Annuleren Datum aanpassen WINKELMAND INHOUD IS ONGELDIG Aanpassen LET OP Doorgaan LET OP Nee Ja PROMOTIE Vul hier uw promotie code(s) in. Heeft u meer dan één code? Klik dan op meer en vul alle codes in om vervolgens op controleren te klikken. Hierna kunt uw reservering maken. Meer Controleren