In this article i will show you how you can add no of days to the to user entered date using jquery. So for this first we will add the jquery library reference into the project and add the date in dd/mm/yyyy format into the textbox.
Here is html of the entry form.
<div class="text-center"> Enter Date: <input type="text" placeholder="dd/mm/yyyy" id="txtuserinoutdate" /><br /> No of Days: <input type="text" placeholder="noofdays" id="txtnoofdays" /><br /> Calculated Date: <input type="text" placeholder="dd/mm/yyyy" id="txtcalculateddate" /> <br /> <br /> <input type="button" value="Calculate" onclick="javascript: CalculateDate();" /> </div> |
Now we will add the jQuery file reference and add the add the below javascript function code.
var CalculateDate = function () { var userdate = new Date($("#txtuserinoutdate").val()); var noofdays = $("#txtnoofdays").val(); var calculateddate = new Date(addDays(getFormattedString(userdate), noofdays)); $("#txtcalculateddate").val(getFormattedString(calculateddate)); } var getFormattedString = function (d) { return ('0' + d.getDate()).toString().slice(-2) + "/" + ('0' + (d.getMonth() +
1)).toString().slice(-2) + "/" + d.getFullYear(); } var addDays = function (input_date, days) { var currentDate = new Date(input_date); if (days != 0) {
currentDate.setDate(currentDate.getDate() + parseInt(days)); } return currentDate; } |
In above code i have used three javascript function. In this first function is called on click event of the button control and on other hand getformatedString is used for reformatting the user entered date. and addDays function is used for adding the no of days to the user provided date in dd/mm/yyyy format. Now we have done run the page and check the output.
Now add the date and no days which you want to add and click on Calculate.
0 comments:
Please let me know your view