Member Avatar for sweetyp

I have 2 text field in a form.
1st field for input date.
I want to use onclick event handler for 2nd text field. When user click 2nd text field then show up the value of 10 days before the input date in 1st field. how do i do that?
I try this:
<input type="text" name="Balancedue" onclick="document.form.balancedue.value=dateadd("d",-10,"document.form.eventdate.value")">
it doesnt work.
thanks

  • 3 Contributors
  • 2 Replies
  • 230 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by shyamNambiar

Dani AI

Generated

asked for the second field to show the date 10 days before the date entered in the first field. correctly pointed toward JavaScript, and is right to use the Date object — but parsing and timezone quirks can make simple attempts fail. The safest pattern is: accept the input (preferably an HTML5 type="date" value), parse it explicitly into numbers, compute the new Date with new Date(year, monthIndex, day), then format the result. That avoids relying on inconsistent string parsing and prevents off-by-one results caused by UTC/local conversions.

Example (works with type="date" or common text formats like YYYY-MM-DD or MM/DD/YYYY):

<input id="eventDate" name="eventdate" type="date" placeholder="YYYY-MM-DD">
<input id="balancedue" name="balancedue" readonly>

<script>
(function(){
  function parseDate(value){
    var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
    if (m) { return new Date(+m[1], +m[2]-1, +m[3]); }
    m = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(value);
    if (m) { return new Date(+m[3], +m[1]-1, +m[2]); }
    var d = new Date(value);
    return isNaN(d.getTime()) ? null : d;
  }

  function formatDate(d){
    var yyyy = d.getFullYear();
    var mm = ('0' + (d.getMonth()+1)).slice(-2);
    var dd = ('0' + d.getDate()).slice(-2);
    return yyyy + '-' + mm + '-' + dd;
  }

  function setTenDaysBefore(){
    var e = document.getElementById('eventDate');
    var b = document.getElementById('balancedue');
    var d = parseDate(e.value);
    if (!d){ b.value = ''; return; }
    var due = new Date(d.getFullYear(), d.getMonth(), d.getDate() - 10);
    b.value = formatDate(due);
  }

  document.getElementById('balancedue').addEventListener('click', setTenDaysBefore, false);
})();
</script>

Notes and quick troubleshooting:

  • If the result is off by one day, the input string was probably parsed as UTC by the browser; the explicit numeric parse above avoids that.
  • Prefer type="date" for native pickers but still parse the value numerically for consistency across browsers.
  • Make the second field readonly (or compute on blur/change of the first field) so users can’t accidentally enter inconsistent text.
  • For more complex date rules consider a small date library (e.g., date-fns) rather than rolling custom parsing for many formats.

For reference on JS Date behavior see the MDN Date docs: Date (MDN).

Recommended Answers

All 2 Replies

Member Avatar for hooknc

You might want to ask this question in the JavaScript Forum.

Member Avatar for shyamNambiar

You can cal the Date() function on onClick event and display the old date in the first field you should disable the first field .i think this is what u want ......just see the code below

<script type="text/javascript">
var mm =
function setday(obj){
this.y = obj.getFullYear();
this.m = obj.getMonth();
this.d = obj.getDate();
}
function ShowDate(){
var today = new Date();
var dd = new setday(today);
var h = today.getHours();
var tomor = new Date(dd.y,dd.m,dd.d-10);
var tt = new setday(tomor);
var theDay =(h>=14)?tt:dd;
var real=theDay.d+' '+mm[theDay.m]+' '+theDay.y;
document.menuform.name2.value=real;
alert(real)
}
</script>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.