前言
data(時間屬性)是HTML5中新增的一個屬性,常用於選擇日期、時間,但這個是無法通過屬性去限制其不能選擇過去的時間的,這個時候就需要我們在JQ中對其進行比較了!
由於放效果圖,需要在數據庫里面添加一條新數據,有點麻煩,且小編目前不想寫一個頁面Demo,所以目前就不放了(后續心情好了會給補上!)。
話不多說,搬代碼!
這里我們要效果呢就是選擇好時間后點擊確認驗收按鈕時將對選擇的時間進行判斷,若選擇的日期大於當前時間就提示Ok,反之則提示不能選擇過去的時間
HTML代碼
<div id="InstallDiv">
<span>上門安裝時間</span>
<span>
<input id="InstallTime" type="date">
</span>
<span>
<input id="InstallTimeBtn" type="submit" value="確認驗收">
</span>
</div>
這里小編主要放了放了兩個重要控件,一個id為InstallTime type為date的input控件和一個id為InstallTimeBtn的按鈕
jQuery代碼
$("#InstallTimeBtn").click(function () {
var InstallTime = $("#InstallTime").val(); //獲取data控件中選擇的日期
InstallDate=Date.parse(new Date(InstallTime.replace(/-/g, "/"))); //將選擇的日期轉換為可進行計算的格式(具體是上門意思小編也不太清楚暫且就叫它可計算的格式,了解的同志還望指點指點)
var date=new Date().toLocaleDateString();//獲取當前時間
date=Date.parse(new Date(date.replace(/-/g, "/")));//將當期日期轉換為可計算的格式
if(InstallDate-date>=0)//判斷選擇的日期減去當前時間是否不小於零
{
alert("OK")//不小於零就表示選擇的日期比當前日期要大,這個時候我們彈出“OK”
}
else
{
alert("不能選擇過去的時間!");//不小於零則表示選擇的日期比當前日期要小,這個時候我們彈出“不能選擇過去的時間”
}
})
后言
這個控件小編也是第一次使用,之前也沒在jQuery中對時間比較,所以對‘replace(/-/g, "/")’也不是很清楚,有清楚的同志可以在下方留言指點指點。
寫得比較淺,有啥錯誤還望大家指出,希望對大家有幫助!
