jquery 日期选择器计算特殊日子



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

  • 第一个日期选择器 = 12.12.2014
  • 第二个日期选择器 = 20.12.2014
  • 完成天数 = 8

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

  • 整天
  • 季节天数(特殊日子(
  • 季节天数(非特殊日子(

例:

  • 特别日子是2014年12月15日和16日
  • 第一天 = 12.12.2014 和第二天 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()`
你可以

用momentjs - https://github.com/moment/moment
结合力矩量程 - https://github.com/gf3/moment-range

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

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

显示所有需要的时刻js和矩范围函数的基本示例:

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

最新更新