Javascript Calculate Date and Send value to textbox

Question

I'm having Javascript with this code:

function addRowss(frm) {
        var start = new Date(document.myform.bookstart.value);
        var ends = new Date(document.myform.bookend.value);

        var starts = document.myform.bookstart.value;
        var yeara = starts.substring(0, 2);
        var montha = starts.substring(3,6);
        var datea = starts.substring(7,11);
        var num3 = (ends - start)/1000/60/60/24;
        var i;

        for(i=0;i <= num3; i++)
        {                   
            var theday = yeara+'-'+getnumo(montha)+'-'+datea;
            var resday = new Date(theday);
            rowNum ++;
            var row = '<p id="rowNum'+rowNum+'">Date: <input type="text" class="datepick" name="qty[]" id="date'+rowNum+'" value="'+theday+'"> Price: <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
            jQuery('#itemRows').append(row);
            yeara++;
        }
    }

What I want to do is text name[] will be automatically filled by my start date to my end date. For example, if I fill '06-Aug-2015' at start input and '06-Sep-2015' at end input, it will result about 30 textbox field which it's value will be filled by its date... so it will result:

[2015-08-06][ empty ]
[2015-08-07][ empty ]
[2015-08-08]
...
[2015-09-06][ empty ]
Note: [ ] = textbox

Right now I can add many textbox (attachment pic), but I can't set the value of this textbox as I want. Any idea?

it depend on my input... it from datepicker. Its format value is "dd-M-yy" or "06 Aug 2015" — Cross Vander
– Cross Vander, Commented Aug 6, 2015 at 4:09
Hi RobG, how to incrementing day by day? Because as You can see at my attachment it will count till 34. Also I have write Date object (2 first line). Also create a function to make it date (getnumo) — Cross Vander
– Cross Vander, Commented Aug 6, 2015 at 4:23

RobG · Accepted Answer · 2015-08-06 06:19:17Z

1

You should write a function to parse that format to a Date object, it's a non–standard format so no guarantee that the Date constructor will parse it correctly in all browsers. Then create a function to create a date string from a Date object in the format you require. Now you can generate the rows and just call the functions to add the formatted strings, incrementing the date by one day as you go along.

Here's how I'd rewrite your code to do that, you can get rid of the rowNum variable, I've modified the remove listener and function so it's not required.

// '06-Sep-2015' to Date
function parseDMY(s) {
  var months = {jan:0, feb:1, mar:2, apr:3, may:4,  jun:5, jul:6, aug:7, sep:8, oct:9, nov:10, dec:11};
  var b = s.split('-');
  return new Date(b[2],months[b[1].toLowerCase().substring(0,3)],b[0]);
}

// Date to '06-Sep-2015'
function formatDate(date) {
  var months = ['Jan','Feb','Mar','Apr','May','Jun', 'Jul','Aug','Sep','Oct','Nov','Dec'];
  function z(n){return (n<10? '0' : '') + n;}
  return z(date.getDate()) + '-' + months[date.getMonth()] + '-' + date.getFullYear();
}

function addRows(frm) {
    var start = parseDMY(frm.bookstart.value);
    var ends   = parseDMY(frm.bookend.value);
    var markup = '';
    var num3 = Math.round((ends - start)/8.64e7);
    var rowNum = 0;

    for(var i=0; i <= num3; i++) {
        var theday = formatDate(start);
        ++rowNum;
        markup += '<p id="rowNum' + rowNum + '">Date: <input type="text" class="datepick" name="qty[]" id="date' +
                   rowNum + '" value="' + theday + '"> Price: <input type="text" name="name[]" value="' +
                   frm.add_name.value + '"> <input type="button" value="Remove" onclick="removeRow(this);"></p>';
        start.setDate(start.getDate() + 1);        
    }
    document.getElementById('itemRows').innerHTML = markup;
}

function removeRow(el) {
  var node = el.parentNode;
  node.parentNode.removeChild(node);
}

<form id="bookingForm">
  <table>
   <tr><td>Start date<td><input name="bookstart" value="05-Aug-2015">
   <tr><td>End date<td><input name="bookend" value="08-Aug-2015">
   <tr><td><input name="add_name" value="the name">
   <tr><td><input type="reset"><td><input type="button" value="Add rows" onclick="addRows(this.form)">
  </table>
  <div id="itemRows"></div>
</form>

edited Aug 6, 2015 at 6:19

answered Aug 6, 2015 at 5:54

RobG

148k32 gold badges180 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Cross Vander Over a year ago

That was Awesome RobG! Thank You very much!! Just realize I don't create parseDMY. Maybe that's the problem... but thanks for saving my life

RobG Over a year ago

You should use parseDMY for the reason outlined: browsers aren't guaranteed to correctly parse the format your passing to the Date constructor. It may work in the browsers you've tested, but there is no specification or standard that requires them to do so.

Cross Vander Over a year ago

I see... Thanks for explanation... Got new experience.... Can I ask once again? Is there any function for reset button for the function? Because I want to remove it. It's ok to remove it right?

RobG Over a year ago

Yes, it just resets the form.

Collectives™ on Stack Overflow

Javascript Calculate Date and Send value to textbox

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related