Datepicker avec date de fermeture

Programmation JavaScript
1

Bonjour, j’utilise ce code avec succès dans mon test:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script src="lang/datepicker-fr.js"></script>
</head>
Start:
<input id="debut_vacance"/>
End:
<input id="fin_vacance" />
<hr />Result:
<input id="vacance" />

<script>
var startDate, endDate, dateRange = [];

$("#debut_vacance").datepicker({
    dateFormat : 'dd/mm/yy',
    onSelect: function (date) {
        startDate = $(this).datepicker("getDate");
    }
});
$("#fin_vacance").datepicker({
    dateFormat : 'dd/mm/yy',
    onSelect: function (date) {
        endDate = $(this).datepicker("getDate");
        for (var d = new Date(startDate);
            d <= new Date(endDate);
            d.setDate(d.getDate() + 1)) {
                dateRange.push($.datepicker.formatDate('dd/mm/yy', d));
        }
    }
});


$("#debut_vacance, #fin_vacance").datepicker("setDate", new Date());

$('#vacance').datepicker({ 
    beforeShowDay: function (date) {
        
        var dateString = jQuery.datepicker.formatDate('dd/mm/yy', date);
        console.log(dateString);
        var day = date.getDay();
        const test =  [dateRange.indexOf(dateString) == -1 && (day > 0 && day < 6), ""];
        return test

    }
});
</script>

je voudrais mettre deux variable PHP pour startDate et endDate je fais donc ceci :

<?php 
$debut = "10/04/2023";
$fin = "18/04/2023";
?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script src="lang/datepicker-fr.js"></script>
</head>
Result:
<input id="vacance" />

<script>
var startDate, endDate, dateRange = [];

$("#debut_vacance").datepicker({
    dateFormat : 'dd/mm/yy',
    onSelect: function (date) {
        startDate = <?= $debut; ?>;
    }
});
$("#fin_vacance").datepicker({
    dateFormat : 'dd/mm/yy',
    onSelect: function (date) {
        endDate = <?= $fin; ?>;
        for (var d = new Date(startDate);
            d <= new Date(endDate);
            d.setDate(d.getDate() + 1)) {
                dateRange.push($.datepicker.formatDate('dd/mm/yy', d));
        }
    }
});


$("#debut_vacance, #fin_vacance").datepicker("setDate", new Date());

$('#vacance').datepicker({ 
    beforeShowDay: function (date) {
        
        var dateString = jQuery.datepicker.formatDate('dd/mm/yy', date);
        console.log(dateString);
        var day = date.getDay();
        const test =  [dateRange.indexOf(dateString) == -1 && (day > 0 && day < 6), ""];
        return test

    }
});
</script>

Mais cela ne fonctionne pas, auriez vous une idée?

2

Voici la solution :

<?php 
$debut = 'Thu Mar 09 2023 00:00:00 GMT+0100 (heure normale d’Europe centrale)';
$fin = "Thu Mar 16 2023 00:00:00 GMT+0100 (heure normale d’Europe centrale)";

?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script src="lang/datepicker-fr.js"></script>
</head>
Result:
<input id="vacance" /></input>
<script>
var startDate, endDate, dateRange = [];
$('#vacance').datepicker({ 
    beforeShowDay: function (date) {

        startDate = '<?php echo $debut; ?>';
        

        endDate = '<?php echo $fin; ?>';
        for (var d = new Date(startDate);
            d <= new Date(endDate);
            d.setDate(d.getDate() + 1)) {
                dateRange.push($.datepicker.formatDate('dd/mm/yy', d));
        }


        
        var dateString = jQuery.datepicker.formatDate('dd/mm/yy', date);
        console.log(dateString);
        var day = date.getDay();
        const test =  [dateRange.indexOf(dateString) == -1 && (day > 0 && day < 6), ""];
        return test

    }
});
</script>
3

C’est trés intéressant. Merci :slightly_smiling_face:.