Hello,
I’m trying to pass data to a second page in my site. I was given a plugin by our hotel management system. However, i cant get the java script to be called to display the calendar.
I need to pass data in this format to an embed page.
http://beach-break-surf-camp.webflow.io/playa-venao-instant-book?to=2018-03-16&from=2018-03-14
Below is the code i was given. However, when rendered the calendar does not show up.
I need to put this code in the header but i think it causes a conflict as it is not rendered on publishing.
put this 3 lines on the header of the website, be careful, this uses jquery, if other javascript library is present, must use jquery No Conflict
<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
|
<div class="reservation-picker">
<div style="font-weight: bold; height: 30px; padding: 15px 0 10px 0;"><span class="restext"> Reservas </span></div>
<input id="from" type="text" value="DESDE" /> <br /> <input id="to" type="text" value="HASTA" /> <br /> <button id="search" class="minimal-indent">Buscar</button> <br /><br />
<script type="text/javascript">// <![CDATA[
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '<Ant',
nextText: 'Sig>',
currentText: 'Hoy',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader: 'Sm',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['es']);
$(function() {
var to,
from;
$( "#from" ).datepicker({
defaultDate: "+1w",
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
dateFormat: "yy-mm-dd",
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
$('#search').click(function(){
from = $("#from").datepicker().val();
to = $("#to").datepicker().val();
window.location.href = "http://beach-break-surf-camp.webflow.io/playa-venao-instant-book?to="+to+"&from="+from;
});
});
// ]]></script>
</div>
and