Search code examples
javascriptjquerydatepickerjquery-ui-datepicker

How do I display the number of days selected from two dates selected from Zebra Datepicker?

Here is the javascript. I was able to run the Zebra Datepicker but not able to display the number of days.

<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>

Here is the 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>
Solution

  • There are several things missing:

    1. Call showDays() after the user picks a date. That can be done using onClose (called when the datepicker is closed).
    2. Use val() to get the dates.
    3. Parse the date, and then do the calculation.

    $(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>