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

Question

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

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

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

但是数组returns： 2017 年 10 月 31 日，2017 年 11 月 1 日，2017 年 11 月 1 日，2017 年 11 月 2 日，...

提前致谢

Answer 1

顺便说一句，找到了一个解决方案，在日期无效时推送后添加 day++ :)

Answer 2

错误：

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 3

这里是使用 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>

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

Javascript check if the date is valid then change it if not valid

javascript

jquery

jquery-ui-datepicker