2007-10-07

Javascript date spinner control to roll ISO 8601 dates in a text field using arrow keys

I have a couple web applications where the user enters or edits dates in the near future or near past in a text field using ISO 8601 format (yyyy-mm-dd). I wanted a javascript function which would allow the user to quickly modify the date by a few days without having to delete an old date and type in a new one, i.e. just hit one key to increment or decrement the date by one day. Since I couldn't find anything out there to do this I wrote my own. The main function here is roll_dates() which gets called by the onkeydown event of a text field on a HMTL form.

I am a self-taught coder, a beginner with javascript, and I haven't carefully tested this, so please only use this as an example to help give you ideas for your own coding (i.e. don't blindly block and copy this into your own code and then be surprised when it doesn't work right or breaks something).


function date_object_to_iso_date(date_var)
{// Converts a date object to an ISO date (YYYY-MM-DD)
// Add 1 to month value since Javascript numbers months as 0-11
var month_var = (date_var.getMonth()+1)+"-";
// Add a leading zero if its a one digit month
if (month_var.length==2)
{month_var="0"+month_var}
// Add a leading zero if its a one digit date
var day_of_month_var = (date_var.getDate())+"";
if (day_of_month_var.length==1)
{day_of_month_var="0"+day_of_month_var}
var iso_date_var=date_var.getFullYear()+"-"+month_var+day_of_month_var;
return iso_date_var;
} // close function

function increment_date(date_var, var_amount)
{//Takes a date object and adds one day
date_var.setDate(date_var.getDate()+var_amount);
return date_var;
} // close function

function iso_date_to_date_object(iso_date_var)
{ //Converts an ISO date (2007-10-01) into a date object
var array_temp=iso_date_var.split("-");
var date_var=new Date(array_temp[0],array_temp[1]-1,array_temp[2]);
return date_var;
} // close function

function roll_dates(event_var, id_var)
{// Increments or decrements an ISO date using up or down arrow
// Designed to be called by the onkeydown event of a textfield
// i.e. onkeydown="roll_dates(event,'fieldid')"
var keynum_var = event_var.which;
// Only do rest of function if user hit up or down arrow
if (keynum_var == 38 || keynum_var == 40)
{var textfield_var = document.getElementById(id_var);
var iso_date_var = textfield_var.value;
// Use regular expression to check if ISO date was entered,
// and if not use today's date
var iso_check_regex = /20[0-3][0-9]-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])/;
if (iso_check_regex(iso_date_var))
{var date_var = iso_date_to_date_object(iso_date_var);}
else
{var date_var = new Date()}
// Increment or decrement value based on whether user hit up or down arrow.
switch (keynum_var)
{case 38:
date_var = increment_date(date_var,1);
break;
case 40:
date_var = increment_date(date_var,-1);
break;
} // close switch
iso_date_var = date_object_to_iso_date(date_var);
textfield_var.value = iso_date_var;
} // close if
} // close function