代码之家 › 专栏 › 技术社区 › Teddy Westside

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

jquery-ui-datepicker jquery javascript

Teddy Westside · 技术社区 · 7 年前

<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天,然后检查日期是否有效。如果没有,它将更改日期。

问题是: 当我选择日期2017年10月31日阵列应该看起来像这样

但数组返回: 10/31/2017, 11/1/2017, 11/1/2017, 11/2/2017, ...

提前感谢

3 回复 | 直到 7 年前

Ketan Modi 7 年前

以下是使用 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>

Xupitan 7 年前

错误:

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);
}

你再推一次 价值 : 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>

clemens 7 年前

顺便说一句,我们找到了一个解决方案 day++ 日期无效时推送后:)