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'
});