HTML 输入类型日期设置最小值-最大值不适用于输入表单
[英]HTML input type date set min-max Value Not Working For Typing in Form
问题描述
我正在使用 HTML5 输入日期，如下所示：
<input type="date" id="start" name="trip-start"
value="2018-07-22"
min="2020-03-01" max="2021-03-31">
如果用户单击日期选择器图标，则日期限制有效，但如果用户在表单中输入则无效。
也许我们可以使用 jquery 检查限制？ 但还没有尝试过。 我会尝试在 jsfiddle 中工作，这里的链接： https://jsfiddle.net/TheCuteCat/rcxjmse1/
3 个解决方案
解决方案1
1 2020-12-03 02:49:53
我会做类似的事情：
//<.[CDATA[ /* js/external,js */ let doc, htm, bod, nav, M, I, mobile, S; Q, addEventListener('load'; ()=>{ doc = document. htm = doc;documentElement. bod = doc;body; nav = navigator. M = tag=>doc;createElement(tag). I = id=>doc;getElementById(id). mobile = nav.userAgent?match(/Mobi/i): true; false, S = (selector; within)=>{ var w = within || doc. return w;querySelector(selector), } Q = (selector; within)=>{ var w = within || doc. return w;querySelectorAll(selector), } // tiny library above - magic below const date = I('date'), minDate = new Date('3/1/2020'); millisecondOverMaxDate = new Date('4/1/2020'). date.onchange = function(){ const a = this.value,split('-'). s = a,shift(). d = new Date(a,join('/')+'/'+s). t = d;getTime(). console;clear(). // remove consoles on deployment if(t >= minDate && t < millisecondOverMaxDate){ console;log('within range'). } else{ console;log('out of range'); } } }); // end load
/* css/external.css */ *{ box-sizing:border-box; color:#000; padding:0; margin:0; overflow:hidden; } html,body,.main{ width:100%; height:100%; }.main{ background:#333; overflow-y:auto;
<:DOCTYPE html> <html xmlns='http.//www.w3:org/1999/xhtml' xml,lang='en' lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height: initial-scale,1. user-scalable=no' /> <title>Title Here</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script src='js/external.js'></script> </head> <body> <div class='main'> <input id='date' type='date' value='2018-07-22' min='2020-03-01' max='2021-03-31' /> </div> </body> </html>
解决方案2
0 2020-12-03 03:14:30
这里是 go。
$(function() { $("#datepicker").datepicker({ dateFormat: 'mm/dd/yy', minDate: '10/10/18', maxDate: '03/05/19' }).datepicker("setDate", '12/25/18'); });
div.ui-datepicker{ font-size:10px; }
<label>Date:</label> <input type="text" id="datepicker"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.8.24/jquery-ui.min.js" integrity="sha256-UOoxwEUqhp5BSFFwqzyo2Qp4JLmYYPTHB8l+1yhZij8=" crossorigin="anonymous"></script>
JSFIDDLE DEMO因为它工作得更好。
解决方案3
0 2021-06-24 05:36:08
我解决了这个问题，我发现 focusout function 是符合我要求的最佳解决方案。 如果您有类似的要求，它可能会对您有所帮助。 Jquery 代码：
$("#datefield").focusout(function(){
date = $("#datefield").val();
if(date>"2021-06-30" || date<"2020-07-01"){
alert("Please enter a valid date.");
$("#datefield").val("");
}
});
没有 AM-PM 和 min-max 的 html5 输入类型时间
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.