入力された日付を比べてメッセージを表示

二つの日付を比べて「新しい」「古い」「同じ」のメッセージを表示します。

何年後と比較…とかも改良すればできる感じ。

JSを読み込みます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://codingmania.net/demo/form/0014/js/main.js"></script>

[main.js]JavaScript

//日付のチェック
$(function(){
  $("#limitcheck").click(function(){
    var startday = parseInt($("#checkday").val());
    var startyear = parseInt($("#checkyear").val());
    var startmonth = parseInt($("#checkmonth").val());
    var endyear = parseInt($("#endyear").val());
    var endmonth = parseInt($("#endmonth").val());
    var endday = parseInt($("#endday").val());
    if ((jQuery.isNumeric(startday)==false)||(jQuery.isNumeric(startyear)==false)||(jQuery.isNumeric(startmonth)==false)||(jQuery.isNumeric(endyear)==false)||(jQuery.isNumeric(endmonth)==false)||(jQuery.isNumeric(endday)==false)){
      alert("日付をすべて入力してください。");
    } else {
      //var fromyear=endyear+5;
      //var tomonth = startmonth-1;
      to = new Date(startyear,startmonth,startday,0,0,0).getTime();
      from = new Date(endyear,endmonth,endday,0,0,0).getTime();
      //alert(to);
      //alert(from);
      if(to<from){
        alert("日付：【2】のほうが新しいです。");
      } else if(to == from){
        alert("日付が同じです。");
      } else{
        alert("日付：【1】のほうが新しいです。");
      }
    }
  });
});

HTMl

<form action="">
<div class="Form">
<dl>
<dt><label for="checkyear">日付：【1】</label></dt>
<dd><select id="checkyear" title="西暦を入力してください。">
<option value="選択" selected="selected">--</option>
<option value="2030">2030</option>
<option value="2029">2029</option>
<option value="2028">2028</option>
<option value="2027">2027</option>
<option value="2026">2026</option>
<option value="2025">2025</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
</select>&nbsp;年

<select id="checkmonth" title="月を入力してください">
<option value="選択" selected="selected">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>&nbsp;月

<select id="checkday" title="日付を入力してください">
<option value="選択" selected="selected">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>&nbsp;日
</dd>
</dl>

<dl>
<dt id="checkreceipt"><label for="endyear">日付：【2】</label></dt>
<dd>
<select id="endyear" title="西暦を入力してください。">
<option value="選択" selected="selected">--</option>
<option value="2030">2030</option>
<option value="2029">2029</option>
<option value="2028">2028</option>
<option value="2027">2027</option>
<option value="2026">2026</option>
<option value="2025">2025</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
</select>&nbsp;年

<select id="endmonth" title="月を入力してください">
<option value="選択" selected="selected">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>&nbsp;月

<select id="endday" title="日付を入力してください">
<option value="選択" selected="selected">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>&nbsp;日
</dd>
</dl>

<div class="Form__checkbtn">
<button id="limitcheck" type="button" value="日付をチェック！">日付をチェック！</button>
<!-- /.Form__checkbtn --></div>


<!-- /.Form --></div>
</form>

CSS

.Form dl{
  margin: 0 0 2px 0;
  display: block;
  box-sizing:border-box;
  line-height: 1.5;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form dl{
}
}
.Form dl dt{
  display: block;
  padding: 10px;
  font-size: 14px;
  background-color:#EEE;
  box-sizing:border-box;
  font-weight: bold;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form dl dt{
}
}
.Form dl dd{
  display: block;
  margin: 0 0 40px 0;
  padding: 10px;
  font-size: 14px;
  box-sizing:border-box;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form dl dd{
  margin-bottom: 30px;
}
}

.Form select{
  width: 150px;
  margin: 0 3px 0 0;
  padding: 5px;
  box-sizing:border-box;
  border: solid 1px #999;
  border-radius: 4px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form select{
  width: 70%;
  margin-bottom: 20px;
}
.Form dd select:last-child{
  margin-bottom: 0px;
}
}

/* Form__checkbtn */
.Form__checkbtn button{
  margin: 0 auto;
  display: block;
  box-sizing:border-box;
  padding: 5px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
  border-radius: 4px;
  border:solid 1px #737373;
  box-shadow: 2px 2px 0 #CCC;
  cursor: pointer;
  text-align: center;
  width: 300px;
  font-weight: bold;
  font-size: 16px;
}