I decided to take a break from my grid for a few days and familiarize myself with the Kendo UI Datepicker. I gave myself a project to calculate the number of unbirthdays someone has had. So many people tell their age in the number of birthdays. Well, wouldn’t it be crazy if we all spoke our age in terms of unbirthdays? (These all the thoughts one has when they write lots of javascript and suffer from a lack of sunlight.)

Plus, today is the 34th anniversary of my first unbirthday!

See the Unbirthday Calculator at the bottom of this blog post.

Quick Takeaways

Despite the absurdity of the purpose of this project, these are my takeaways from this exercise:

• Initialize a Kendo UI DatePicker
• Apply a validator to a form field
• A renewed, deepened understanding of the Date Object

The Code

Check out the code on Github.

Calculating Unbirthdays

To calculate unbirthdays, you first calculate the number of days in between today and your birth date, then subtract the number of birthdays. Here is what that looks like in javascript:

var calcUnBirthday = function(bday, today) {

	//get difference between two dates, in milliseconds
	var diff = today.getTime() - bday.getTime();

	//find age by converting difference into Date, then subtracting from 1970.
	//ref: http://stackoverflow.com/questions/4060004/calculate-age-in-javascript
	var diffDate = new Date(diff);
	var age = Math.abs(diffDate.getUTCFullYear() - 1970);
	
	//calculate days since birthdate by converting the difference into days.
	var daysSince = Math.ceil(diff / (1000 * 60 * 60 * 24));

	//calculate unbirthdays
	var unBirthdays = daysSince - age;

	return unBirthdays;
};

Working with the Kendo UI DatePicker

As with all the Kendo UI Widgets, there is ample examples and documentation provided by the Kendo UI Team.

One thing that stumped me is how to allow the user to type in a date, validate the input, then trigger the change event of the DatePicker. I was confused as to why I couldn’t trigger the change event of the DatePicker by typing in a value. This led me to implement a Validator, as well as a ‘keyup’ event handler for when the user presses ‘Enter’ and submits their input. By wrapping my DatePicker in a Validator, and adding a ‘keyup’ event handler, I am able to allow the user to type in a value if they choose to.

Take a look at all the code to see for yourself what I’m talking about!

The Result

Without further ado, here is the unbirthday calculator.

Special Thanks to…

@Event_Hoorizon for creating this simple codepen showing how to create confetti.