Bonjour la communauté, j'ai un souci au niveau de l'affichage du datepicker, je ne comprend pas pourquoi les dates et le calendrier ne s'affiche pas quand je clique dessus.
Si vous avez une solution je suis preneur svp.
Voici le lien du site : https://la-suite-villa.com/v2020/
Voici le code :
Le CSS CUSTOM :
Merci par avance,
Bonne journée,
Pierre
Si vous avez une solution je suis preneur svp.
Voici le lien du site : https://la-suite-villa.com/v2020/
Voici le code :
<?php
/**
* Header.
*/
?><!DOCTYPE html>
<?php
if (ICL_LANGUAGE_CODE == "fr") {
$language = "fr";
$arriving = "Arrivée";
$departing = "Départ";
$adult = "Adulte(s)";
$booknow = "Réserver";
$callus = "Appeler";
} elseif(ICL_LANGUAGE_CODE == 'it') {
$language = "it";
$arriving = "Arrivo";
$departing = "Partenza";
$adult = "Adulto";
$booknow = "Prenota ora";
$callus = "Chiamaci";
} elseif(ICL_LANGUAGE_CODE == 'es') {
$language = "es";
$arriving = "llegada";
$departing = "Salida";
$adult = "Adulto";
$booknow = "Reservar ahora";
$callus = "Llámenos";
} elseif(ICL_LANGUAGE_CODE == 'de') {
$language = "de";
$arriving = "Ankunft";
$departing = "Abfahrt";
$adult = "Erwachsene";
$booknow = "Buche jetzt";
$callus = "Anruf";
} else {
$language = "en";
$arriving = "Arriving";
$departing = "Departing";
$adult = "Adult(s)";
$booknow = "Book now";
$callus = "Call us";
}
?>
<html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="icon" type="image/jpg" href="<?php bloginfo('template_directory'); ?>/img/favicon.jpg" />
<title><?php if(is_front_page()) bloginfo('name'); else wp_title( '', true, 'right' ); ?></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700&display=swap" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- HMresa -->
<!--<script src="//widget.customer-alliance.com/reviews/js/standard/dcf8a9666eb9598c.js" async></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/i18n/jquery-ui-i18n.min.js"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php if ( is_front_page() && is_home() ) { ?>
<?php } elseif ( is_front_page() ) { ?>
<header id="header-home">
<div id="top-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 d-flex align-content-center flex-wrap">
<div id="info-hotel"><a href="tel:+596596598800">+ 596 596 59 88 00</a> | <a href="reservation@la-suite-villa.com">reservation@la-suite-villa.com</a></div>
</div>
<div class="col-sm-6 d-flex align-content-center flex-wrap justify-content-end">
<a class="btn-reserver" href="#"><?php __('Réserver', 'lasuitevilla'); ?></a> <a href="#"><i class="fab fa-facebook-square"></i></a> <a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>Le CSS CUSTOM :
/* BLOC DE RESERVATION */
#before-content { margin-top: -250px; }
#before-content, #before-content .substitute_widget_class, #before-content .textwidget { padding: 0; text-align: center; background: none; }
.responsiveHM { display: none; }
.form-booking, .datepicker-content, .select-content, .submit-content, .datepicker { display: inline-block; }
.datepicker-content, .select-content { margin-right: 20px; }
.datepicker { padding: 9px 20px !important; width: 120px; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; direction: initial !important; background-image: url("https://la-suite-villa.com/wp-content/uploads/2016/12/calendar.png"); background-repeat: no-repeat; background-position: 90%; background-size: 14px 14px; border-width: 0px; color: #E5264C; }
#select-adult { padding: 8px 12px; border: none; color: #E5264C; }
.booking-submit { background-color: #C5174E; background: linear-gradient(60deg, #C5174E, #E54F66); padding: 0 20px; border: none; border-radius: 2px; color: #FFFFFF; text-transform: uppercase; cursor: pointer; font-weight: bold; margin-top: 25px; height: 40px; }
.form-booking-super-container { text-align: center; background-color: #E5264C; color: #FFFFFF; }
.form-booking-super-container input[type="submit"] {background: #fff; color:#E5264C; font-weight: 700; height: auto; }
.form-booking-super-container input[type="submit"]:hover {background: #000 !important; color:#fff; }
.home .form-booking-super-container { background: none; }
.form-booking-super-container .title { padding: 0; margin: 0; font-size: 9px; text-transform: uppercase; }
#before-content .contact { margin-top: 20px; color: #FFFFFF; font-size: 8px; }
/* BLOC DE RESERVATION MOBILE */
@media screen and (max-width: 959px) {
.form-booking-super-container { display: none; }
.responsiveHM, #before-content { display: block; }
.responsiveHM .contact-button-container { text-align: center; padding: 10px 0; }
.responsiveHM .booking, .callus { width: 45%; height: 40px; border: 0px; color: #FFFFFF; cursor: pointer; font-size: 16px; }
.responsiveHM .booking { background-color: #E5264C; }
.responsiveHM .callus { background-color: #9D9FA3; }
#before-content, #before-content .substitute_widget_class { padding: 0; }
#before-content { margin-top: 0; }
}
/* MODIFICATION CALENDRIER DATEPICKER */
.ui-datepicker { background-color: rgba(30, 31, 37, 0.8) !important; color: #FFFFFF !important; }
.ui-widget-header { background: none !important; border: none !important; color: #FFFFFF !important; }
.ui-datepicker-title { color: #FFFFFF !important; }
.ui-state-default, .ui-widget-content .ui-state-default { border: none !important; background: none !important; color: #FFFFFF !important; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #CD1416!important; }
.ui-widget-header .ui-icon { background-image: url(https://la-suite-villa.com/wp-content/uploads/2017/05/ui-icons_444444_256x240.png) !important; }
.ui-datepicker-prev-hover, .ui-datepicker-next-hover { background: none !important; }
.ui-datepicker-month { text-transform: capitalize !important; }
Merci par avance,
Bonne journée,
Pierre
ça arrive, j'avais bien vu plusieurs jquery mais parfois il s'agit de modules spécifiques donc pas facile à déterminer sans analyse.