DateTimeSpinner input

[CLKG]

for ex.
mm/dd/yyyy hh:mm
when I type 06 at the mm pos, it won't change the focus to dd by itself, even after I type the seperator '/' manually

[stworthy]

You must bind some key events to achieve this functionality by yourself. Please refer to the code below:

Code:

$('#d1').datetimespinner({
	inputEvents:$.extend({},$.fn.datetimespinner.defaults.inputEvents,{
		keydown:function(e){
			if(e.keyCode == 13){
				var target = e.data.target;
				var opts = $(target).datetimespinner('options');
				var highlight = opts.highlight+1;
				var len = opts.showSeconds ? opts.selections.length : opts.selections.length-1;
				if (highlight >= len-1){
					highlight = len-1;
				}
				$(target).datetimespinner({
					value: $(target).datetimespinner('textbox').val(),
					highlight: highlight
				});
				opts.spin.call(target, true);
				opts.spin.call(target, false);
			}
		}
	})
})

[CLKG]

Thank you! I get some new problems with highlight, I got 0 or "_438 is undefined", while sometimes it works, amazing
here is my code

Code:

(function($) {
    $.fn.datetimespinner.defaults = $.extend({}, $.fn.datetimespinner.defaults, {
        formatter: function(date) {
            var opts = $(this).datetimespinner('options');
            var y = date.getFullYear();
            var mh = date.getMonth() + 1;
            var d = date.getDate();
            var h = date.getHours();
            var mt = date.getMinutes();
            var s = date.getSeconds();
            var ret = y + '-' + (mh < 10 ? ('0' + mh) : mh) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (h < 10 ? ('0' + h) : h) + ':' + (mt < 10 ? ('0' + mt) : mt);
            if (opts.showSeconds) {
                ret = ret + ':' + (s < 10 ? ('0' + s) : s);
            }
            return ret;
        },
        parser: function(s) {
            var date = new Date();
            if (!s) {
                return date;
            }
            var y = parseInt(s.substring(0, 4), 10) || date.getFullYear();
            var mh = parseInt(s.substring(5, 7), 10) || (date.getMonth() + 1);
            var d = parseInt(s.substring(8, 10), 10) || date.getDate();
            var h = parseInt(s.substring(11, 13), 10) || date.getHours();
            var mt = parseInt(s.substring(14, 16), 10) || date.getMinutes();
            var s = parseInt(s.substring(17, 19), 10) || date.getSeconds();
            return new Date(y, mh - 1, d, h, mt, s);
        },
        selections: [[0, 4], [5, 7], [8, 10], [11, 13], [14, 16], [17, 19]],
        inputEvents: $.extend({}, $.fn.datetimespinner.defaults.inputEvents, {
            keydown: function(e) {
                $('#info').val($(e.data.target).datetimespinner('options').highlight);//debug
                var opts = $(e.data.target).datetimespinner('options');
                var loc = opts.highlight;
                var ret = true;
                if (e.keyCode == 173 && !e.shiftKey) {
                    loc++;
                    if (loc > 2) {
                        loc = 0;
                    }
                    ret = false;
                }
                if (e.keyCode == 32 && !e.shiftKey) {
                    loc = 3;
                    ret = false;
                }
                if (e.keyCode == 59 && e.shiftKey) {
                    loc++;
                    if (loc < 3 || loc > 5) {
                        loc = 3;
                    }
                    if (opts.showSeconds && loc == 5){
                        loc = 4;
                    }
                    ret = false;
                }
                if (!ret) {
                    $(e.data.target).datetimespinner({
                        value: $(this).val(),
                        highlight: loc
                    });
                    opts.spin.call(e.data.target, true);
                    opts.spin.call(e.data.target, false);
                }
                return ret;
            }
        })
    });
})(jQuery);

I think the problem is: when clicking the input area randomly, the hightlight value has't been updated correctly