时间戳

首页 > 解决方案 > 如何在两个日期输入中具有相同的年份？

javascript - 如何在两个日期输入中具有相同的年份？

问题描述

我有两个日期输入“ from”和“ To”我希望输入中的年份在两个日期中都相同

例子 ：

  1. 如果用户在“from”输入中选择“11/03/ 2017 ”，他可以在“to”输入中选择直到“31/12/ 2017 ”

  2. 如果用户在“from”输入中选择“06/07/ 2014 ”，他可以在“to”输入中选择直到“31/12/ 2014 ”

（年份不得超过或早于已选择的年份）

如果用户尝试选择第一个输入中不存在的另一个年份，我们会显示一些警告消息。

    $("#from").on("change", function() {
        validateYear();
        var from = $("#from").val();
        if (from) {
          var maxYear = new Date(from).getFullYear();
          $("#to").attr("max", maxYear+"-12-31");
          $("#to").attr("min", maxYear+"-01-01");
        }
    });

    $("#to").on("change", function(){
        validateYear();
    });

    function validateYear() {
        var from = $("#from").val();
        var to = $("#to").val();
        if(from && to && new Date(from).getFullYear() != new Date(to).getFullYear()) {
            $("#to").val("");
            alert("error");
        }
    }
.from, .to {
    padding:20px;
    text-transform:uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="from">From</span>
<input id="from" type="date">
<span class="to">To</span>
<input id="to" type="date">

标签： javascriptjquerydatedatepicker

解决方案

一个基本的逻辑是：

    $("#from").on("change", function() {
        validateYear();
        var from = $("#from").val();
        if (from) {
          var maxYear = new Date(from).getFullYear();
          $("#to").attr("max", maxYear+"-12-31");
          $("#to").attr("min", maxYear+"-01-01");
        }
    });

    $("#to").on("change", function(){
        validateYear();
    });

    function validateYear() {
        var from = $("#from").val();
        var to = $("#to").val();
        if(from && to && new Date(from).getFullYear() != new Date(to).getFullYear()) {
            $("#to").val("");
            alert("error");
        }
    }

推荐阅读