Question

我有一些日期比较代码，我正在尝试调整到我自己的项目。我不太了解javascript，所以我想弄清楚它。基本上功能已设置，但我也希望它们显示一条消息，说明日期无效＆＃39;。我开始使用函数不确定是否有意义我从其他javascipt复制它代码现在是内联的，但我稍后会分开所有内容。 CSS来自原始示例。虽然我测试时没有显示，但我可以在控制台中看到javascript正在运行。这是我的代码：

注意：我希望javascript不是jquery解决方案，只是为了我的任务，我们只需要使用javascript。

<style>

    input.okay{
        color: green;
    }

    input.invalid{
        color: yellow;
    }

</style>

<h1>Date comparrison</h1>

<form action="">

    <div class="row">
        <label for="arrival">Arrival</label>
        <input type="date" id="arrival">
    </div>

    <div class="row">
        <label for="checkout">Checkout</label>
        <input type="date" id="checkout">
    </div>

    <div class="row">
        <input type="submit" id="submit">
    </div>

</form>

<script>
        var submit_button = document.querySelector('#submit');
        var arrival = document.querySelector('#arrival');
        var checkout = document.querySelector('#checkout');

        checkout.onblur = checkDates;

        function checkDates() {
            var valid = true;

            if(isValidDate(arrival.value) && isValidDate(checkout.value)) {
                valid = false;
                var arrival_date = new Date(arrival.value).valueOf();
                var checkout_date = new Date(checkout.value).valueOf();
                    if(arrival_date > checkout_date) {
                        valid = false;
                    }
                } else {
                    valid = false;
                    displayError('arrival', 'That date is invalid');
                } else {
                    hideError('arrival');
                    return valid;
            }
        }


        function isValidDate(str) {
            var datePattern = /^\d{2,4}\-\d{1,2}\-\d{1,2}$/;
            return datePattern.test(str);
        }

        submit_button.onclick = function() {
            console.log(checkDates());
            return false;
        }
</script>

Answer 1

您的代码中存在一些语法错误。特别是

if(arrival_date > checkout_date){
                valid = false;
            }
        }else{

一部分。我为你创建了一个jsFiddle，并包含了两个函数供你玩。这里：http://jsfiddle.net/r5y4y/

以下是2个函数（它们需要带有id选择器的div）

function hideError(selector) {
     document.getElementById(selector).innerHTML = null;   
}
function displayError(selector, text) {
     document.getElementById(selector).innerHTML = text;   
}

因此，如果你有一个<div id="arrival"></div>，你可以拨打displayError('arrival', 'That date is invalid');来设置div的innerHTML，其中ID到达“那个日期无效”

Answer 2

   function isValidDate(str) {
        var datePattern = /^\d{2,4}\-\d{1,2}\-\d{1,2}$/;
        return datePattern.test(str);
    }   

  function addClass(id,class_name) {
    var ele=document.getElementById(id);
    ele.setAttribute("class",class_name);
    return;
  } 

  function Test() {
        var arival_value = document.getElementById('arrival').value;
        var check_value = document.getElementById("checkout").value;

        if(isValidDate(arival_value) && isValidDate(check_value)){
                    var adate = new Date(arival_value).valueOf();
                    var cdate = new Date(check_value).valueOf();

                    if(adate>cdate){
                            alert("Arival Date is greater than checkout date");
                            addClass("arrival","invalid");
                            addClass('checkout',"invalid");
                        }                       
                        else{alert("Date is valid");
                            addClass("arrival","okay");
                            addClass('checkout',"okay");
                        }
                    }
                    else{ alert("date format is not correct");return; }


            return;

    }

日期比较显示验证消息

2 个答案: