Jeelani Posted December 29, 2014 Share Posted December 29, 2014 Hi everyone, I am newbee to Javascript, don't know exactly how to write the Javascript code. But need some help regarding date validation on html5 form. I have two dates actually. 1. Product Purchase Date 2. Product Warranty End Date When a user selects "Product Purchase Date", then the field of "Product Warranty End Date" which is min=""(css3) to be set with "Product Purchase Date". Need some code for this if someone could help me here. thanks. Link to comment Share on other sites More sharing options...
davej Posted December 29, 2014 Share Posted December 29, 2014 Since the HTML5 date input is not yet fully supported on all browsers I would suggest some sort of drop-down date selection. You are of course trusting that the user's computer has been set to the correct current date. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style></style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>'use strict';window.onload = init;function init() {document.getElementById('btn1').onclick = calc;}function calc(){var d = new Date();var pmonth = document.getElementById('pmonth').value;var pyear = document.getElementById('pyear').value;var year = d.getFullYear();var month = d.getMonth() + 1;alert('Purchased:'+ pmonth +'/'+ pyear +' Current:'+ month +'/'+ year);var delta = month - pmonth + 12*(year - pyear);alert(delta + ' months have passed since purchase');}</script></head><body><h2>Purchase date:</h2><select id="pmonth"> <option value="1">Jan</option> <option value="2">Feb</option> <option value="3">Mar</option> <option value="4">Apr</option> <option value="5">May</option> <option value="6">Jun</option> <option value="7">Jul</option> <option value="8">Aug</option> <option value="9">Sep</option> <option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option></select> <select id="pyear"> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> <option value="2006">2006</option> <option value="2007">2007</option> <option value="2008">2008</option> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option></select> <input type="button" id="btn1" value="Enter"></body> </html> Here is another version... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style></style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>'use strict';window.onload = init;var dtoday = new Date();function init() {document.getElementById('btn1').onclick = calc;document.getElementById('today').innerHTML = 'Today is: '+ dtoday.toDateString(); }function calc(){var pday = document.getElementById('pday').value;var pmonth = document.getElementById('pmonth').value;var pyear = document.getElementById('pyear').value;var dpurch;dpurch = new Date(pyear, pmonth-1, pday);if (dpurch.getMonth() != pmonth-1){ alert('invalid date');// such as feb 31}else{ alert('Date purchased: '+dpurch.toDateString()); var warrantydays = 3*365; // 3 years var dexp = new Date(dpurch.getTime() + warrantydays*24*60*60*1000); document.getElementById('expiry').innerHTML = 'The '+ warrantydays/365 +' year warranty expiration is '+ dexp.toDateString(); }}</script></head><body><h2 id="today"></h2><h2>Purchase date:</h2><select id="pday"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option></select> <select id="pmonth"> <option value="1">Jan</option> <option value="2">Feb</option> <option value="3">Mar</option> <option value="4">Apr</option> <option value="5">May</option> <option value="6">Jun</option> <option value="7">Jul</option> <option value="8">Aug</option> <option value="9">Sep</option> <option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option></select> <select id="pyear"> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> <option value="2006">2006</option> <option value="2007">2007</option> <option value="2008">2008</option> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option></select> <input type="button" id="btn1" value="Enter"><h2 id="expiry"></h2></body> </html> Link to comment Share on other sites More sharing options...
Jeelani Posted December 31, 2014 Author Share Posted December 31, 2014 Here is my code please see it and let me know how to set only min attribute to Product Purchase Date. <label for="PPurDate">Printer Purchase Date<span class="mycolon">:</span> </label> <input type="date" name="PPurDate" id="PPurDate" /> <br><br> <label for="Wend">Warranty End Date<span class="mycolon">:</span></label> <input type="date" min="?" name="Wend" id="Wend" /><br><br /> Because what I want is that when a user selects "Printer Purchase Date" as 23-01-2014 then "min" attribute for Warranty End Date should be set as selected "Printer Purchase Date". Because you can't have Warranty End Date lesser than "Printer Purchase Date". Link to comment Share on other sites More sharing options...
davej Posted December 31, 2014 Share Posted December 31, 2014 As I said above... http://caniuse.com/#feat=input-datetime ...Or are you using an HTML5 shim? Link to comment Share on other sites More sharing options...
Ingolme Posted December 31, 2014 Share Posted December 31, 2014 When submitting the form, you'll have to get the value from both fields (with the value property element.value), compare them both and if the second one is less than the first one then prevent the form from being submitted and show an error message I'm not sure in what format the date field stores its value, you'll probably have to break it into pieces using the substr() method and then create Date() objects for each one to compare them. Link to comment Share on other sites More sharing options...
davej Posted December 31, 2014 Share Posted December 31, 2014 I experimented with it in Chrome and it doesn't even work correctly in Chrome. I would avoid it. Link to comment Share on other sites More sharing options...
Ingolme Posted December 31, 2014 Share Posted December 31, 2014 There are jQuery plug-ins to make date pickers, you could research those. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now