Comment afficher le nombre de jours sélectionnés à partir de deux dates sélectionnées dans Zebra Datepicker?

Voici le javascript. J'ai été capable de lancer le Zebra Datepicker mais je n'ai pas pu afficher le nombre de jours.Comment afficher le nombre de jours sélectionnés à partir de deux dates sélectionnées dans Zebra Datepicker?

<script type="text/javascript"> 
$(function() { 
    $('#mystartdate').Zebra_DatePicker({ 
     direction: 3, // represents the earliest start day from now 
     select_other_months: 1, 
     pair: $('#myenddate'), 
     format: 'm/d/Y' 
    }); 

    $('#myenddate').Zebra_DatePicker({ 
     direction: [1, 30], // represents 30 days from the selected date 
     select_other_months: 1, 
     format: 'm/d/Y' 
    }); 
}); 
</script> 

<script type="text/javascript"> 
function showDays() { 
    var start = $('#mystartdate').data('Zebra_DatePicker'); 
    var end = $('#myenddate').data('Zebra_DatePicker'); 
    if (!start || !end) return; 
    var days = (end - start)/1000/60/60/24; 
    $('#num_nights').val(days); 
}; 
</script>

Voici le code HTML:

<input type="text" name="xstartdate" class="form-control input-sm" id="mystartdate" placeholder="Required"> 
<input type="text" name="xenddate" class="form-control input-sm" id="myenddate" placeholder="Required"> 
<input type="text" id="num_nights" readonly>

Source

2017-06-29 francoom

Il y a plusieurs choses manquantes:

appel showDays() après que l'utilisateur prend une date. Cela peut être fait en utilisant onClose (appelé lorsque le fichier datepicker est fermé). Utilisez le val() pour obtenir les dates.
Analyser la date, puis effectuer le calcul.

$(document).ready(function() { 
 
$(function() { 
 

 
    $('#mystartdate').Zebra_DatePicker({ 
 
     direction: 3, // represents the earliest start day from now 
 
     select_other_months: 1, 
 
     pair: $('#myenddate'), 
 
     format: 'm/d/Y', 
 
     onClose: function(el) { 
 
      showDays(el); 
 
     } 
 
    }); 
 

 
    $('#myenddate').Zebra_DatePicker({ 
 
     direction: [1, 30], // represents 30 days from the selected date 
 
     select_other_months: 1, 
 
     format: 'm/d/Y', 
 
     onClose: function(el) { 
 
      showDays(el); 
 
     } 
 
    }); 
 
}); 
 

 
function showDays() { 
 
    
 
    // get date 
 
    var start = $('#mystartdate').val(); 
 
    var end = $('#myenddate').val(); 
 
    if (!start || !end) return; 
 
    
 
    // parse date 
 
    var startArr = start.split("/"); 
 
    var endArr = end.split("/"); 
 
    var startDate = new Date(startArr[2], startArr[0] - 1, startArr[1]); 
 
    var endDate = new Date(endArr[2], endArr[0] - 1, endArr[1]); 
 
    
 
    // calculate days 
 
    var days = Math.round((endDate-startDate)/(1000*60*60*24)); 
 
    
 
    $('#num_nights').val(days); 
 
}; 
 

 
});

<!doctype html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Datepicker/dist/zebra_datepicker.min.js"></script> 
 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Datepicker/dist/css/default/zebra_datepicker.min.css"> 
 
</head> 
 
<body> 
 
<input type="text" name="xstartdate" class="form-control input-sm" id="mystartdate" placeholder="Required"> 
 
<input type="text" name="xenddate" class="form-control input-sm" id="myenddate" placeholder="Required"> 
 
<input type="text" id="num_nights" readonly> 
 
</body> 
 
</html>

Source

2017-06-29 04:54:10

Comment afficher le nombre de jours sélectionnés à partir de deux dates sélectionnées dans Zebra Datepicker?

Répondre

Questions connexes