james young » javascript

Small JavaScript DateTimeTools object

James Young — Wed, 09 Sep 2009 23:58:03 +0000

So I got the project working on a tv schedule at work. As you can imagine there is work that needs to be done with dates and times when moving forward / back in the schedule. I found a few things out there that were full blown date/time js libraries, but they were a bit more than what I needed and didn’t do exactly what I needed. So I threw the following together. It does have specific stuff in it that is probably not portable to other projects, but here it is.

var dateTimeTools = (function ()
{
    var me = {};
 
    me.getMonthString = function (month)
    {
        var today = new Date();
        var montharray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        month = month || today.getMonth() + 1;
 
        return montharray[month - 1];
    };
 
    me.getWeekdayString = function (weekday)
    {
        var today = new Date();
        var dayarray = ['Sun.', 'Mon.', 'Tues.', 'Weds.', 'Thurs.', 'Fri.', 'Sat.'];
        weekday = weekday || today.getDay();
 
        return dayarray[weekday];
    };
 
 
    me.getDateString = function (theDate)
    {
        theDate = theDate || new Date();
        var year, month, date, weekday;
 
        // theDate can be either an instance of a Date object, or one of the custom date startDateTime objects used elsewhere
        if (theDate.hasOwnProperty('month'))
        {
            // dealing w/ a custom startDateTime object
            year = theDate.year;
            month = me.getMonthString(theDate.month);
            date = parseInt(theDate.date, 10);
            weekday = me.getWeekdayString(theDate.weekday);
        }
        else
        {
            // dealing w/ a JS Date object
            year = theDate.getFullYear();
            month = me.getMonthString(theDate.getMonth() + 1);
            date = theDate.getDate();
            weekday = me.getWeekdayString(theDate.getDay());
        }
 
        return weekday + ', ' + month + ' ' + date + ', ' + year;
    };
 
 
    me.getOffsetTime = function (startDateTime, offset)
    {
        offset = offset || 0;
 
        if (offset !== 0)
        {
            // this isn't going to be very portable, requires page.startDateTime object on page to work
            // returns a page.startDateTime object as well
            var datetime = new Date();
            datetime.setFullYear(
                    startDateTime.year,
                    parseInt(startDateTime.month, 10),
                    parseInt(startDateTime.date, 10)
            );
 
            datetime.setHours(
                    parseInt(startDateTime.hour, 10),
                    parseInt(startDateTime.minute, 10)
            );
 
            datetime.setHours(datetime.getHours() + offset);
 
            var month = datetime.getMonth();
            var date = datetime.getDate();
            var year = datetime.getFullYear();
            var hour = datetime.getHours();
            var minute = datetime.getMinutes();
 
            // pad everything w/ zeroes
            month = dateTimeTools.getPaddedMonth(month);
            date = dateTimeTools.getPaddedDate(date);
            hour = dateTimeTools.getPaddedHour(hour);
            minute = dateTimeTools.getPaddedMinute(minute);
            minute = minute < 30 ? '00' : '30';
 
            return {
                month : month,
                date : date,
                year : year,
                hour : hour,
                minute : minute,
                time : hour + ':' + minute + ':00'
            };
        }
 
        return startDateTime;
    };
 
 
    me.getPaddedDate = function (date)
    {
        var today = new Date();
        date = date.toString() || today.getDate();
 
        return date < 10 ? '0' + date : date;
    };
 
    me.getPaddedHour = function (hour)
    {
        var today = new Date();
        hour = hour.toString() || today.getHours();
 
        return hour < 10 ? '0' + hour : hour;
    };
 
    me.getPaddedMinute = function (minute)
    {
        var today = new Date();
        minute = minute.toString() || today.getMinutes();
 
        return minute < 10 ? '0' + minute : minute;
    };
 
    me.getPaddedMonth = function (month)
    {
        var today = new Date();
        month = month.toString() || today.getMonth() + 1;
 
        return month < 10 ? '0' + month : month;
    };
 
    me.getTwelveHourTime = function (hour, minute)
    {
        var today = new Date();
        hour = hour.toString() || today.getHours(); // using toString() since 0 will eval to false
        minute = minute.toString() || today.getMinutes();
 
        // manipulate the hour to account for midnight and noon
        var suffix = (hour >= 12 && hour < 24) ? 'PM' : 'AM';
        hour = hour >= 25 ? hour - 24 : hour;
        hour = hour === '0' ? 12 : hour;
 
        return hour > 12 ? (hour - 12) + ':' + minute + ' ' + suffix : hour + ':' + minute + ' ' + suffix;
    };
 
    return me;
}());

Ever need to iterate though all the members of an object (javascript)?

James Young — Wed, 09 Sep 2009 15:34:02 +0000

You know you have… if you are like me though, you can never remember the exact syntax. Here it is:

for (var name in object)
{
    if (object.hasOwnProperty(name))
    {
        alert(name + ': ' + object[name]);
    }
}

YUI Datatable – Custom Parser Example

James Young — Sun, 24 May 2009 01:40:03 +0000

For entry, with my validator, I am validating that no matter what a user types in for a height, I convert it to a float to store in the database (5.10). In retrospect, I should convert it to the inches value, but this example isn’t doing that.

For display, with my formatter, I am standardizing the format to display as a proper height (5′ 10″).

All that is left is to get the column sort to not think someone that is 22′ tall is shorter than someone that is 3′ tall. For numbers to sort numerically, the type must be a Number, not a String. This could be easily accomplished with YAHOO.widget.DataTable.formatNumber, but I was hoping to be able to fix my problem of 5.10 changing to 5.1 here. I was not able to do that, as you can see by the commented out line below, so I took care of it in the validator (kinda).

Due to the lack of me finding, quickly, an example of a custom parser, I am posting this anyway, even though it is not really needed.

The parser is an object property defined in the array of objects defining the fields for the datasources responseSchema (assuming JSON).

STWPT.parseHeight = function (oData)
{
    oData = parseFloat(oData);    // convert to number (float)
 
    // force decimal precision (5.1 > 5.10)
    // this converts it back to a string
    // oData = oData.toFixed(2);     
 
    return oData;
}

The following is a snippet out of a larger script that shows just the pieces that connect the datatable creation to the custom parser shown above.

var myDataSource = new YAHOO.util.DataSource('/path/to/datasource');
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.connMethodPost = true;
myDataSource.responseSchema = {
    resultsList: 'athletes',
    fields: [
        { key: 'first_name', parser: 'string' },
        { key: 'last_name', parser: 'string' },
        { key: 'height', parser: STWPT.parseHeight }
    ]
};
 
var myDataTable = new YAHOO.widget.DataTable('athletes-datatable', myColumnDefs, myDataSource);

YUI Datatable – Custom Validator Example

James Young — Sun, 24 May 2009 01:37:12 +0000

This is the validator I am using to insure that a height (or float) was entered (5’10″, 5′ 10″, 5.10 5 10), and that text (tall, short) was not entered and covert a valid non-float value entered (5’10″, 5′ 10″, 5 10) to a float (5.10), which is how I want to store the value in the database for this example.

Now that we have a custom validator created, it would be helpful to know where to call it from. A validator is an object parameter to the object that is sent to a textboxCellEditor.

The textboxCellEditor is an object parameter to the object that defines the column, in the array of objects that is sent to the datatable constructor.

STWPT.validateHeight = function (oData)
{
    var pattern; // regexp pattern holder
 
    // heightFormat is expected to be a decimal number for height
 
    // add a space if none was provided (5'10")
    // 5'10" -> 5' 10 - note the trailing non-digit characters are dropped
    pattern = /'(\d+)/g
    if (pattern.test(oData)) { oData = oData.replace(pattern, " $1"); }
 
    // turn a space into a decimal - 5 10, 5' 10" -> 5.10, 5' 10"
    pattern = / /g;
    if (pattern.test(oData)) { oData = oData.replace(pattern, '.'); }
 
    // remove all single and double quotes - 5' 10", 5'.10" -> 5.10
    pattern = /["']/g
    if (pattern.test(oData)) { oData = oData.replace(pattern, ''); }
 
    // enforce x.0x format - 5' 1" -> 5' 01" -> 5.01
    pattern = /\.([1-9])$/
    if (pattern.test(oData)) { oData = oData.replace(pattern, '.0$1')};
 
    // at this point we should have a float, which should eval > 0
 
    if (oData > 0) { return oData; }
 
    // validation only succeeds if a value is returned
}

The following is a snippet out of a larger script that shows just the pieces that connect the datatable creation to the custom validator shown above.

var heightEditor = new YAHOO.widget.TextboxCellEditor({
    disableBtns: false,
    asyncSubmitter: submitter,
    validator: STWPT.validateHeight
});
 
var myColumnDefs = [{
    key: 'height',
    label: 'Height',
    sortable: true,
    resizeable: true,
    editor: heightEditor,
    formatter: STWPT.formatHeight
}];
 
var myDataTable = new YAHOO.widget.DataTable('athletes-datatable', myColumnDefs, myDataSource);

YUI Datatable – Custom Formatter Example

James Young — Sun, 24 May 2009 01:29:35 +0000

I needed to create a custom formatter for a datatable that contained a cell for an individuals height. The height is stored in the database as a float. 5′ 10″ would be in the database as 5.10. In retrospect I should be storing the height as inches and converting it to feet as needed. We want to display 5′ 10″, this is where our custom formatter comes in.

The formatter is an object property to the column definition in the array of objects that is sent to the datable when it is created.

STWPT.formatHeight = function (elCell, oRecord, oColumn, oData)
{
    oData = oData.toString(); // oData must be a string
    var part = oData.split('.'); // splitting the float on the decimal
 
    // take care of undefined - set it to 0
    // if we have an int (like 5, not 5.1), part[1] is 'undefined'
    part[1] = part[1] ? part[1] : 0;
 
    // values like 5.10 are changed to 5.1
    // if textboxCellEditor is used, 5.1 will show as the value (not 5.10)
    if (part[1] == '1') { part[1] = '10'; }
 
    elCell.innerHTML = part[0] + '\' ' + part[1] + '"';
}

The following is a snippet out of a larger script that shows just the pieces that connect the datatable creation to the custom formatter shown above.

var myColumnDefs = [{
    key: 'height',
    label: 'Height',
    sortable: true,
    resizeable: true,
    editor: heightEditor,
    formatter: STWPT.formatHeight
}];
 
var myDataTable = new YAHOO.widget.DataTable('athletes-datatable', myColumnDefs, myDataSource);