標簽在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新屬性。
本篇記錄在開發中使用date屬性,遇到的一些問題,以及功能擴展:
html:
js:
利用標簽屬性實現
max:可選最大日期
min:可選最小日期
js設置最大只能選擇到當前日期
html
js
移動端顯示問題
當移動端使用nput[type="date"]時 ios系統日歷格式是這樣 ===> 2019年06月06日
樣式上安卓和ios不統一
為了實現樣式統一可以利用input[type="text"]代替日歷控件,顯示選擇的日期
html
css
/* 日期控件樣式 */ .date-input-box{ position: relative; display: inline-block; } .data{ width: 100px; height: 24px; padding: 0 5px; line-height: 24px; } .dateInput{ position: absolute; left: 0;right: 0; z-index: 10; opacity: 0; } .selectIcon { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: 3px; height: 0; border-top: 4px solid #999; border-left: 4px solid transparent; border-right: 4px solid transparent; z-index: 8; }
js
將 " - " 替換成 "/ "
//dataInput=dataInput.replace(/-/g,"/");
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54034.html
標簽在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新屬性。本篇記錄在開發中使用date屬性,遇到的一些問題,以及功能擴展: 獲取當前日期,并顯示在input[type=date]上 html: js: $(function(...
標簽在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新屬性。本篇記錄在開發中使用date屬性,遇到的一些問題,以及功能擴展: 獲取當前日期,并顯示在input[type=date]上 html: js: $(function(...
fastclick.js?bf9a:331 Uncaught DOMException: Failed to execute setSelectionRange on HTMLInputElement: The input elements type (number) does not support selection 解決方法: 找到node_module中的文件fastclick.js, l...
閱讀 2972·2021-09-22 15:18
閱讀 3395·2019-08-30 15:54
閱讀 3274·2019-08-30 15:53
閱讀 589·2019-08-30 14:12
閱讀 813·2019-08-29 17:01
閱讀 2198·2019-08-29 14:04
閱讀 1379·2019-08-29 13:09
閱讀 862·2019-08-26 17:40