Title: DateTimeSpinner input
Post by: CLKG on July 31, 2014, 06:02:05 PM
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
Title: Re: DateTimeSpinner input
Post by: stworthy on August 01, 2014, 08:49:02 AM
You must bind some key events to achieve this functionality by yourself. Please refer to the code below: $('#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); } } }) })
Title: Re: DateTimeSpinner input
Post by: CLKG on August 04, 2014, 12:17:24 AM
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 (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
|