Javascript

11
Jan

Jquery-ui-timepicker-addon – extended altFormat

Posted by eugene as Javascript

In my projects I often use Jquery-ui-timepicker-addon. This is very handy plugin for time input. This plugin has the following settings: dateFormat, altFormat, altTimeFormat. The first parameter defines date format which the user will see and the rest parameters are the date format recorded in the hidden field, the text which is most often used for the record in database.

In most cases plugin works as it needs to work. But today I’ve coped with a little problem which took some effort for the resolution.

Due to the project requirements, the date which user sees should be in the format like: 22 May 2012 2:15 PM. This is not difficult to get it by installing the ampm plugin parameter into true. But here appears the problem that after installing the parameter time is recorded in the same way as with AM/PM which is not applicable for sending into DB. This part can be thrown away but the time will be still set from 0 till 12. That’s why in order to get the date in altField into the sql format it was needed to reset the formatting method in the plugin.

Here is the original method code:

$.datepicker.formatTime = function(format, time, options) {
	options = options || {};
	options = $.extend($.timepicker._defaults, options);
	time = $.extend({hour:0, minute:0, second:0, millisec:0, timezone:'+0000'}, time);
	var tmptime = format;
	var ampmName = options['amNames'][0];
 
	var hour = parseInt(time.hour, 10);
	if (options.ampm) {
		if (hour > 11){
			ampmName = options['pmNames'][0];
			if(hour > 12)
				hour = hour % 12;
		}
		if (hour === 0)
			hour = 12;
	}
	tmptime = tmptime.replace(/(?:hh?|mm?|ss?|[tT]{1,2}|[lz])/g, function(match) {
		switch (match.toLowerCase()) {
			case 'hh': return ('0' + hour).slice(-2);
			case 'h':  return hour;
			case 'mm': return ('0' + time.minute).slice(-2);
			case 'm':  return time.minute;
			case 'ss': return ('0' + time.second).slice(-2);
			case 's':  return time.second;
			case 'l':  return ('00' + time.millisec).slice(-3);
			case 'z':  return time.timezone;
			case 't': case 'tt':
				if (options.ampm) {
					if (match.length == 1)
						ampmName = ampmName.charAt(0);
					return match.charAt(0) == 'T' ? ampmName.toUpperCase() : ampmName.toLowerCase();
				}
				return '';
		}
	});
	tmptime = $.trim(tmptime);
	return tmptime;
}

As we can see on the line 10 if the ampm parameter is set in true, the time value is changed from 0 to 12. In order to exclude the problem I’ve decided to reset this method and enter new format parameter – rr, which will represent time from 0 to 24. Here is the script which I’ve got:

$(function (){
    if ($.datepicker)
    {
        $.datepicker.formatTime = function(format, time, options) {
            options = options || {};
            options = $.extend($.timepicker._defaults, options);
            time = $.extend({hour:0, minute:0, second:0, millisec:0, timezone:'+0000'}, time);
            var tmptime = format;
            var ampmName = options['amNames'][0];
 
            var hour = parseInt(time.hour, 10);
            var rr = hour;
            if (options.ampm) {
                if (hour > 11){
                    ampmName = options['pmNames'][0];
                    if(hour > 12)
                        hour = hour % 12;
                }
                if (hour === 0)
                    hour = 12;
            }
            tmptime = tmptime.replace(/(?:hh?|rr?|mm?|ss?|[tT]{1,2}|[lz])/g, function(match) {
                switch (match.toLowerCase()) {
                    case 'rr': return ('0' + rr).slice(-2);
                    case 'hh': return ('0' + hour).slice(-2);
                    case 'h':  return hour;
                    case 'mm': return ('0' + time.minute).slice(-2);
                    case 'm':  return time.minute;
                    case 'ss': return ('0' + time.second).slice(-2);
                    case 's':  return time.second;
                    case 'l':  return ('00' + time.millisec).slice(-3);
                    case 'z':  return time.timezone;
                    case 't': case 'tt':
                        if (options.ampm) {
                            if (match.length == 1)
                                ampmName = ampmName.charAt(0);
                            return match.charAt(0) == 'T' ? ampmName.toUpperCase() : ampmName.toLowerCase();
                        }
                        return '';
                }
            });
            tmptime = $.trim(tmptime);
            return tmptime;
        }
    }
});

I’m saving teh time value on the 12th line into the separate variable. On the 22nd line I’ve added rr? into the regular expression of format analysis. Here the number is barely recorded from the rr variable. And that’s all for it. The script can be brought to a separate file as I’ve done. The if ($.datepicker) line is added in order to prevent the error on the pages where the Jquery-ui-timepicker-addon.js script is not activated.

01
Oct

JQuery. Processing clicks in iPhone

Posted by eugene as Javascript

In sake of interest I’ve decided to check one of my Web projects and how it works on iPhone. There is much javascript in this project. I’ve observed the buttons on which the click event is assigned with the help of jQuery work very odd. With the first click the selection is carried out – css :hover runs, and the click itself works out only if to click the same button once again.

We’ve found out that Safari browser do not process the click event for some elements but it’s possible to assign the tap, touchstart event onto these elements. As a result, I decided to assign both events to the button, what has consequently resolved the issue:

$(‘#fn-cue’).bind(‘click touchstart’, router.actions.cue);