// a function to call when the user clicks a date so that the date is added to the right side of the screen function selectTheDate(argObj) { formattedDate = datePickerController.printFormattedDate(argObj.date, "d-sl-m-sl-Y", false); //grab the selected date from the datepicker var dateId, timeId, dateId = 'event-date-' + formattedDate.replace(/\//gi, '-'); // use the selected date to create a unique, valid id for the row we're going to add timeId = 'time-' + formattedDate.replace(/\//gi, '-'); freqId = 'freq-' + formattedDate.replace(/\//gi, '-'); // first, check if the date we're going to add has already been added... if ($('tr#' + dateId).length == 0) { // if it hasn't, write the following into the DOM $('#step2Error').html(''); $('#step2Error').removeClass('step2NoDateError'); $('.dates').append('

' + formattedDate + '

Delete'); // or tell the user it has already been added... } else { alert('This date has already been selected'); } }; // set up the datepicker function initCal() { var dayToday = (new Date()).format("yyyymmdd"); // grab today's date and format it using the dateformat function (date.format.js file) var opts = { formElements:{"dp-s1":"d-sl-m-sl-Y"}, // set the id of the element to attach the datepicker to, set the date format we're going to use staticPos:true, fillGrid:true, constrainSelection:false, rangeLow:dayToday, // set a minimum date of today (the date we grabbed earlier - is formatted yyyymmdd) finalOpacity:100, callbackFunctions:{"dateset":[selectTheDate]} // this callback uses the function we wrote above, adding the date to the right side of the screen }; datePickerController.createDatePicker(opts); // create the datepicker } // a sprinkling of jQuery to set up a click event listener on the delete buttons $('.remove-date').live('click', function(){ // when the button is clicked, var removeId = $(this).parent().parent().attr('id'); // find out which row it applies to... $('tr#' + removeId).remove(); // and remove it from the DOM return false; });