Created
June 16, 2023 10:36
-
-
Save arpeggio068/59b95a761e51847d6d33a26af6653ebf to your computer and use it in GitHub Desktop.
date input with check leap year validity
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <base target="_top"> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> | |
| <script src="https://code.jquery.com/jquery-3.6.0.js"></script> | |
| <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <form id="form1" novalidate> | |
| <div class="row my-2"> | |
| <div class="col"> | |
| <label>date1</label> | |
| <input name="equip_date1" id="equip_date1" type="text" class="form-control chk_date" | |
| pattern="(0[1-9]|1\d|2[0-9])/(0[1-9]|1[0-2])/(?:19|20)[0-9]{2}|29/(0[13-9]|1[0-2])/(?:19|20)(?:0[48]|[2468][048]|[13579][26])|30/(0[13-9]|1[0-2])/(?:19|20)[0-9]{2}|31/(0[13578]|1[02])/(?:19|20)[0-9]{2}" | |
| placeholder="DD/MM/YYYY" onchange="return validateDateLeapYear()" required> | |
| <div class = "invalid-feedback">incorrect date format</div> | |
| </div> | |
| <div class="col"> | |
| <label>date2</label> | |
| <input name="equip_date2" id="equip_date2" type="text" class="form-control chk_date" | |
| pattern="(0[1-9]|1\d|2[0-9])/(0[1-9]|1[0-2])/(?:19|20)[0-9]{2}|29/(0[13-9]|1[0-2])/(?:19|20)(?:0[48]|[2468][048]|[13579][26])|30/(0[13-9]|1[0-2])/(?:19|20)[0-9]{2}|31/(0[13578]|1[02])/(?:19|20)[0-9]{2}" | |
| placeholder="DD/MM/YYYY" onchange="return validateDateLeapYear()" required> | |
| <div class = "invalid-feedback">incorrect date format</div> | |
| </div> | |
| <div class="col"> | |
| <label>date3</label> | |
| <input name="equip_date3" id="equip_date3" type="text" class="form-control chk_date" | |
| pattern="(0[1-9]|1\d|2[0-9])/(0[1-9]|1[0-2])/(?:19|20)[0-9]{2}|29/(0[13-9]|1[0-2])/(?:19|20)(?:0[48]|[2468][048]|[13579][26])|30/(0[13-9]|1[0-2])/(?:19|20)[0-9]{2}|31/(0[13578]|1[02])/(?:19|20)[0-9]{2}" | |
| placeholder="DD/MM/YYYY" onchange="return validateDateLeapYear()" required> | |
| <div class = "invalid-feedback">incorrect date format</div> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" type="submit" onclick="validate()">test</button> | |
| </form> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> | |
| <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> | |
| </body> | |
| <script> | |
| function populateDates3(){ | |
| const currentDate = new Date(); | |
| $(function(){ | |
| $('.chk_date').datepicker({ | |
| //minDate: -365, | |
| maxDate: currentDate, | |
| dateFormat: "dd/mm/yy", | |
| dayNamesMin: ["อา", "จ", "อ", "พ", "พฤ", "ศ", "ส"], | |
| monthNames: ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", | |
| "ธันวาคม"], | |
| }); | |
| }); | |
| } | |
| function preventFormSubmit(){ | |
| const forms = document.querySelectorAll('form'); | |
| for (let i = 0; i < forms.length; i++) { | |
| forms[i].addEventListener('submit', function(event) { | |
| event.preventDefault(); | |
| }); | |
| } | |
| } | |
| function validate(){ | |
| const forms = document.querySelectorAll("#form1") | |
| Array.prototype.slice.call(forms).forEach(function (form) { | |
| form.addEventListener('submit', function (event) { | |
| if (!form.checkValidity()) { | |
| event.preventDefault() | |
| event.stopPropagation() | |
| } | |
| form.classList.add('was-validated') | |
| }, false) | |
| }) | |
| return Array.prototype.every.call(forms,function(form){ | |
| return form.checkValidity(); | |
| }); | |
| } | |
| function checkLeapYears(input){ | |
| year = parseInt(input); | |
| if(year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)){ | |
| return true; | |
| }else{ | |
| return false; | |
| } | |
| } | |
| function validateDateLeapYear(){ | |
| const inputDate = document.querySelectorAll(".chk_date") | |
| Array.prototype.slice.call(inputDate).forEach(function (el) { | |
| let year = el.value.split('/')[2] | |
| let month = el.value.split('/')[1] | |
| let date = el.value.split('/')[0] | |
| if(checkLeapYears(year) === false && Number(month) == 2 && Number(date) > 28 ){ | |
| el.setCustomValidity("Invalid date! Not a leap year and date value exceeds 28."); | |
| return false; | |
| } | |
| else { | |
| el.setCustomValidity(""); | |
| } | |
| return el.checkValidity(); | |
| }) | |
| } | |
| document.addEventListener("DOMContentLoaded",function(){ | |
| preventFormSubmit() | |
| populateDates3() | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment