如何解决jQuery UI Datepicker的手动日期条目？

作者: 敢嫁就敢娶
发布时间: 2024-05-26 03:24:49 (1月前)
转自：

3 条回复

0#
回复此人
生如夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是一种做法 - 下面的评论： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> // Some sample dates let userDates = [ "29092019", "2909", "0103", "1303", "1403" ]; // Run the sample dates through parseUserDate() for (let userDate of userDates) { console.log(userDate + ":"); console.log(parseUserDate(userDate)); } function parseUserDate(dateStr) { let parsedDate; // If it's 8 characters long, slice into YYYY-MM-DD if (dateStr.length === 8) { let dateSplit = [ dateStr.slice(4), dateStr.slice(2, 4), dateStr.slice(0, 2) ]; parsedDate = new Date(dateSplit.join("-")); } // 4 characters long - slice into MM-DD and prefix with YYYY later. else if (dateStr.length === 4) { let monthDay = [ dateStr.slice(2, 4), dateStr.slice(0, 2) ].join("-"); // The current date - this is used to check if the user date should be next year. let now = new Date(); // MM-DD with the current year. let userDateCurrentYear = new Date(now.getFullYear() + "-" + monthDay); // MM-DD with next year. let userDateNextYear = new Date((now.getFullYear() + 1) + "-" + monthDay); // If the current date is past the MM-DD this year, set parsedDate to next year's date. if (now > userDateCurrentYear) { parsedDate = userDateNextYear; } else { parsedDate = userDateCurrentYear; } } return parsedDate; } </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
部落用户 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 试试这个...... </p> <P> 的<strong> 编辑： </强> 要与jQuery的日期选择器集成，您可以像下面这样做 </p> <P> 的<strong> 编辑＃2： </强> 添加无效日期验证，＆amp;在无效日期返回空字符串 </p> <P> 的<strong> 编辑＃3： </强> 修复日期验证：添加闰日验证 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> $(function(){ $('.datepicker').datepicker({ dateFormat:'dd.mm.yy' }); $('.datepicker').on('blur',function(){parseInputDate(this);}); }) function parseInputDate(elm) { var currDate = new Date(), monDt = (('0'+currDate.getMonth()).slice(-2)+('0'+currDate.getDate()).slice(-2)), // get current month+date to compare inputVal = $(elm).val().match(/\d{2}/gi); // split date components into array of [dd,mm,yy,yy] // another date validation, by comparing parameters and date object result var isValidDate = function(yyyy,mm,dd) { var dt = new Date(yyyy,parseInt(mm,10)-1,dd); return (dt.getFullYear()+'-'+('0'+(dt.getMonth()+1)).slice(-2)+'-'+('0'+dt.getDate()).slice(-2)) == yyyy+'-'+mm+'-'+dd; } if (inputVal!=null && inputVal.length>=2) { var year = currDate.getFullYear(); if (monDt>(inputVal[1]+inputVal[0])) year++; // generate formatted text based on date component count // add date validation to catch invalid dates using (new Date('yyyy-mm-dd')).getTime() which will return NaN on invalid date var result = (inputVal.length==2 && isValidDate(year,inputVal[1],inputVal[0]) && inputVal[0]+'.'+inputVal[1]+'.'+year) || (inputVal.length==3 && isValidDate('20'+inputVal[2],inputVal[1],inputVal[0]) && inputVal[0]+'.'+inputVal[1]+'.20'+inputVal[2]) || (inputVal.length==4 && isValidDate(inputVal[2]+inputVal[3],inputVal[1],inputVal[0]) && inputVal[0]+'.'+inputVal[1]+'.'+inputVal[2]+inputVal[3]) || ''; // set empty on invalid dates $(elm).val(result); } else $(elm).val(''); } </script> </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input type="text" id="myDate" class="datepicker" /> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论