Canvas Support

Data range date picker does not work

6 replies·opened Jul 16, 2018
N
NicoBootsJul 16, 2018

Hello,
Having a B&B in Italy with to holliday apartments, I am now creating a renewed site using the Canvas one page template. In the contact section and email form I intend to add a date range timne picker for users to indicate when they would like to stay with us. However, I don' get it working.

I have cut and pasted several pieces of code from component-datepicker.html into my new index.html

first, I have added a new piece of code in the form field:

<div class="col_one_third col_last">
                                    	<label for="">Date Range</label>
										<div class="input-daterange input-group">
										<input type="text" value="" class="sm-form-control tleft" placeholder="MM/DD/YYYY">
										<span class="input-group-addon">to</span>
										<input type="text" value="" class="sm-form-control tleft" placeholder="MM/DD/YYYY">
										</div>
                                    </div>

Second, I have added the scripts at the end of the page:

 <!-- Date & Time Picker JS -->
	<script type="text/javascript" src="js/components/moment.js"></script>
	<script type="text/javascript" src="demos/travel/js/datepicker.js"></script>
	<script type="text/javascript" src="js/components/timepicker.js"></script>

	<!-- Include Date Range Picker -->
	<script type="text/javascript" src="js/components/daterangepicker.js"></script>

and the final one, just before the end bodt tag:

<script type="text/javascript">
		$(function() {
			$('.travel-date-group .default').datepicker({
				autoclose: true,
				startDate: "today",
			});

			$('.travel-date-group .today').datepicker({
				autoclose: true,
				startDate: "today",
				todayHighlight: true
			});

			$('.travel-date-group .past-enabled').datepicker({
				autoclose: true,
			});
			$('.travel-date-group .format').datepicker({
				autoclose: true,
				format: "dd-mm-yyyy",
			});

			$('.travel-date-group .autoclose').datepicker();

			$('.travel-date-group .disabled-week').datepicker({
				autoclose: true,
				daysOfWeekDisabled: "0"
			});

			$('.travel-date-group .highlighted-week').datepicker({
				autoclose: true,
				daysOfWeekHighlighted: "0"
			});

			$('.travel-date-group .mnth').datepicker({
				autoclose: true,
				minViewMode: 1,
				format: "mm/yy"
			});

			$('.travel-date-group .multidate').datepicker({
				multidate: true,
				multidateSeparator: " , "
			});

			$('.travel-date-group .input-daterange').datepicker({
				autoclose: true
			});

			$('.travel-date-group .inline-calendar').datepicker();

			$('.datetimepicker').datetimepicker({
				showClose: true
			});

			$('.datetimepicker1').datetimepicker({
				format: 'LT',
				showClose: true
			});

			$('.datetimepicker2').datetimepicker({
				inline: true,
				sideBySide: true
			});

		});

		$(function() {
			// .daterange1
			$(".daterange1").daterangepicker({
				"buttonClasses": "button button-rounded button-mini nomargin",
				"applyClass": "button-color",
				"cancelClass": "button-light"
			});

			// .daterange2
			$(".daterange2").daterangepicker({
				"opens": "center",
				timePicker: true,
				timePickerIncrement: 30,
				locale: {
					format: 'MM/DD/YYYY h:mm A'
				},
				"buttonClasses": "button button-rounded button-mini nomargin",
				"applyClass": "button-color",
				"cancelClass": "button-light"
			});

			// .daterange3
			$(".daterange3").daterangepicker({
				singleDatePicker: true,
				showDropdowns: true
			},
			function(start, end, label) {
				var years = moment().diff(start, 'years');
				alert("You are " + years + " years old.");
			});

			// reportrange
			function cb(start, end) {
				$(".reportrange span").html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
			}
			cb(moment().subtract(29, 'days'), moment());

			$(".reportrange").daterangepicker({
				"buttonClasses": "button button-rounded button-mini nomargin",
				"applyClass": "button-color",
				"cancelClass": "button-light",
				ranges: {
				   'Today': [moment(), moment()],
				   'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				   'Last 7 Days': [moment().subtract(6, 'days'), moment()],
				   'Last 30 Days': [moment().subtract(29, 'days'), moment()],
				   'This Month': [moment().startOf('month'), moment().endOf('month')],
				   'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
				}
			}, cb);

			// .daterange4
			$(".daterange4").daterangepicker({
				autoUpdateInput: false,
				locale: {
					cancelLabel: 'Clear'
				},
				"buttonClasses": "button button-rounded button-mini nomargin",
				"applyClass": "button-color",
				"cancelClass": "button-light"
			});

			$(".daterange4").on('apply.daterangepicker', function(ev, picker) {
				$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
			});

			$(".daterange4").on('cancel.daterangepicker', function(ev, picker) {
				$(this).val('');
			});

		});

	</script>

Finally, I have added the links to the css files in the header:

 <!-- Date & Time Picker CSS -->
	<link rel="stylesheet" href="demos/travel/css/datepicker.css" type="text/css" />
	<link rel="stylesheet" href="css/components/timepicker.css" type="text/css" />
	<link rel="stylesheet" href="css/components/daterangepicker.css" type="text/css" />

According to me this should work, but it doesn't. Can you tell me what I am doing wrong?

S
SemiColonWebSTAFFJul 19, 2018

Hello,

The CSS/JS Links for the Date Picker were changed in the Latest Versions:

CSS: 

<link rel="stylesheet" href="css/components/datepicker.css" type="text/css" />

JS: 

<script type="text/javascript" src="js/components/datepicker.js"></script>

Additionally, can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

N
NicoBootsJul 19, 2018

Hello,

I changed the CSS/js links but it still doesn't work. The site is not yet live (I am working with a local host: XAMMP/Apache) so I can't give you a live URL. But I can give you the code of the full page (see below). I hope that this will help you to find my error.
Greetings,
Nico Boots

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="SemiColonWeb" />

	<!-- Stylesheets
	============================================= -->
	<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700|Roboto:300,400,500,700|Playfair+Display:400italic" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="style.css" type="text/css" />

	<!-- One Page Module Specific Stylesheet -->
	<link rel="stylesheet" href="one-page/onepage.css" type="text/css" />
	<!-- / -->

	<link rel="stylesheet" href="css/dark.css" type="text/css" />
	<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
	<link rel="stylesheet" href="one-page/css/et-line.css" type="text/css" />
	<link rel="stylesheet" href="css/animate.css" type="text/css" />
	<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
    
    <!-- Date & Time Picker CSS -->
	<link rel="stylesheet" href="demos/travel/css/datepicker.css" type="text/css" />
	<link rel="stylesheet" href="css/components/timepicker.css" type="text/css" />
	<link rel="stylesheet" href="css/components/daterangepicker.css" type="text/css" />

	<link rel="stylesheet" href="one-page/css/fonts.css" type="text/css" />

	<link rel="stylesheet" href="css/responsive.css" type="text/css" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<!-- Document Title
	============================================= -->
	<title>Villa I Due Padroni - Holliday home</title>

	<style>
		.small-video-button {
			width: 54px;
			height: 54px;
			line-height: 54px;
			font-size: 22px;
		}
.stretched #wrapper .content-wrap.nopadding #section-works .section.nomargin .container.clearfix .divcenter.center .col-md-8 .table.table-striped tbody tr td {
}
	.breed60: {
		width: 60%;
		}
	.breed20: {
		width: 20%;
		}
    </style>

</head>

<body class="stretched">

	<!-- Document Wrapper
	============================================= -->
	<div id="wrapper" class="clearfix">

		<!-- Header
		============================================= -->
		<header id="header" class="full-header border-full-header transparent-header dark static-sticky" data-sticky-class="not-dark" data-sticky-offset="full" data-sticky-offset-negative="100">

			<div id="header-wrap">

				<div class="container clearfix">

					<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

					<!-- Logo
					============================================= -->
					<div id="logo">
						<a href="one-page/index.html" class="standard-logo" data-dark-logo="images/Duepadroni-dark.png"><img src="one-page/images/Duepadroni.png" alt="Villa I Due Padroni"></a>
						<a href="one-page/index.html" class="retina-logo" data-dark-logo="images/Duepadroni-dark@2x.png"><img src="one-page/images/Duepadroni@2x.png" alt="Villa I Due Padroni"></a>
					</div>
                    <!-- #logo end -->

					<!-- Primary Navigation
					============================================= -->
					<nav id="primary-menu">
					  

						<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="65">
							<li><a href="indexNieuw.html"><div><img src="one-page/images/Vlaggen/Vlag-UK.png"> UK</div></a></li>
                            <li><a href="indexIT.html"><div><img src="one-page/images/Vlaggen/Vlag-IT.png"> IT</div></a></li>
                            <li><a href="indexDUI.html"><div><img src="one-page/images/Vlaggen/Vlag-DUI.png"> DE</div></a></li>
                            
                            <li><a href="#" data-href="#wrapper"><div>Home</div></a></li>
                            <li><a href="#" data-href="#section-wij"><div>Over ons</div></a></li>
							<li><a href="#" data-href="#section-appt"><div>Appartementen</div></a></li>
							<li><a href="#" data-href="#section-prijzen"><div>Prijzen</div></a></li>
							<li><a href="#" data-href="#section-omgeving"><div>Omgeving</div></a></li>
                          	<li><a href="#" data-href="#section-lokatie"><div>Locatie</div></a></li>
							<li><a href="#" data-href="#section-contact"><div>Contact</div></a></li>
						</ul>

					</nav>
                    <!-- #primary-menu end -->

				</div>

			</div>

		</header>
        <!-- #header end -->

		<!-- Slider
		============================================= -->
		<section id="slider" class="full-screen slider-parallax">

			<div class="full-screen section nopadding nomargin noborder ohidden" style="background: url('one-page/images/page/Zwembad1.jpg') bottom center no-repeat; background-size: cover;">

				<div class="container dark">
					<div class="vertical-middle">

						<div class="emphasis-title nobottommargin">
							<h1 class="t700 uppercase ls3 bottommargin-sm" style="font-family: 'Montserrat', sans-serif;">Villa I Due Padroni<span style="font-family: 'Playfair Display'; font-style: italic; text-transform: lowercase; color: #FFF;"> Biedt u:</span> 
<span class="text-rotater nocolor" data-separator="|" data-rotate="fadeInLeft" data-speed="4000">
								<span class="t-rotate" style="font-size:26px">een luxe vakantieappartement met zwembad|in de wijngaarden van Lombardije</span>
							</span></h1>
							<!--<div class="inline-block"><a id="play-hero-video" href="http://vimeo.com/117770305" class="big-video-button small-video-button pulse animated infinite" data-lightbox="iframe"><i class="icon-line-play"></i></a><span style="font-size:20px; margin-left:15px;">Play Video</span></div> -->
						</div>

					</div>
				</div>

				<a href="#" data-scrollto="#section-about" data-easing="easeInOutExpo" data-speed="1250" data-offset="65" class="one-page-arrow dark"><i class="icon-angle-down infinite animated fadeInDown"></i></a>

			</div>

		</section>
        <!-- #slider end -->
        

		<!-- Content
		============================================= -->
		<section id="content">
			
			<div class="center page-section" style="margin-top:0px; padding-top:0px">
            	<!-- Start sectie "Wie zijn wij" -->
				<div id="section-wij" class="center page-section notopmargin" style="background-color: #FEF3FC; padding-top:30px;" >
       	 		<div class="container clearfix">
          			<img src="images/Villa/HeaderNL.jpg">
            			

                		<div class="divcenter">
                        	<div class="col-md-2">

                                
                                	<div class="clearfix">
                                    	<a href="images/Villa/StationPaviaGroot.jpg" data-lightbox="image">
											<img src="images/Villa/StationPaviaGroot.jpg" alt="Single Image">
										</a><p><em>Op het station in Pavia</em></p>
                              			

                                        <a href="images/Villa/DruiventrappelGroot.jpg" data-lightbox="image">
											<img src="images/Villa/DruiventrappelGroot.jpg" alt="Single Image">
										</a><p><em>Druiven trappelen</em></p>
                           		  </div>
                          	</div>
                                 
                          	<div class="col-md-7">

                               	  <p class="lead" style="text-align:left; font-size:18px;">Wij, Nico en Stef, zijn de twee "padroni" ofwel de bazen van <strong>Villa I Due Padroni</strong>, ons vakantiehuis in Italie, èn het thuis van <strong>Joia</strong>, die het hier erg naar haar zin heeft. Het is daarmee duidelijk dat ons vakantiehuis <strong>hondvriendelijk</strong> is!
We zijn in 2008 naar dit mooie plekje in Italië verhuisd om van <strong>"la dolce vita"</strong> te gaan genieten. <strong>Ik Vertrek</strong> in de praktijk! Maar we willen ook anderen dit nog onbekende gebied laten ontdekken. Daarom hebben we een hele verdieping van ons prachtige vakantiehuis als appartement / B&B ingericht.</p>
                                  <h3>Hoe het zover kwam </h3>
                                  <p class="lead" style="text-align:left; font-size:18px;">Tijdens een paar maanden verblijf in het historische stadje <strong>Pavia</strong>, vonden we ons droomhuis op een prachtlokatie in de heuvels van de <strong>Oltrepò Pavese</strong>. We zegden baan en studie vaarwel en emigreerden definitief. Luister naar het <a href="Video/Interview.mp3">interview</a> dat met ons gehouden is op internet-radio Wereldomroep.</p>
                                  <h3>Verbouwing vakantiehuis </h3>
                                  <p class="lead" style="text-align:left; font-size:18px;">We hebben het huis aangepast om het nog geschikter te maken als <strong>vakantiehuis / B&B</strong>. Zo is er voor de gasten van appartement il Loggione bijvoorbeeld een privé en zeer ruim (40 m2) <strong>panoramaterras</strong> gerealiseerd, en is er in de tuin een <strong>zwembad</strong> geplaatst.
We hopen u met dit alles een aangenaam verblijf te bezorgen en u ons enthousiasme voor deze regio van Italië over te brengen.</p>

									<h3>Hilarische verhalen</h3>
                                    <p class="lead" style="text-align:left; font-size:18px;">Als u geïnteresseerd bent in onze Ik Vertrek avonturen in Italië en het ontstaan van de villa, dan kunt u dat nalezen in onze BOEKEN met emigratieverhalen:</p>

									<p class="lead" style="text-align:center; font-size:18px;"><strong>Italiaanse Toestanden - Leven en overleven in Italie</strong></p><p class="lead" style="text-align:center; font-size:18px;">Verkrijgbaar bij Bol.com</p>
									<div class="col-md-4"><a href="https://www.bol.com/nl/p/italiaanse-toestanden-leven-overleven-in-italie/9200000024575892/" target="_blank"><img src="images/Villa/Boekcovers/boekcover0.jpg"></a></div>
                                    <div class="col-md-4"><a href="https://www.bol.com/nl/p/meer-italiaanse-toestanden/9200000055662921/" target="_blank"><img src="images/Villa/Boekcovers/boekcover1.jpg"></a></div>
                                    <div class="col-md-4"><a href="https://www.bol.com/nl/p/meer-italiaanse-toestanden/9200000055662921/" target="_blank"><img src="images/Villa/Boekcovers/boekcover3.jpg"></a></div>

							</div>
                            
                          <div class="col-md-3" >
                                
                                	<div class="clearfix">

										<a href="images/Villa/DuepadroniOpTerrasGroot.jpg" data-lightbox="image">
										<img src="images/Villa/DuepadroniOpTerrasGroot.jpg" alt="Single Image" style="width:100%"></a>
                                        <p><em>Uitrusten op een terrasje in Broni, niet ver van de villa</em></p>
										<a href="images/Villa/KlussenStefGroot.jpg" data-lightbox="image">
										<img src="images/Villa/KlussenStefGroot.jpg" alt="Single Image"></a>
                                        <p><em>Een kluspadrone</em></p>
										<a href="images/Villa/DuepadroniBankjeGroot.jpg" data-lightbox="image">
										<img src="images/Villa/DuepadroniBankjeGroot.jpg" alt="Single Image"></a>
                                        <p><em>De padroni voor het vakantiehuis</em></p>
								  </div>    
                       	  </div>
                        
                        </div>
                   </div>     
                        
                </div>
                <!-- End sectiie  "Wie zijn wij" -->
                
                <!-- Start sectie "Appartementen" -->
				<div id="section-appt" class="center page-section">
                
					<div class="container clearfix">
                   
                    <h2 class="divcenter bottommargin font-body" style="max-width: 700px; font-size: 40px;">Villa I Due Padroni
Vakantieappartementen en B&B</h2>
                    <p class="lead divcenter bottommargin" >Villa I Due Padroni is een vakantiehuis / B&B in Italie op een panoramische locatie in de heuvels van de wijnstreek de Oltrepò Pavese in Lombardije, zo'n 70 km ten zuiden van Milaan en op slechts een dag rijden van Nederland. Deze heuvelachtige streek met zijn vergezichten, eeuwenoude dorpjes, kastelen en bossen noemt men ook wel het Toscane van Noord-Italie. Een ideaal gebied om uw vakantie door te brengen, wanneer u op zoek bent naar rust, ruimte en privacy in een prachtige omgeving terwijl er ook leuke activiteiten te doen zijn.
                      
</p>
                    
                    <!-- start slider -->
                    <section id="slider" class="boxed-slider">

			<div class="container clearfix">

				<div class="fslider" data-easing="easeInQuad">
					<div class="flexslider">
						<div class="slider-wrap">
							<div class="slide" data-thumb="images/slider/boxed/thumbs/2.jpg">								
									<img src="images/Villa/sliderIndex/villa.jpg" alt="Slide 2">
									<div class="flex-caption slider-caption-bg">Villa in de wijngaarden</div>								
						  </div>
							<div class="slide" data-thumb="images/slider/boxed/thumbs/3.jpg">
                            		<img src="images/Villa/sliderIndex/Soggiorno1.jpg" alt="Slide 3">
								  	<div class="flex-caption slider-caption-bg slider-caption-bg-light slider-caption-top-left">Woonkamer appartement Loggione</div>
                        	</div>
							<div class="slide" data-thumb="images/slider/boxed/thumbs/4.jpg">
									<img src="images/Villa/sliderIndex/CameraMatrimoniale3.jpg" alt="Slide 4">
									<div class="flex-caption slider-caption-bg slider-caption-top-right">Master bedroom Loggione</div>
							</div>
							<div class="slide" data-thumb="images/slider/boxed/thumbs/5.jpg">
									<img src="images/Villa/sliderIndex/KleinApptSlaapkamer2.jpg" alt="Slide 5">
									<div class="flex-caption slider-caption-bg slider-caption-bg-light slider-caption-bottom-right">Slaapkamer appartement Cantinetta</div>
							</div>
						</div>
					</div>
				</div>

			</div>

		</section>
                    <!-- End slider -->
                    
                    <!--<div class="row topmargin-lg divcenter" style="max-width: 1000px;">

							<div class="col-sm-4 bottommargin">

								<div class="team">
									<div class="team-image">
										<img src="images/Villa/Casa4.jpg" alt="Villa I Due Padroni">										
									</div>
									<div class="team-desc team-desc-bg">
										<div class="team-title"><h4>Villa I Due Padroni</h4><span>midden in de wijngaarden</span></div>
									</div>
								</div>
							</div>

							<div class="col-sm-4 bottommargin">

								<div class="team">
									<div class="team-image">
										<img src="images/Villa/Soggiorno1.jpg" alt="Appartement Loggione">										
									</div>
									<div class="team-desc team-desc-bg">
										<div class="team-title"><h4>Appartement Loggione</h4><span>Woonkamer</span></div>
									</div>
								</div>

							</div>

							<div class="col-sm-4 bottommargin">

								<div class="team">
									<div class="team-image">
										<img src="images/Villa/KleinApptSlaapkamer3.jpg" alt="Appartement Cantinetta">
									</div>
									<div class="team-desc team-desc-bg">
										<div class="team-title"><h4>Appartement Cantinetta</h4><span>Zit-/Slaapkamer</span></div>
									</div>
								</div>

							</div>

					  </div>  Oude foto's met onderschrift. Kan verwijderd worden -->

					  
					

				    <h2 class="divcenter bottommargin font-body" style="max-width: 700px; font-size: 40px;">Ons vakantiehuis biedt u:</h2>
					  <div class="col-md-3">
                   		<img src="images/Villa/Villa-entree.jpg" alt="Entree villa"><p><em>Entree Villa I Due Padroni</em></p>
                      	<img src="images/Villa/Soggiorno3.jpg" alt="Soggiorno appartement Loggione"><p><em>Woonkamer appartement Loggione</em></p>
                        <img src="images/Villa/CameraMatrimoniale1.jpg" alt="Master bedroom appartement Loggione"><p><em>Master bedroom appartement Loggione</em></p>
                      <p class="bottommargin" style="font-size: 16px;"><a href="#" data-scrollto="#section-services" data-easing="easeInOutExpo" data-speed="1250" data-offset="70" class="more-link">Meer info over appartement Loggione<i class="icon-angle-right"></i></a></p></div>
                      
                      <div class="col-md-6" align="left" >
							<ul class="lead" style="padding-left:5%">
              					<li>
              					  <p> een groot en luxe appartement "il Loggione" (95m<sup>2</sup>) op de gehele eerste verdieping van de woning, met een eigen privé-terras met panoramisch uitzicht over de vallei
                            
                            	  </p>
              					<li>
              					  <p>een ruim appartement "la Cantinetta" (50m<sup>2</sup>) op de begane grond geschikt voor 2 à 3 personen met privé-terras en uitzicht over de vallei</p>
              					</li>
                            
                           		<li>
                           		  <p> een tuin met verwarmd zwembad</p>
                           		</li>
                            
                            	<li>
                            	  <p>gratis WiFi internet zonder data limiet.</p>
                            	</li>
                            
                            	<li>
                            	  <p>rust en ruimte voor u als gast om zich heerlijk te kunnen ontspannen</p>
                            	</li>
                            
                            	<li>
                            	  <p>een prachtige wandel- en fietsomgeving, direct om en nabij het vakantiehuis</p>
                            	</li>
                            
                            	<li>
                            	  <p>een prima uitvalsbasis voor een dagje uit naar Milaan, Pavia, Piacenza, Cremona, Genua, Parma, Portofino, de grote meren aan de voet van de Alpen, en zelfs de Middellandse Zee</p>
                            	</li>
                            
                            	<li>
                            	  <p>toegang tot een gastronomisch luilekkerland van wijn, pizza en pasta en nog veel meer</p>
                            	</li>
                            
                            	<li>
                            	  <p>een aangenaam droog en zonnig klimaat met van juni t/m september vrijwel altijd meer dan 25 en minder dan 35 graden</p>
                            	</li>
                            
                            	<li>
                            	  <p>uiteraard een gastvrij onthaal door ons, de padroni, die alles zullen doen om uw vakantie in Italie een succes te laten zijn.</p>
                            	</li>
                            
                            
                          		
                        	</ul>
                      </div>
                         
                      <div class="col-md-3">
                      		<img src="images/Villa/priveterras.jpg" alt="Privéterras appt. Loggione"><p><em>Privéterras van appartement Loggione</em></p>
                      		<img src="images/Villa/KleinApptSlaapkamer1.jpg" alt="Zit-/slaapkamer appartement Cantinetta"><p><em>Zit-/slaapkamer appartement Cantinetta</em></p>
                            <img src="images/Villa/KleinApptKeuken2.jpg" alt="Woonkeuken appartement Cantinetta"><p><em>Woonkeuken appartement Cantinetta</em></p>
                            <p class="bottommargin" style="font-size: 16px;"><a href="#" data-scrollto="#section-services" data-easing="easeInOutExpo" data-speed="1250" data-offset="70" class="more-link">Meer info over de appartement Cantinetta<i class="icon-angle-right"></i></a></p></div>
                        
                        
                      

						<div class="clear"></div>

						

				  </div>

				</div>
                <!-- End sectie "appartementen" -->
                
                <!-- start sectie "Prijzen" -->
				<div id="section-prijzen" class="page-section notoppadding">

					<div class="section nomargin">
					  <div class="container clearfix">
						<div class="divcenter center" style="max-width: 900px;">
								<h2 class="nobottommargin t300 ls1">Huurmogelijkheden</h2>
                                <h3 class="nobottommargin t300 ls1">Heel appartement of alleen één kamer (B&B) 

</h3>
                        </div>
						<div class="col-md-2"></div>
                       	<div class="col-md-8" style="font-size:18px">
                       	    <p>Het grote appartement Loggione wordt in de periode van 28 april tot 30 september 2018 in zijn geheel en op <strong>wekelijkse basis (van zaterdag tot zaterdag)</strong> verhuurd. Een korter verblijf met aankomst op een willekeurige dag in de week is mogelijk buiten deze periode. U kunt dan ook op basis van bed & breakfast in in een van de kamers overnachten. U betaalt dan per tweepersoonskamer. Er zijn 2 kamers beschikbaar.

                            	    
                            	    
                       	      Het appartement Cantinetta is alleen beschikbaar in de periode <strong>28 april tot 30 oktober 2018</strong>.</p>
                        </div>
                   		<div class="col-md-2"></div>                              
                        <!-- ============= -->
                        <div class="divcenter center" style="max-width: 900px;" >
                       	  	<h2 class="nobottommargin t300 ls1">Prijzen</h2>
                        <div class="col-md-2"></div>
                        <div class="col-md-8" style="font-size:18px">                                 	
                                    
                          	<p>In 2018 gelden de volgende prijzen voor <strong>appartement Loggione</strong> (exclusief ontbijt)</p>
                            
                           
                              <table style="text-align:left" class="table table-striped" >
                                <thead>
                                  <tr>
                                    <th>Periode</th>
                                    <th>Appartement/week (€)</th>
                                    <th>B&B/Nacht (€)</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td>6 mei - 7 juli</td>
                                    <td>975</td>
                                    <td>-</td>
                                  </tr>
                                  <tr>
                                    <td>8 juli - 1 september</td>
                                    <td>1075</td>
                                    <td>-</td>
                                  </tr>
                                  <tr>
                                    <td>2 september - 29 september</td>
                                    <td>975</td>
                                    <td>-</td>
                                  </tr>
                                  <tr>
                                    <td>30 september - 31 december</td>
                                    <td>680</td>
                                    <td>65</td>
                                  </tr>
                                </tbody>
                              </table>
                            <p>De prijs voor het <strong>appartement Cantinetta</strong> is niet seizoen gebonden en bedraagt € 95/nacht (exclusief ontbijt)</p>
                           </div>
                        <div class="col-md-2"></div>
                        
                       </div>
                       
                      </div>
                       
                      
                       <!-- test div --> 
          <div class="col-md-5"></div>
          <div class="col-md-2" style="text-align:center">   
            <div class="content-wrap nopadding">
            
            	<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Boekingsvoorwaarden</button>

						<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-lg">
								<div class="modal-body">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="myModalLabel">Boekingsvoorwaarden</h4>
									</div>
										<div class="modal-body" style="text-align:left; padding-left:5%; padding-right:5%"> <p>
                                       	  <ul style="font-size:18px">
                                       	    <li>De huur voor de appartementen Loggione en Cantinetta is <em><strong>inclusief</strong></em>  bed-, bad- en linnengoed
</li>
                                       	    <li>De huur voor appartement Loggione is <em><strong>exclusief</strong></em> de kosten (50 euro) van eindschoonmaak.</li>
                                       	    <li>De B&B-prijs voor een kamer in appartement Loggione geldt voor één 2-persoonskamer per nacht, ontbijt inbegrepen.</li>
                                       	    <li>Bij een huur van 3 of meer dagen rekenen we 25 euro voor de eindschoonmaak van het appartement La Cantinetta.</li>
                                       	    <li>Een los ontbijt kost 7,50 euro p.p.</li>
                                            <li>Wij vragen bij aankomst een borg van 200 euro dat na vertrek en inspectie wordt teruggegeven.</li>
                                   	      </ul>
                                          </p>
										</div>
									</div>
								</div>
							</div>
						</div>
            
            </div>
            </div>
            <div class="col-md-5"></div>
            <!-- end test div --> 
                       
                       
                       
                       
                       
                       
					</div>
                    
			  </div> 
              	<!-- End sectie Prijzen -->
                
                <!-- Start sectie "Omgeving" -->
				<div id="section-omgeving" class="page-section notoppadding">
                
              		<div class="col-md-3"></div>
                    <div class="col-md-6">
                    	<h2 class="divcenter bottommargin font-body" style="max-width: 700px; font-size: 40px; text-align:center">Omgeving van het vakantiehuis</h2>
                        	
                            <div class="row topmargin-lg divcenter" style="max-width: 1000px;">

							<div class="col-sm-4 bottommargin">

								<div class="team">
									<div class="team-image">
										<img src="images/Pagina5-Omgeving/travaglino3.jpg" alt="Travaglino">
										
									</div>
									<div class="team-desc team-desc-bg">
										<div class="team-title"><h4>Travaglino</h4><span></span></div>
									</div>
								</div>

							</div>

							<div class="col-sm-4 bottommargin">

								<div class="team">
									<div class="team-image">
										<img src="images/Pagina5-Omgeving/Universiteit.jpg" alt="Universiteit Pavia">
										
								  </div>
									<div class="team-desc team-desc-bg">
										<div class="team-title"><h4>Universiteit Pavia</h4><span></span></div>
									</div>
								</div>

							</div>

							<div class="col-sm-4 bottommargin">

								<div class="team">
									<div class="team-image">
										<img src="images/Pagina5-Omgeving/Cicognola.jpg" alt="Cigognola">
										
								  </div>
									<div class="team-desc team-desc-bg">
										<div class="team-title"><h4>Cigongola</h4><span></span></div>
									</div>
								</div>

							</div>

						</div>
                        
                        	<div class="col-md-1"></div>
                            <div class="col-md-10">
                            	<p class="lead divcenter bottommargin">Villa I Due Padroni ligt in het deel van de provincie Pavia dat Oltrepò Pavese genoemd wordt. Oltrepò betekent letterlijk aan de andere zijde van de Po. De Po is de rivier die de grote laagvlakte in Noord-Italië domineert.
Ten zuiden van de Po wordt het landschap al snel heuvelachtig: de Oltrepò ligt aan de voet van de Ligurische Alpen en de Apennijnen. Al wandelend, fietsend of toerend met de auto krijgt u dan ook de mooiste vergezichten voorgeschoteld.
Een prachtige indruk van deze panorama's vind u op de fotowebsite van Daniele Marioli, <a href="http://daniele-newphoto.blogspot.com/p/panoramiche.html" target="_blank">Oltre La Foto</a>, of bekijk de onderstaande video. </p></div>
                            <div class="col-md-1"></div>
                      		
                            	<video poster="video/OltrepoPaveseStart.jpg" preload="auto" controls style="display: block; width:100%">
                        			<source src='video/OltrepoPavese.mp4' type='video/mp4' />
                      			</video>
                      
                      		<div class="col-md-1"></div>
                        	<div class="col-md-10" style="text-align:left">

                        			<h2 class="divcenter bottommargin font-body" style="max-width: 700px; font-size: 30px; text-align:center">Wat is er in de omgeving van de villa te doen?</h2>
                   		  			<p class="lead">Luieren en relaxen, zonnebaden, zwemmen, genieten van de uitzichten, de rust en het mooie weer, dat zijn een paar van de geliefde bezigheden van gasten van ons vakantiehuis. En bent u naar een paar dagen goed uitgerust van het drukke en volle Nederlandse leven, dan raakt u misschien in een wat actievere bui. Ook in dat geval biedt de Oltrepò genoeg om u te vermaken, zoals: </p>
   						  			<ul class="lead" style="list-style-position:inside">
                           	  			<li><strong>Sportieve</strong> activiteiten zoals wandelen en fietsen in de directe omgeving</li>
                              			<li> het verkennen van wat de Oltrepò zelf te bieden heeft</li>
                                		<li> dagjes uit naar grote steden als <strong>Pavia</strong>, <strong>Genua</strong>, de grote meren aan de voet van de Alpen, en natuurlijk de <strong>Middellandse Zee</strong>.</li>
                                		<li> Shoppen en sightseeing in <strong>Milaan</strong>, tweede stad van Italiië, en de hoofdstad van de mode en design. We hebben hiervoor een <a href="http://milan-city-guide-app.duepadroni.it/">speciale site</a> gemaakt. </li>
                                		<li> het volgen van een <strong>kookworkshop</strong> of een bezoek aan een wijnkelder</li>
						  			</ul>

                          
                          			<p class="bottommargin" style="font-size: 18px;"><a href="#" class="more-link">Meer info over de omgeving en mogelijkheden van een vakantie in de Oltrepo Pavese<i class="icon-angle-right"></i></a></p>
                        	</div>
                        	<div class="col-md-1"></div>
                  	</div>
                  	<div class="col-md-3"></div>
                                   
					<div class="common-height clearfix">

						<div class="col-md-4 hidden-xs" style="background: url('images/Pagina5-Omgeving/zwembad.jpg') center center no-repeat; background-size: cover;">
                          <div class="feature-box fbox-center fbox-plain fbox-small nobottomborder">

                            

<h3 style="color:#000; font-size:25px">Relaxen aan het zwembad</h3>
                          </div>											
							</div>
                        			
                        			
					  <div class="col-md-8">
							<div class="max-height">
								<div class="row common-height grid-border clearfix">
									<div class="col-md-4 col-sm-6 col-padding" style="background-image:url(images/Pagina5-Omgeving/Mountainbike.jpg); background-size:cover">
										<div class="feature-box fbox-center fbox-plain fbox-small nobottomborder">
											<h3 style="color:#FFF; font-size:25px">Fietsen</h3>
										</div>
									</div>
									<div class="col-md-4 col-sm-6 col-padding" style="background-image:url(images/Pagina5-Omgeving/WandelRuben-900-3.jpg);  background-size:cover">
										<div class="feature-box  fbox-dark fbox-plain fbox-small nobottomborder">
											<h3 style="color:#FFF; font-size:25px">Wandelen</h3>
										</div>
									</div>
									<div class="col-md-4 col-sm-6 col-padding " style="background-image:url(images/Pagina5-Omgeving/galleriaVictorEmmanuele.jpg);  background-size:cover">
										<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small nobottomborder">
											<h3 style="color:#FFF; font-size:25px">City trips</h3>
										</div>
									</div>
									<div class="col-md-4 col-sm-6 col-padding" style="background-image:url(images/Pagina5-Omgeving/MiddZee2-480.jpg);  background-size:cover">
										<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small nobottomborder">
										  <h3 style="color:#FFF; font-size:25px">Zee en meren</h3>
										</div>
									</div>
									<div class="col-md-4 col-sm-6 col-padding" style="background-image:url(images/Pagina5-Omgeving/shopping.jpg);  background-size:cover">
										<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small nobottomborder">
                                      <h3 style="color:#FFF; font-size:25px">Outlet centra</h3>
										</div>
									</div>
									<div class="col-md-4 col-sm-6 col-padding" style="background-image:url(images/Villa/kookworkshop.jpg);  background-size:cover">
										<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small nobottomborder">
                                        <h3 style="color:#FFF; font-size:25px">Kookworkshop</h3>
											

											
										</div>
									</div>
								</div>
							</div>
						</div>

					</div> 

					<div class="section dark nomargin">
						<div class="divcenter center" style="max-width: 900px;">
							<h2 class="nobottommargin t300 ls1">Nieuwsgierig geworden? Wilt u meer weten?   <a href="#" data-scrollto="#template-contactform" data-offset="140" data-easing="easeInOutExpo" data-speed="1250" class="button button-border button-circle button-light button-large notopmargin nobottommargin" style="position: relative; top: -3px;">Neem contact op!</a></h2>
						</div>
					</div>

				  <div class="section parallax nomargin dark" style="background-image: url('images/Pagina5-Omgeving/grappolo.jpg'); padding: 150px 0;" data-stellar-background-ratio="0.3">

						<div class="container clearfix">

							<div class="col_one_fifth nobottommargin"> </div>

							<div class="col_four_fifth nobottommargin col_last">
                            <h2>Recente reacties van gasten</h2>

								<div class="fslider testimonial testimonial-full nobgcolor noborder noshadow nopadding" data-arrows="false">
									<div class="flexslider">
										<div class="slider-wrap">
                                        	<div class="slide">
												<div class="testi-content">
													<p>Great apartment in a very nice italian style house, completely equipped, beautiful terrace with amazing views, very clean, great pool, beautiful garden, Nico and Stef are amazing hosts.</p>
													<div class="testi-meta">
														Andrej and family
														<span>July, 2018</span>
													</div>
												</div>
											</div>
                                        
										  <div class="slide">
												<div class="testi-content">
													<p>Een heerlijk appartement (la Cantinetta) in een erg mooie ongeving. Gastheren Nico en Stef staan voor je klaar en zijn erg vriendelijk en meegaand. Het is fijn dat we hier met onze honden terecht konden.</p>
												  <div class="testi-meta">
														Eric en Jessica
													<span>Juni, 2018</span>
													</div>
												</div>
											</div>
											<div class="slide">
												<div class="testi-content">
													<p>Verrassend appartement met prachtig uitzicht over de wijnvelden in het echte (niet toeristische) Italië. De beide gastheren, Stef en Nico, organiseren ook graag een autentieke italiaanse maaltijd met lokale wijnen op het terras van het appartement.</p>
													<div class="testi-meta">
														Frank
													  <span>september 2017</span>
													</div>
												</div>
											</div>
											<div class="slide">
												<div class="testi-content">
													<p>I Due Padroni ligt prachtig in de heuvels met een schitterend uitzicht. Het huis met fraaie tuin met zwembad heeft vele mogelijkheden voor diverse reisgezelschappen. We hebben een heerlijk verblijf gehad in I Due Padroni!</p>
													<div class="testi-meta">
														Michiel & company
													  <span>juli 2017</span>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

							</div>

						</div>

					</div>

				</div>
                <!--  End sectie "Omgeving" -->

				<!-- Start sectie Locatie -->
                <div id="section-lokatie" class="page-section notoppadding">
                
                    <div class="container clearfix">
                    	
                        <div class="col-md-8">
                        	<h2 class="bottommargin t300 ls1" style="font-size:30px">Vakantiehuis in de heuvels</h2>

							<p class="lead" style="text-align:left">Villa I Due Padroni ligt in de gemeente Montecalvo Versiggia, die bestaat uit een verzameling van meer dan 50 gehuchten, de zogenaamde "frazioni". De villa is is een van de negen huizen in het gehucht Spagna.
Vlak ernaast liggen de "frazioni" Francia, Casella en Tromba. Onze gemeente ligt in de provincie Pavia, en meer specifiek in het gebied van de Oltrepò Pavese, kortweg Oltrepò, zo’n 70 km ten zuiden van Milaan.</p>
                        
                        <h3 class="t300 ls1">Hoe vanaf de snelweg?</h3>

						<p class="lead" style="text-align:left">De dichtstbijzijnde grotere plaatsen zijn Broni en Stradella, die direct vanaf de autostrada A21 bereikbaar zijn. Vanaf deze plaatsen bereikt u ons door een kilometer of tien zuidwaarts te rijden, de eerste heuvels van de Appenijnen in. Ons huis ligt op 240 meter hoogte op een heuvelrug tussen de valleien van de stroompjes Scuropasso en Versiggia.</p>
                        
                        <img src="images/Villa/montecalvo_versiggia_flavio_chiesa.jpg" >
                        <p class="lead" style="font-size:16px"><em>Gezicht op het kasteel van Montecalvo Versiggia. &copy; Flavio Chiesa (<a href="http://www.flaviochiesa.it/">www.flaviochiesa.it</a>)</em></p>
                        <h3 class="t300 ls1">Wat is de exacte locatie van het vakantiehuis?</h3>
                        <p class="lead" style="text-align:left; font-size:18px">De nauwkeurigste aanduiding die we kunnen geven bestaat uit de GPS-coördinaten:

						44 59’ 37" N, 9 16’ 12" E

						(44.9936, 9.2703)

						U vindt ons vakantiehuis dus halverwege de noordpool en de evenaar, vrijwel exact op de 45ste breedtegraad!

						Hieronder ziet u ons huis op een Google kaart van de omgeving</p>
                        
                      </div>

                        <div class="col-md-4"><a data-lightbox="image" href="images/Pagina5-Omgeving/KaaertOltrepo.gif"><img src="images/Pagina5-Omgeving/KaaertOltrepo.gif" alt="Map Oltrepo" style="width:95%"></a>
                        <p class="lead" style="font-size:16px"><em>De Oltrepò vormt zuidelijkste punt van de regio Lombardije, in het noorden van Italië.</em></p>

                        <hr>
						

                       
						<img src="images/Pagina5-Omgeving/VillaVerticaal-700.jpg" style="width:90%;margin-top:20px; margin-bottom:40px">

                        

						<h3 class="lead" style="text-align:left; padding-left:10%;">Route</h3>
						<p class="lead" style="font-size:18px; line-height:25px; text-align:left; padding-left:10%">De meeste routeplanners kennen ons adres niet. Het best kunt u

						  <em>plaats</em>: <em><strong>Montecalvo Versiggia</strong></em>,

						  <em>straat</em>: <em><strong>Francia</strong></em> of <em><strong>Tromba</strong></em>

						als adres invoeren. Dan wordt u tot op enkele honderden meters van het vakantiehuis geleid.

						Een uitgebreide route beschrijving kunt u <a href="Routebeschrijvingen/Route-vakantiehuis-bed-breakfast-b7b-italie.pdf" target="_blank">hier downloaden:</a>

                        </p></div>
                       

                    
                    </div>
                    
                    <div class="clear"></div>
					<div id="map" style="height: 400px; margin-bottom: 20px;" class="gmap"></div>
               		<div class="divider"><i class="icon-circle"></i></div>

					

					
                
                	
                
                </div>
                <!-- End sectie locatie -->
                
                <!-- Start sectie Contact -->
                <div id="section-contact" class="page-section notoppadding">
                	<div class="container clearfix">
                		<div class="postcontent nobottommargin">
                        <h2>Contact</h2>
                        	<p class="lead">Als u meer wilt weten over de mogelijkheden voor een vakantie in Villa I Due Padroni of wilt reserveren, dan kunt u ons altijd schrijven of bellen. U kunt ook gebruik maken van het onderstaande contactformulier.</p>
                        	
                   			<div class="contact-widget">
    
                                <div class="contact-form-result"></div>
    
                                <form class="nobottommargin" id="template-contactform" name="template-contactform" action="include/sendemail.php" method="post">
    
                                    <div class="form-process"></div>
    
                                    <div class="col_one_third">
                                        <label for="template-contactform-name">Naam <small>*</small></label>
                                        <input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="sm-form-control required" />
                                    </div>
    
                                    <div class="col_one_third">
                                        <label for="template-contactform-email">Email <small>*</small></label>
                                        <input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email sm-form-control" />
                                    </div>
    
                                    <div class="col_one_third col_last">
                                        <label for="template-contactform-phone">Telefoon</label>
                                        <input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="sm-form-control" />
                                    </div>
    
                                    <div class="clear"></div>
    
                                    <div class="col_two_third">
                                        <label for="template-contactform-subject">Onderwerp <small>*</small></label>
                                        <input type="text" id="template-contactform-subject" name="template-contactform-subject" value="" class="required sm-form-control" />
                                    </div>
    
                                    <div class="col_one_third col_last">
                                        <label for="template-contactform-service">Betreft</label>
                                        <select id="template-contactform-service" name="template-contactform-service" class="sm-form-control">
                                            <option value="">-- Maak uw keuze --</option>
                                            <option value="Algemeen">Algemeen</option>
                                            <option value="Loggione">Appartement Loggione</option>
                                            <option value="Cantinetta">Appartement Cantinetta</option>
                                      	</select>
                                    </div>
                                    
                                    <div class="col_one_third col_last">
                                    	<label for="">Date Range</label>
										<div class="input-daterange input-group">
										<input type="text" value="" class="sm-form-control tleft" placeholder="MM/DD/YYYY">
										<span class="input-group-addon">to</span>
										<input type="text" value="" class="sm-form-control tleft" placeholder="MM/DD/YYYY">
										</div>
                                    </div>
    
                                    <div class="clear"></div>
    
                                    <div class="col_full">
                                        <label for="template-contactform-message">Bericht <small>*</small></label>
                                        <textarea class="required sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
                                    </div>
    
                                    <div class="col_full hidden">
                                        <input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
                                    </div>
    
                                    <div class="col_full">
    
                                        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
                                        <div class="g-recaptcha" data-sitekey="6LeAcWQUAAAAANyLIqc7DbvNvJ8cpqyehDhIbntz"></div>
    
                                    </div>
    
                                    <div class="col_full">
                                        <button class="button button-3d nomargin" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Send Message</button>
                                    </div>
    
                                </form>
                            </div>
                  		</div>
                		
					<!-- Sidebar met adresgegevens
					============================================= -->
					<div class="sidebar col_last nobottommargin">
                    

						<address>
							<strong>Villa I Due Padroni</strong>

							Frazione Spagna 9

							Montecalvo Versiggia (PV)

							27047 Italia

						</address>
						<abbr title="tel"><strong>Phone:</strong></abbr>  +39 0385 836048

						<abbr title="Fax"><strong>Cell:</strong></abbr>  +39 346 857 2343

					</div>
                    <!-- .sidebar end -->

				</div>
                
                </div>
                <!-- End sectie Contact -->
			</div>
            
		</section>
        <!-- #content end -->

		<!-- Footer
		============================================= -->
		<footer id="footer" class=" noborder">
        
        
        

			<div class="container center">
            		<div >
                    	<div class="col-md-4">test</div>
                        <div class="col-md-4">test</div>
                        <div class="col-md-4">test</div>
                    </div>
            
            
            
				<div class="footer-widgets-wrap">
                
                	

					<div class="row clearfix">
                    	<div class="col-md-4">

							<div class="widget clearfix">
								<h4>Site Links</h4>

								<ul class="list-unstyled footer-site-links nobottommargin">
									<li><a href="#" data-scrollto="#wrapper" data-easing="easeInOutExpo" data-speed="1250" data-offset="70">Top</a></li>
									<li><a href="#" data-scrollto="#section-about" data-easing="easeInOutExpo" data-speed="1250" data-offset="70">About</a></li>
									<li><a href="#" data-scrollto="#section-works" data-easing="easeInOutExpo" data-speed="1250" data-offset="70">Works</a></li>
									<li><a href="#" data-scrollto="#section-services" data-easing="easeInOutExpo" data-speed="1250" data-offset="70">Services</a></li>
									<li><a href="#" data-scrollto="#section-blog" data-easing="easeInOutExpo" data-speed="1250" data-offset="70">Blog</a></li>
									<li><a href="#" data-scrollto="#section-contact" data-easing="easeInOutExpo" data-speed="1250" data-offset="70">Contact</a></li>
								</ul>
							</div>

						</div>

						<div class="col-md-4">

							<div class="widget clearfix">
								<h4>Subscribe</h4>

								<div id="widget-subscribe-form-result" data-notify-type="success" data-notify-msg=""></div>
								<form id="widget-subscribe-form" action="include/subscribe.php" role="form" method="post" class="nobottommargin">
									<input type="email" id="widget-subscribe-form-email" name="widget-subscribe-form-email" class="form-control input-lg not-dark required email" placeholder="Your Email Address">
									<button class="button button-border button-circle button-light topmargin-sm" type="submit">Subscribe Now</button>
								</form>
							</div>

						</div>

						<div class="col-md-4">

							<div class="widget clearfix">
								<h4>Contact</h4>

								<p class="lead">795 Folsom Ave, Suite 600
San Francisco, CA 94107</p>

								<div class="center topmargin-sm">
									<a href="#" class="social-icon inline-block noborder si-small si-facebook" title="Facebook">
										<i class="icon-facebook"></i>
										<i class="icon-facebook"></i>
									</a>
									<a href="#" class="social-icon inline-block noborder si-small si-twitter" title="Twitter">
										<i class="icon-twitter"></i>
										<i class="icon-twitter"></i>
									</a>
									<a href="#" class="social-icon inline-block noborder si-small si-github" title="Github">
										<i class="icon-github"></i>
										<i class="icon-github"></i>
									</a>
									<a href="#" class="social-icon inline-block noborder si-small si-pinterest" title="Pinterest">
										<i class="icon-pinterest"></i>
										<i class="icon-pinterest"></i>
									</a>
								</div>
							</div>

						</div>

					</div>

				</div>
			</div>

			<div id="copyrights">
				<div class="container center clearfix">
					Copyright Canvas 2015 | All Rights Reserved
				</div>
			</div>

		</footer>
        <!-- #footer end -->

	</div><!-- #wrapper end -->

	<!-- Go To Top
	============================================= -->
	<div id="gotoTop" class="icon-angle-up"></div>

	<!-- External JavaScripts
	============================================= -->
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/plugins.js"></script>

	<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
	  
   
	<script type="text/javascript" src="js/jquery.vmap.js"></script>
	<script type="text/javascript" src="js/vmap/jquery.vmap.world.js"></script>
	<script type="text/javascript" src="js/vmap/jquery.vmap.usa.js"></script>
	<script type="text/javascript" src="js/vmap/jquery.vmap.europe.js"></script>
	<script type="text/javascript" src="js/vmap/jquery.vmap.germany.js"></script>
	<script type="text/javascript" src="js/vmap/jquery.vmap.sampledata.js"></script>
	<script type="text/javascript" src="js/jquery.gmap.js"></script>
    
    
    <!-- Date & Time Picker JS -->
	<script type="text/javascript" src="js/components/moment.js"></script>
	<script type="text/javascript" src="demos/travel/js/datepicker.js"></script>
	<script type="text/javascript" src="js/components/timepicker.js"></script>

	<!-- Include Date Range Picker -->
	<script type="text/javascript" src="js/components/daterangepicker.js"></script>
    
    
    <!-- google map script -->    
    <script>
	// Initialize and add the map
	function initMap() {
 	 // The location of Villa I Due Padroni
  	var uluru = {lat: 44.9936, lng: 9.2703};
  	// The map, centered at Villa I Due Padroni
  	var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 15, center: uluru, mapTypeId: 'satellite'
});
  	// The marker, positioned at Uluru
  	var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUsuHWKoeb9y-z6aJ5Vqf7wKWKjPJYKSI&callback=initMap">
    </script>    
    <!-- End google map script -->
    

	<!-- Footer Scripts
	============================================= -->
	<script type="text/javascript" src="js/functions.js"></script>

	<script type="text/javascript">

		// Portfolio Script
		jQuery(window).load(function(){

			var jQuerycontainer = jQuery('#portfolio');
			jQuerycontainer.isotope({
				transitionDuration: '0.65s',
				masonry: {
					columnWidth: jQuerycontainer.find('.portfolio-item:not(.wide)')[0]
				}
			});
			jQuery(window).resize(function() {
				jQuerycontainer.isotope('layout');
				SEMICOLON.portfolio.portfolioDescMargin();
			});
			var t = setTimeout(function(){ SEMICOLON.portfolio.portfolioDescMargin(); }, 200);

			// Google Map
			jQuery('#headquarters-map').gMap({
				address: 'Melbourne, Australia',
				maptype: 'ROADMAP',
				zoom: 14,
				markers: [
					{
						address: "Melbourne, Australia",
						html: "Melbourne, Australia",
						icon: {
							image: "images/icons/map-icon-red.png",
							iconsize: [32, 32],
							iconanchor: [14,44]
						}
					}
				],
				doubleclickzoom: false,
				controls: {
					panControl: false,
					zoomControl: false,
					mapTypeControl: false,
					scaleControl: false,
					streetViewControl: false,
					overviewMapControl: false
				},
				styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"gamma":"0.00"},{"lightness":"74"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"lightness":"3"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
			});

		});

		// Owl Carousel
		jQuery(document).ready(function($) {

			var ocClients = $("#oc-clients");
			ocClients.owlCarousel({
				margin: 80,
				loop: true,
				nav: false,
				autoplay: true,
				dots: false,
				autoplayHoverPause: true,
				responsive:{
					0:{ items:2 },
					480:{ items:3 },
					768:{ items:4 },
					992:{ items:5 },
					1200:{ items:6 }
				}
			});

		});

		// Contact Form
		$("#template-contactform").validate({
				submitHandler: function(form) {
					$('.form-process').fadeIn();
					$(form).ajaxSubmit({
						target: '#contact-form-result',
						success: function() {
							$('.form-process').fadeOut();
							$(form).find('.sm-form-control').val('');
							$('#contact-form-result').attr('data-notify-msg', $('#contact-form-result').html()).html('');
							SEMICOLON.widget.notifications($('#contact-form-result'));
						}
					});
				}
			});

			// Widget Subscribe Form
			$("#widget-subscribe-form").validate({
				submitHandler: function(form) {
					$(form).find('.input-group-addon').find('.icon-email2').removeClass('icon-email2').addClass('icon-line-loader icon-spin');
					$(form).ajaxSubmit({
						target: '#widget-subscribe-form-result',
						success: function() {
							$(form).find('.input-group-addon').find('.icon-line-loader').removeClass('icon-line-loader icon-spin').addClass('icon-email2');
							$('#widget-subscribe-form').find('.form-control').val('');
							$('#widget-subscribe-form-result').attr('data-notify-msg', $('#widget-subscribe-form-result').html()).html('');
							SEMICOLON.widget.notifications($('#widget-subscribe-form-result'));
						}
					});
				}
			});

		</script>

	</script><!-- Portfolio Script End -->
    
   <script type="text/javascript">
		$(function() {
			$('.travel-date-group .default').datepicker({
				autoclose: true,
				startDate: "today",
			});

			$('.travel-date-group .today').datepicker({
				autoclose: true,
				startDate: "today",
				todayHighlight: true
			});

			$('.travel-date-group .past-enabled').datepicker({
				autoclose: true,
			});
			$('.travel-date-group .format').datepicker({
				autoclose: true,
				format: "dd-mm-yyyy",
			});

			$('.travel-date-group .autoclose').datepicker();

			$('.travel-date-group .disabled-week').datepicker({
				autoclose: true,
				daysOfWeekDisabled: "0"
			});

			$('.travel-date-group .highlighted-week').datepicker({
				autoclose: true,
				daysOfWeekHighlighted: "0"
			});

			$('.travel-date-group .mnth').datepicker({
				autoclose: true,
				minViewMode: 1,
				format: "mm/yy"
			});

			$('.travel-date-group .multidate').datepicker({
				multidate: true,
				multidateSeparator: " , "
			});

			$('.travel-date-group .input-daterange').datepicker({
				autoclose: true
			});

			$('.travel-date-group .inline-calendar').datepicker();

			$('.datetimepicker').datetimepicker({
				showClose: true
			});

			$('.datetimepicker1').datetimepicker({
				format: 'LT',
				showClose: true
			});

			$('.datetimepicker2').datetimepicker({
				inline: true,
				sideBySide: true
			});

		});

		$(function() {
			// .daterange1
			$(".daterange1").daterangepicker({
				"buttonClasses": "button button-rounded button-mini nomargin",
				"applyClass": "button-color",
				"cancelClass": "button-light"
			});

			// .daterange2
			$(".daterange2").daterangepicker({
				"opens": "center",
				timePicker: true,
				timePickerIncrement: 30,
				locale: {
					format: 'MM/DD/YYYY h:mm A'
				},
				"buttonClasses": "button button-rounded button-mini nomargin",
				"applyClass": "button-color",
				"cancelClass": "button-light"
			});

			// .daterange3
			$(".daterange3").daterangepicker({
				singleDatePicker: true,
				showDropdowns: true
			},
			function(start, end, label) {
				var years = moment().diff(start, 'years');
				alert("You are " + years + " years old.");
			});

			// reportrange
			function cb(start, end) {
				$(".reportrange span").html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
			}
			cb(moment().subtract(29, 'days'), moment());

			$(".reportrange").daterangepicker({
				"buttonClasses": "button button-rounded button-mini nomargin",
				"applyClass": "button-color",
				"cancelClass": "button-light",
				ranges: {
				   'Today': [moment(), moment()],
				   'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				   'Last 7 Days': [moment().subtract(6, 'days'), moment()],
				   'Last 30 Days': [moment().subtract(29, 'days'), moment()],
				   'This Month': [moment().startOf('month'), moment().endOf('month')],
				   'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
				}
			}, cb);

			// .daterange4
			$(".daterange4").daterangepicker({
				autoUpdateInput: false,
				locale: {
					cancelLabel: 'Clear'
				},
				"buttonClasses": "button button-rounded button-mini nomargin",
				"applyClass": "button-color",
				"cancelClass": "button-light"
			});

			$(".daterange4").on('apply.daterangepicker', function(ev, picker) {
				$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
			});

			$(".daterange4").on('cancel.daterangepicker', function(ev, picker) {
				$(this).val('');
			});

		});

	</script> 
    

</body>
</html>
N
NicoBootsJul 23, 2018

Hello,
I suppose someone is still reading these messages and is willing to help me. At least, I have paid for support!

However, in the meantime I have discovered what I did wrong
The input for a date range should be wrapped in a a div with the class <div class="input-daterange travel-date-group bottommargin-sm">

Another question: the formatting of the date picked is now in the 'american' style (i.e. MM/DD/YY). How can I change in the more usual DD/MM/YY style?

S
SemiColonWebSTAFFJul 26, 2018

Hello,

Thanks for your Patience!

It is really difficult to provide support based on your Customized Codes, as we have a different environment altogether preventing us to provide you with a speedy solution which is the reason why a Live URL would be really helpful. Additionally, you are also using an Older Version of the Codes. We are always here to help you but we need a Live URL to debug the issues.

Simply use the JS Setting: format: "dd/mm/yyyy" in the Datepicker JS Codes at the bottom of the Page.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

N
NicoBootsOct 7, 2018

Hello,

I am still struggling with this datepicker issue. The placeholders of the daterange picker gives the user the impression that a DD/MM/YY required, but after he/she selects the date the result is shown in the American MM/DD/YY format, and I receive the email also with the dates in MM/DD/YY format. You have said that I should use a JS-setting in the datepicker script at the bottom of the page. But I am at a loss where and what to change in this long list of functions available. Can you help me?

Another thing is that the user does not get the message that the Form is properly processed (or not), although I see in sendmail.php on top of the script that there is the function $message_success. This apparently does not work. Can you explain me why?

My life URL is: http://www.duepadroni.it/index.php

S
SemiColonWebSTAFFOct 10, 2018

Hello,

  1. We have checked out your Page, however the Date Format appears to be working fine at the moment. Please let us know if you are facing issues with this.

  2. The Contact Form you are using does not follow the Default Code Structure of the Default Template provided with the Canvas Package. Make sure that the Contact Form is enclosed within the following code:

<div class="contact-widget">
	<div class="contact-form-result"></div>

	... form here

</div>

Check the Default Files for complete code structure.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard