JavaScript to update End Date when Start Date is changed

Question

For the site I am developing, I use a form to update the different fields of a model.

Some of those fields need to be updated according to the values of others. For example, each instance of a Task, has a start date, an end date, and a length which have to verify the following : End = Start + Length (where weekends are not counted, but that is a secondary issue).

So one of the functions I am trying to write would do :

When the user changes the value of the input Start_date
Get that date from the input field
Get the value of the field Length
Update the value of the input "End date" with (Start_date + Length)

The three inputs concerned by my example have the following IDs : id_start, id_length, id_finish.

Here is what I have written, but which doesn't work at all (nothing visible happens...) :

<script>
    $( "#id_start" ).change(function() {
        var start = new Date();
        var finish = new Date();
        var numberOfDays = document.getElementById('id_length').value;
        start = document.getElementById('id_start').value;
        finish.setdate(start.getDate()+document.getElementById('id_length'))
        $('#id_finish').val(finish);
    });
</script>

Any hint at a solution to make it work would be hugely appreciated.

Knockout.js would be perfect for this job. You can data-bind elements and define computable relations between them. http://knockoutjs.com/ Combine it with MomentJS and you have easy date manipulation as well. http://momentjs.com/ — Ole Borgersen, Oct 17 '14 at 12:24
@Burn Do you mean that the change event doesn't apply to input elements ?.. — Emeric, Oct 17 '14 at 12:30
@OleBorgersen That seems like a good solution for my broader issue. I will have a look at it. Thanks. — Emeric, Oct 17 '14 at 12:31
@Emeric it does, but it fires on `blur`. So use `keyup` :) `Change` event is more suitable on ` — , Oct 17 '14 at 12:32
I have tried to change the content of my function to a simple alert to start checking the event itself. And none work. — Emeric, Oct 17 '14 at 12:37
What does "neither worked" mean? Is there any error in your Javascript Console? Oh, just a note: when you write `finish.setdate(start.getDate()+document.getElementById('id_lenght'))` I guess you'd write `finish.setDate(start.getDate()+document.getElementById('id_lenght').value);` — , Oct 17 '14 at 12:39
@Burn I've realized my mistake may not be what I first thought it was. My form is Django generated, so I can't add the onevent tag to the input. That's why I used addEventListener for the first time. And I'm pretty sure I have not used it the right way. I'll try to fix that before investigating further. — Emeric, Oct 17 '14 at 12:55
@Burn Ok the first part is fixed. My onload functin which is adding the eventlistener wasn't where it should have been. — Emeric, Oct 17 '14 at 13:07
@Burn Now I do get the alert (modified code) but keyup seems to be sending me one every character changed while change only sends me one when the input gets out of focus. I think I'll keep using change for now since that's the behaviour I want. Thanks for your help with this part ! — Emeric, Oct 17 '14 at 13:08

score 1 · Accepted Answer · answered Oct 17 '14 at 12:59

Let's look at what your code is actually doing.

var start = new Date();

Here you create a new Date object.

start = document.getElementById('id_start').value;

Here, you change the value of start to the value of the DOM element with the id = 'id_start'. The problem is, this value isn't a Date object. Even the new HTML Date input type (which isn't supported by Firefox or IE) will only give you a string when you pull it's value. So you've created a new Date object, and then you throw it out immediately.

So now start isn't a Date, but a string. In this line:

finish.setdate(start.getDate()+document.getElementById('id_lenght'))

You're attempting to call the undefined .getDate() on a string object, so you'll get an error.

Here's what you need to do. That string (assuming it's in ISO format: YYYY-MM-DD or YYYY-MM-DDTHH:MM:SS) can be used to create a new Date.

start = new Date(document.getElementById('id_start').value);

Now start is actually a date object, and you can add the length in days to get your end date.

Of course, you'll want to make sure the input is in an acceptable format! There's a lot of 'date picker' options (jQueryUi, for example, has a datepicker), and if you're only interested in supporting Chrome, the works well.

That makes sense. However my date format isn't ISO, I'm using 'dd/mm/yyyy'. Is there a way to modify your line to take it into account ? (I'm thinking of something like Django's _|date:"d-m-Y"_) — Emeric, Oct 17 '14 at 13:14
@Emeric, You can use the jQuery dateFormat plugin, for one option. See: http://stackoverflow.com/questions/5250244/jquery-date-formatting for a related question. — Travis Clark, Oct 17 '14 at 13:19
Thanks. I also noticed you mentioned DatePicker, which I am using here too. I had commented the datepicker lines in order to work on this new function, but when I uncomment the DatePicker fucntions, I notice that the eventlistener Change doesnt work anymore, and neither do blur or keyup... — Emeric, Oct 17 '14 at 13:23
Ahh. Admittedly, I've never used the DatePicker myself, but it seems like it triggers the `onSelect` event. Here's another link: http://stackoverflow.com/questions/6471959/jquery-datepicker-onchange-event-help — Travis Clark, Oct 17 '14 at 13:33

JavaScript to update End Date when Start Date is changed

1 Answers1