如何显示从Zebra Datepicker中选择的两个日期中选择的天数？

Question

这是javascript。 我能够运行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>

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

Answer 1

缺少一些东西：

用户选择日期后调用showDays() 。 这可以使用onClose完成（在关闭onClose调用）。
使用val()来获取日期。
解析日期，然后进行计算。

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

如何显示从Zebra Datepicker中选择的两个日期中选择的天数？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-06-29 04:54:10

如何显示从Zebra Datepicker中选择的两个日期中选择的天数？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-06-29 04:54:10

解决方案1
0 已采纳 2017-06-29 04:54:10