Month-Year Spinner

[thecyberzone]

Is there any way to make a custom Month-Year spinner ? I think this can be done using Date/Time spinner formating. Any help ?

[stworthy]

Please try this:

Code:

$('#dt').datetimespinner({
	formatter:function(date){
		if (!date){return '';}
		var m = date.getMonth()+1;
		var y = date.getFullYear();
		return (m<10?'0'+m:m)+'-'+date.getFullYear();
	},
	parser:function(s){
		s = $.trim(s);
		if (!s){return null;}
		var dt = s.split('-');
		return new Date(dt[1],parseInt(dt[0])-1,1);
	},
	selections:[[0,2],[3,7]],
	value: '3-2015'
})

[thecyberzone]

Thanks, It works !

[thecyberzone]

If I want this spinner as Jan-2015, Feb-2015 like this, code can be changed as follows, but it is not working, changing displays the date as undefined.

Modified Code:

Code:

<script>
	$('#dt').datetimespinner({
	formatter:function(date){
		if (!date){return '';}
		var m = date.getMonth()+1;
		var y = date.getFullYear();
		var month = new Array();
		month[0] = "Jan";
		month[1] = "Feb";
		month[2] = "Mar";
		month[3] = "Apr";
		month[4] = "May";
		month[5] = "Jun";
		month[6] = "Jul";
		month[7] = "Aug";
		month[8] = "Sep";
		month[9] = "Oct";
		month[10] = "Nov";
		month[11] = "Dec";
		var n = month[date.getMonth()]; 
		return (n)+'-'+date.getFullYear();
	},
	parser:function(s){
		s = $.trim(s);
		if (!s){return null;}
		var dt = s.split('-');
		return new Date(dt[1],parseInt(dt[0])-1,1);
	},
	selections:[[0,3],[4,8]],
	value: '3-2015'
	});
</script>	

[stworthy]

You need to override the 'spin' function to define how the component increases/decreases the month names.

Code:

(function($){
	$.extend($.fn.timespinner.methods, {
		initValue: function(jq, value){
			return jq.each(function(){
				var opts = $(this).timespinner('options');
				var date = opts.parser.call(this, value);
				var s = opts.formatter.call(this, date);
				var v = s;
				if (opts.valueParser){
					v = opts.valueParser.call(this, s);
				}
				$(this).textbox('initValue', v).textbox('setText', s);
			})
		},
		setValue: function(jq, value){
			return jq.each(function(){
				var opts = $(this).timespinner('options');
				var date = opts.parser.call(this, value);
				var s = opts.formatter.call(this, date);
				var v = s;
				if (opts.valueParser){
					v = opts.valueParser.call(this, s);
				}
				$(this).textbox('setValue', v).textbox('setText', s);
			})
		}
	})

})(jQuery);

$(function(){
	$('#dt').datetimespinner({
		monthNames: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
		formatter:function(date){
			if (!date){return '';}
			var opts = $(this).datetimespinner('options');
			var m = date.getMonth();
			var y = date.getFullYear();
			var v = (m<9?'0'+(m+1):m+1) + '-' + y;
			var s = opts.monthNames[m] + '-' + y;
			return s;
		},
		parser:function(s){
			s = $.trim(s);
			if (!s){return null;}
			var opts = $(this).datetimespinner('options');
			var dt = s.split('-');
			var month = parseInt(dt[0]);
			if (isNaN(month)){
				month = $.inArray(dt[0], opts.monthNames)+1;
			}
			return new Date(dt[1],month-1,1);
		},
		valueParser:function(s){
			s = $.trim(s);
			if (!s){return '';}
			var opts = $(this).datetimespinner('options');
			var dt = s.split('-');
			var month = parseInt(dt[0]);
			if (isNaN(month)){
				month = $.inArray(dt[0], opts.monthNames)+1;
			}
			return (month<10?'0'+month:month) + '-' + dt[1];
		},
		spin: function(down){
			var opts = $.data(this, 'timespinner').options;
			var range = opts.selections[opts.highlight];
			var s = $(this).timespinner('getText');
			var month = $.inArray(s.substring(0, 3), opts.monthNames);
			var year = parseInt(s.substring(4,8));
			if (opts.highlight){
				year += opts.increment*(down?-1:1);
			} else {
				month += opts.increment*(down?-1:1);
			}
			var v = (month+1) + '-' + year;
			$(this).timespinner('setValue', v);
			highlight(this, opts.highlight);
			
			function highlight(target, index){
				var opts = $.data(target, 'timespinner').options;
				if (index != undefined){
					opts.highlight = index;
				}
				var range = opts.selections[opts.highlight];
				if (range){
					var tb = $(target).timespinner('textbox');
					setSelectionRange(tb[0], range[0], range[1]);
					tb.focus();
				}
			}
			function setSelectionRange(target, start, end){
				if (target.setSelectionRange){
					target.setSelectionRange(start, end);
				} else if (target.createTextRange){
					var range = target.createTextRange();
					range.collapse();
					range.moveEnd('character', end);
					range.moveStart('character', start);
					range.select();
				}
			}
		},
		selections:[[0,3],[4,8]],
		value: '3-2015'
	})
})

[thecyberzone]

Thanks stworthy, It is working superb, only one thing, if I want to set the default value of Month-Year spinner, how I set it with current Month-Year value ?

Also If I collect the value from Month-Year Spinner as follows :

var moncal = $('#dt').datetimespinner('getValue');
$.messager.alert("Error",moncal);

It returns Mar-2015, insted of 03-2015, but during setting the default value of it is given 03-2015. It creates a mismatch in further usage of return value. Please help.

[stworthy]

If you want to store the original value '03-2015'. You have to define the 'valueParser' function in the datetimespinner component. Please refer to the modified code in the previous post.

[thecyberzone]

But how to set the initial value with current month-year instead of '03-2015' ?

[vencelylalas]

Is this real ?

[thecyberzone]

How to initialize this control with current date using javascript ?

[stworthy]

You can initialize the datetimespinner value as:

$('#dt').datetimespinner({
  value: '3-2015'
});

or

$('#dt').datetimespinner({
  value: 'Mar-2015'
});