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> 年
<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> 月
<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> 日
</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> 年
<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> 月
<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> 日
</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;
}