HTML5中input[type='date']自定義樣式與日曆校驗功能的實現代碼

HTML5提供了日曆控件功能，縮減了開發時間，但有時它的樣式確實不如人意，我們可以根據下面的代碼自行修改。

建議：複製下面的代碼段，單獨建立一個css文件，方便我們修改。

 /* 修改日曆控件類型*/::-webkit-datetime-edit { padding: 1px;} /*控制編輯區域的*/::-webkit-datetime-edit-fields-wrapper { background-color: #fff; } /*控制年月日這個區域的*/::-webkit-datetime-edit-text { color: #333; padding: 0 .5em; } /*這是控制年月日之間的斜線或短橫線的*/::-webkit-datetime-edit-year-field { color: #333; } /*控制年文字, 如2013四個字母佔據的那片地方*/ ::-webkit-datetime-edit -month-field { color: #333; } /*控制月份*/::-webkit-datetime-edit-day-field { color: #333; } /*控制具體日子*/::-webkit-inner- spin-button { visibility: hidden; } /*這是控制上下小箭頭的*/::-webkit-calendar-picker-indicator { /*這是控制下拉小箭頭的*/ border: 1px solid #ccc; border -radius: 2px; box-shadow: inset 0 1px #fff, 0 1px #eee; background-color: #eee; background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6); color: # 666;}::-webkit-clear-button { /*控制清除按鈕*/}

終止日期不能小於起始日期，日期選擇範圍為7天，其餘時間段為不可選。

注：下述代碼段利用Jquery原理

//轉換時間類型為yyyy-mm-dd function FormatDate (strTime) { var date = new Date(strTime); var formatedMonth = (0 + (date.getMonth() + 1)).slice(-2); var formatedDate = (0 + (date.getDate())).slice(-2); return date.getFullYear()+-+formatedMonth+-+formatedDate; }//開始時間$(#keyword_time_min).change(function() { var d1=new Date($(this).val()); //獲取當前時間var d2=new Date(d1); // d2.setFullYear(d2.getFullYear()+1); //當前時間+1年d2.setDate(d2.getDate()+7); //當前時間+7天d2=FormatDate(d2); //轉換d2為YYYY-MM-DD格式$(#keyword_time_max).attr(max ,d2); //最大時間為d2 $(#keyword_time_max).attr(min,$(this).val()); //最小時間為當前時間});//終止時間$(#keyword_time_max). change(function(){ var d3=new Date($(this).val()); var d4=new Date(d3); // d4.setFullYear(d4.getFullYear()-1); d4.setDate( d4.getDate()-7); //當前時間-7天d4=FormatDate(d4); $(#keyword_time_min).attr(min,d4); $(#keyword_time_min).attr(max,$(this) .val()); });

以上所述是小編給大家介紹的HTML5中input[type='date']自定義樣式與日曆校驗功能的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！