jquery datepicker计算特殊日子

时间:2014-12-14 11:14:40

标签: jquery datepicker

我想计算两个日期选择器之间的日子 例如:

  • first datepicker = 12.12.2014
  • second datepicker = 20.12.2014
  • 完整日子= 8

这对我来说很好。现在我想算上三件不同的事情。

  • 完整的日子
  • 季节(特殊日子)
  • 天不是季节(不是特殊的日子)

示例:

  • 特殊日子是15和16.12.2014
  • 第一次约会= 2014年12月12日和第二天20.12.2014

我想要显示:

  • 所有日子= 8
  • 特殊日子= 2
  • 不是特别的日子= 6

我为我的特殊日子制作了一个阵列(这也是一个问题,因为我有一个特殊日子的大清单,我不想写一个非常大的数组。我认为它更像是特殊的日子是(10.12。 - 10.01,10.05 - 25.05,30.05 - 15.09),因此它们在日期选择器中正确显示但我现在没有这些日子。

我希望你能理解我的问题

这是我的代码:

$ = jQuery;

$(document).ready(function() {

    var events = [
        '2014-12-02',
        '2014-12-07',
        '2014-12-15',
        '2014-12-30',
    ];

    $("#Anreise").datepicker({
        minDate: 0,
        maxDate: '+1Y+6M',
        onSelect: function(dateStr) {
            var min = $(this).datepicker('getDate'); // Erfasse ausgewaehltes Datum
            //$("#Abreise").datepicker('option', 'minDate', min || '0'); // Mindestdatum von Abreise auf den Anreisetag gesetzt (Kann angepasst werden)
        },

        beforeShowDay: function(date) {
            var month = ('0' + (date.getMonth() + 1)).slice(-2);
            var day = ('0' + date.getDate()).slice(-2);
            var year = date.getFullYear();
            var formated_date = year + '-' + month + '-' + day;

            if ($.inArray(formated_date, events) !== -1) {
                return [true, 'saison', 'Hauptsaison'];
            }
            return [true, '', 'Nebensaison'];
        }



    }); // $("#Anreise").datepicker

    $("#Abreise").datepicker({
        minDate: '0',
        maxDate: '+1Y+6M',
        onSelect: function(dateStr) {
            var max = $(this).datepicker('getDate'); // Erfasse ausgewaehltes Datum
            $('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M'); // Kann beliebig gesetzt werden (Momentan maximal 18 Monate im vorraus)
            var start = $("#Anreise").datepicker("getDate");
            var end = $("#Abreise").datepicker("getDate");
            var days = (end - start) / (1000 * 60 * 60 * 24);

            $("#Gesamt").html(days);



        },

        beforeShowDay: function(date) {
            var month = ('0' + (date.getMonth() + 1)).slice(-2);
            var day = ('0' + date.getDate()).slice(-2);
            var year = date.getFullYear();
            var formated_date = year + '-' + month + '-' + day;

            if ($.inArray(formated_date, events) !== -1) {
                return [true, 'saison', 'Hauptsaison'];
            }
            return [true, '', 'Nebensaison'];
        }
    }); // $("#Abreise").datepicker 
}); // $( document ).ready(function()`

1 个答案:

答案 0 :(得分:1)

你可以用momentjs整齐地做到 - https://github.com/moment/moment
结合时刻范围 - https://github.com/gf3/moment-range

您可以做的是定义包含特殊日期的范围列表。然后从datepickers获取日期并创建一个范围对象。

之后你可以在一个循环中调用与每个特殊日期范围的交叉,将它们加在一起,你将在你的日期选择范围内有特殊的总天数。为了获得正常的日子,您可以简单地减去所有日子的特殊日子。

显示所有需要的momentjs和力矩范围函数的基本示例:



$(function(){
  var datepickerRange = moment().range(new Date(2014, 9, 16), new Date(2015, 3, 20));
  var specialRangeFullyInside = moment().range(new Date(2014, 12, 16), new Date(2014, 12, 26));
  var specialRangePartiallyInside = moment().range(new Date(2014, 9, 10), new Date(2014, 9, 18));

  var daysIntersect1 = datepickerRange.intersect(specialRangeFullyInside);
  daysIntersect1 = daysIntersect1 !== null ? daysIntersect1.diff("days") : 0;
  var daysIntersect2 = datepickerRange.intersect(specialRangePartiallyInside);
  daysIntersect2 = daysIntersect2 !== null ? daysIntersect2.diff("days") : 0;

  console.log("10 day special range inside: " + daysIntersect1);
  console.log("8 day special range overlaps 2 days: " + daysIntersect2);
  console.log("Total days: " + datepickerRange.diff("days"));
  console.log("Total special days in range: " + (daysIntersect1 + daysIntersect2));
  console.log("Total normal days in range: " + (datepickerRange.diff("days") - daysIntersect1 - daysIntersect2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment-range/1.0.5/moment-range.js"></script>
&#13;
&#13;
&#13;