Calculable Date Field in FabricJS
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi there. Not sure if this is possible. I have a canvas and a few IText fields (FabricJS 1.7.22) and I’m wondering if the fields could be calculable? EG, do simple math but still be type-able?

Example: I have two IText fields where someone can type in any two dates. I’d like the total number of years, months, and days of these two dates to automatically be added to the last field(s).

My only issues are that the Years, Months and Days (totals field) need to remain spaced, and need to remain “addable” via a button, as they are. Here’s my JSFiddle example: https://jsfiddle.net/code4ever/ze01ep55/. You can click the button to add the fields that I’m talking about.

Thanks in advance.

Are you wanting to subtract the two dates and put the result in a new field? What exactly is the simple math you mention? Hope I can help!
jduplessis294 7 months ago
Hey! Yes, so I'm wanting to be able to plug in a date, say 1 year, 1 month, and 1 day ago in one field, and then in the next field, today's date, and it count the number of years, months, and days for the last field(s); in this example the last field(s) would read 1 Years 1 Months 1 Days. I hope that makes more sense!
sharper 7 months ago
I've updated jduplessis294 jsfiddle to include different suffixes depending on the year(s), month(s) and day(s). https://jsfiddle.net/kostasx/csnk9pyj/ For example: May 3, 2018 May 3, 2017 yields -> 1 year 0 months 0 days May 4, 2018 May 3, 2017 -> 1 year 0 months 1 day June 3, 2018 May 3, 2017 -> 1 year 1 month 1 day July 5, 2018 May 3, 2017 -> 1 year 2 months 3 days July 5, 2019 May 3, 2017 -> 2 years 2 months 3 days
kostasx 7 months ago
Very nice. I like it!
sharper 7 months ago
awarded to jduplessis294

Crowdsource coding tasks.

2 Solutions


Here's something I've came up with moment.js to handle the dates.
https://jsfiddle.net/kostasx/bo3j3ga3/

You need to enter a valid date on both date fields and then once you've exit the fields the Years, Months and Days of the difference is updated in the fields below.
kostasx 7 months ago
Hey, this looks very close! I'm plugging in dates and the last field is updating, but I'm not sure I understand the math it's doing. For example, I plug in 2 dates and it shoots out some numbers but it doesn't seem to produce the total years, months, and days (or maybe it does and I'm plugging things in wrong). Is it possible to have it do this? Eg, if you typed in May 3, 2017 and May 3, 2018 it'd say 1 Years 0 Months 0 Days? It'll probably never actually read 0 days, but for example's sake. Thanks for digging into this. https://cl.ly/1W1i1j0h3u2w here's an image of what I mean
sharper 7 months ago
Updated the code. May 3, 2018 on field 1 and May 3, 2017 on field 2 yields: 1 0 0
kostasx 7 months ago
Updated the code. May 4, 2018 on field 1 and May 3, 2017 on field 2 yields: 1 0 1, and so on...
kostasx 7 months ago
Thanks. I didn't see your updated code, but I appreciate your help anyway. Cheers!
sharper 7 months ago
Winning solution

Is this what you are thinking?
https://jsfiddle.net/bo3j3ga3/21/

Yes. This looks right! :)
sharper 7 months ago
View Timeline