检查开始日期是否小于结束日期(不使用任何pluguin)
Check if start date is less than end date (without using any pluguin)
这里有两个日期fromDate
和toDate
,我想检查fromDate
<toDate
,但它只检查日期是否较小。例如,如果您放置fromDate: 01/01/2016
和toDate: 15/01/2016
可以正常工作,但如果我放置fromDate: 01/01/2016
和toDate: 15/10/2016
,则不会出现任何错误。
这是我在jsFiddle中的代码。
$(function() {
$(".date-picker").datepicker({
dateFormat: 'dd/mm/yy'
});
$(".date-picker").each(function() {
$(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>');
});
$('input:button').click(function(e) {
$("#fDate").removeClass("red");
$("#tDate").removeClass("red");
var fromDate = $("#fDate").val();
var toDate = $("#tDate").val();
if (toDate <= fromDate) { //here only checks the day not month and year
$("#fDate").addClass("red");
$("#tDate").addClass("red");
errors++;
}
if (errors) e.preventDefault();
});
});
.imageInputWrapper {
width: 172px;
border: solid 1px white;
background-color: white;
display: flex;
align-items: center;
box-shadow: 0 2px 2px 0 #C2C2C2;
}
.red {
box-shadow: 0px 0px 2px 2px red;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<form>
<table>
<tr>
<td>
<input id="fDate" class="date-picker" type="text" name="fromDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" />
<img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="fromDateImgId">
</td>
</tr>
<tr>
<td>
<input id="tDate" class="date-picker" type="text" name="toDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" />
<img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="toDateImgId">
</td>
</tr>
<input type="button" value="submit">
</table>
</form>
您可以在Javascript中查看Date对象JavaScript日期库有了它,你可以做一些类似的事情
var fromDate = '04/14/2016',
toDate = '04/16/2016',
fdate = new Date(fromDate),
tdate = new Date(toDate);
if (fdate.valueOf() > tdate.valueOf()) {
console.log('Departure can not be before arrival silly. What are you a time traveler?');
}
您需要获取日期对象,然后比较值,在您的情况下,您正在进行字符串比较,而不是日期比较。
可以使用datepicker.getDate()
方法从输入字段中获取当前选定的日期对象。
$(function() {
$(".date-picker").datepicker({
dateFormat: 'dd/mm/yy'
});
$(".date-picker").each(function() {
$(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>');
});
$('input:button').click(function(e) {
$("#fDate").removeClass("red");
$("#tDate").removeClass("red");
var fromDate = $("#fDate").datepicker('getDate');
var toDate = $("#tDate").datepicker('getDate');
if (toDate <= fromDate) { //here only checks the day not month and year
$("#fDate").addClass("red");
$("#tDate").addClass("red");
errors++;
}
if (errors) e.preventDefault();
});
});
.imageInputWrapper {
width: 172px;
border: solid 1px white;
background-color: white;
display: flex;
align-items: center;
box-shadow: 0 2px 2px 0 #C2C2C2;
}
.red {
box-shadow: 0px 0px 2px 2px red;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<form>
<table>
<tr>
<td>
<input id="fDate" class="date-picker" type="text" name="fromDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" />
<img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="fromDateImgId">
</td>
</tr>
<tr>
<td>
<input id="tDate" class="date-picker" type="text" name="toDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" />
<img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="toDateImgId">
</td>
</tr>
<input type="button" value="submit">
</table>
</form>
相关文章:
- 使用JavaScript日期的任何时间的时区偏移量
- 日期-时间范围指令字段未显示任何值
- 检查开始日期是否小于结束日期(不使用任何pluguin)
- JavaScript 中任何格式的日期正则表达式
- 为什么iOS上的Phonegap中的新日期不返回任何内容
- 角度输入[类型=日期].未显示任何值
- Javascript:如果列包含任何日期,则在 google 电子表格中移动行 (1/2/2015)
- 为什么本地化仅在单击日期或任何其他按钮后才会更改
- 是否有任何库可以识别任何格式的日期
- 使用jQuery或javascript转换日期格式(不使用任何lib)
- Regex:匹配日期和冒号之间的任何字符串
- 如何制作<输入类型=“;日期“>所有浏览器都支持吗?任何替代方案
- 如何检查数组中的任何日期是否在日期范围内
- Javascript日期没有任何意义
- Casperjs然后点击打开日期picker,但无法检索日历中的任何内容
- 转换任何日期插入到ISO格式没有时间戳在JavaScript
- 是否有任何javascript或jquery函数来确定字符串是数字还是日期
- 要显示数据的最后一周和任何两个日期之间的数据,我正在努力
- 任何时间js日期选择错误
- 为任何日期范围过滤JSON格式的数据