0

how can obtain de difference of two dates in days from an html5 form with date picker ?

i have tried with something like this, that didn't work yet: it showed NaN (Not a Number)

<!DOCTYPE html>
<html>
    <body>
        <form oninput="c.value=b.value-a.value;">
            date a:<input type="date" id="a" value="">
            date b:<input type="date" id="b" value="">
            <br>
            c = b-a in days:<output name="c" for="a b"></output><br>
        </form>
    </body>
</html>
Kara
  • 6,115
  • 16
  • 50
  • 57
Federico Pereyra
  • 15
  • 1
  • 4
  • `"return (document.getElementBydId('a').value - document.getElementBydId('b').value);"`? Check the W3C for the features; http://www.w3.org/html/wg/drafts/html/master/forms.html#the-output-element –  Apr 04 '13 at 19:17
  • Thanks!. that is in javascript ?, would be possible to do in html5 native? I'm reading the W3C ! ;) – Federico Pereyra Apr 04 '13 at 19:20
  • Yes it is. But you can only do calculations based on that. If you want to do date calculations, you need a more complex structure. To convert both input values to a date format or microtime and check their differences. You can't just do "dateA"-"dateB" in HTML. What you could do is make dropdown boxes and convert all the values (year/month/day/hours/minutes/seconds) to microtime and then subtract the two dates from each other. It will make a long calculation in the `oninput` attribute tho. Might become hard to read. –  Apr 04 '13 at 19:25
  • would be a better way to do this?:
    date a: date b:
    c = b-a in days:
     – Federico Pereyra Apr 04 '13 at 19:31
  • But what date-format are you expecting to be inserted into a free field? People can type anything in there? Also there are many different datetime-notations. There are so many variables that you can't rely on what you have. Even that what you show in the previous comment doesn't work. `String - String = NaN` is the reason; like `"2012-01-01 20:20:12" - "2012-01-02 08:10:39" = NaN` ;) –  Apr 04 '13 at 19:34
  • should the browser help with the type date, preventing to the user insert something different? – Federico Pereyra Apr 04 '13 at 19:37
  • tried with this and worked:
    – Federico Pereyra Apr 04 '13 at 19:41
  • Good to hear. Good luck coding :) –  Apr 04 '13 at 19:42
  • thanks for making me read and think more ;) – Federico Pereyra Apr 04 '13 at 19:44
  • You should answer/accept you own question in this case. So other people who search for this can instantly know how to solve it, as they won't always check all comments :) –  Apr 04 '13 at 20:05

0 Answers0