Question

＆＃13;

<html>
	<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Try It</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">
            var dates = new Array();

            function addDates(date) {
                if (dates.length > 0) {
                    dates = [];
                }
                if (jQuery.inArray(date, dates) < 0){
                    var i;
                    var month = date.getMonth()+1;
                    var day = date.getDate();
                    var year = date.getFullYear();
                    for (i=1;i<14;i++){
                        var value = month + '/' + day + '/' + year;
                        var dateIsValid = isDate(value);
                        if (dateIsValid == true) {
                            day++;
                            dates.push(value);
                        } else {
                            if (month == 12) {
                                month = 0;
                                year = year + 1;
                                day = 0;
                            }
                            if (month != 12) {
                                month = month + 1;
                                day = 1;
                            }
                            var value = month + '/' + day + '/' + year;
                            dates.push(value);
                        }
                        console.log(dateIsValid);
                        console.log(dates);
                    }
                }
            }

            function isDate(val) {
                var date = new Date(val);
                return !isNaN(date.valueOf());
            }

            jQuery(function () {
                jQuery("#datepicker").datepicker({
                    autoclose: false,
                    onSelect: function (dateText, inst) {
                        var date = new Date($(this).datepicker('getDate'));
                        addDates(date);
                    },
                    beforeShowDay: function (date) {
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1;
                        var day = date.getDate();
                        var dateString = month + "/" + day + "/" + year;

                        var gotDate = jQuery.inArray(dateString, dates);
                        if (gotDate >= 0) {
                            // Enable date so it can be deselected. Set style to be highlighted
                            return [true, "ui-state-highlight"];
                        }
                        // Dates not in the array are left enabled, but with no extra style
                        return [true, ""];
                    }
                });
            });
        </script>
    </head>
<body>
 
    <p>Date: <input type="text" id="datepicker"></p>

＆＃13;

我创建了一个脚本，突出显示接下来的14天，然后检查日期是否有效。如果不是，它将更改日期。

问题是：当我选择2017年10月31日的日期数组应该看起来像这样 2017年10月31日，11/1 / 2017,11 / 2/2017，...

但是数组返回： 2017年10月31日，11/1 / 2017,11 / 1 / 1,11 / 2/2017，...

提前致谢

Answer 1

错误：

if (month != 12) {
   month = month + 1;
   day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);

您将value：11/1/2017推送到datas。然后day=1，month=11：

var value = month + '/' + day + '/' + year;
var dateIsValid = isDate(value);
if (dateIsValid == true) {
day++;
dates.push(value);
}

再次推送value：11/1/2017。您可以将day++添加到

if (month != 12) {
   month = month + 1;
   day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
day++;

同如下：

<html>
	<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Try It</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">
            var dates = new Array();

            function addDates(date) {
                if (dates.length > 0) {
                    dates = [];
                }
                if (jQuery.inArray(date, dates) < 0){
                    var i;
                    var month = date.getMonth()+1;
                    var day = date.getDate();
                    var year = date.getFullYear();
                    for (i=1;i<14;i++){
                        var value = month + '/' + day + '/' + year;
                        var dateIsValid = isDate(value);
                        if (dateIsValid == true) {
                            day++;
                            dates.push(value);
                        } else {
                            if (month == 12) {
                                month = 0;
                                year = year + 1;
                                day = 0;
                            }
                            if (month != 12) {
                                month = month + 1;
                                day = 1;
                            }
                            var value = month + '/' + day + '/' + year;
                            dates.push(value);
                            day++;
                        }
                        console.log(dateIsValid);
                        console.log(dates);
                    }
                }
            }

            function isDate(val) {
                var date = new Date(val);
                return !isNaN(date.valueOf());
            }

            jQuery(function () {
                jQuery("#datepicker").datepicker({
                    autoclose: false,
                    onSelect: function (dateText, inst) {
                        var date = new Date($(this).datepicker('getDate'));
                        addDates(date);
                    },
                    beforeShowDay: function (date) {
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1;
                        var day = date.getDate();
                        var dateString = month + "/" + day + "/" + year;

                        var gotDate = jQuery.inArray(dateString, dates);
                        if (gotDate >= 0) {
                            // Enable date so it can be deselected. Set style to be highlighted
                            return [true, "ui-state-highlight"];
                        }
                        // Dates not in the array are left enabled, but with no extra style
                        return [true, ""];
                    }
                });
            });
        </script>
    </head>
<body>
 
    <p>Date: <input type="text" id="datepicker"></p>

Answer 2

以下是使用moment.js的解决方案，非常简单，您不需要使用复杂的编码。它会在所选日期添加14天。Moment.js会自动处理month change，year change等，因此您不需要更改月份，年份，日期的额外条件等

 
            var dates = new Array();
            
            function addDa(date){ 
              
              dates = [];
              var selected_date = moment(date);
              var last_date = moment(date).add(14, 'days');
              for (var dat=selected_date; dat <= last_date; dat.add(1, 'days'))
              {  
                  dates.push(dat.format('MM/DD/YYYY'));
              } 
              console.log(dates);
                 
            }
              
            jQuery(function () {
                jQuery("#datepicker").datepicker({
                    autoclose: false,
                    onSelect: function (dateText, inst) {
                        var date = new Date($(this).datepicker('getDate'));
                        addDa(date);
                    },
                    beforeShowDay: function (date) {
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1;
                        var day = date.getDate();
                        var dateString = month + "/" + day + "/" + year;

                        var gotDate = jQuery.inArray(dateString, dates);
                        if (gotDate >= 0) {
                            // Enable date so it can be deselected. Set style to be highlighted
                            return [true, "ui-state-highlight"];
                        }
                        // Dates not in the array are left enabled, but with no extra style
                        return [true, ""];
                    }
                });
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.0/moment.js"></script>
<html>
	<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Try It</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
       
    </head>
<body>
 
    <p>Date: <input type="text" id="datepicker"></p>

Answer 3

顺便提一下，当日期无效时，推出了day++的解决方案：）

Javascript检查日期是否有效，如果无效则更改日期

3 个答案: