Title: Month-Year Spinner
Post by: thecyberzone on April 10, 2015, 04:27:43 AM
Is there any way to make a custom Month-Year spinner ? I think this can be done using Date/Time spinner formating. Any help ?
Title: Re: Month-Year Spinner
Post by: stworthy on April 11, 2015, 06:51:08 AM
Please try this: $('#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'
})
Title: Re: Month-Year Spinner
Post by: thecyberzone on April 12, 2015, 10:34:51 PM
Thanks, It works !
Title: Re: Month-Year Spinner
Post by: thecyberzone on April 26, 2015, 08:28:27 PM
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: <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>
Title: Re: Month-Year Spinner
Post by: stworthy on April 27, 2015, 08:06:41 AM
You need to override the 'spin' function to define how the component increases/decreases the month names. (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'
})
})
Title: Re: Month-Year Spinner
Post by: thecyberzone on April 29, 2015, 02:05:20 AM
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.
Title: Re: Month-Year Spinner
Post by: stworthy on April 29, 2015, 06:28:38 PM
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.
Title: Re: Month-Year Spinner
Post by: thecyberzone on April 30, 2015, 03:48:28 AM
But how to set the initial value with current month-year instead of '03-2015' ?
Title: Re: Month-Year Spinner
Post by: vencelylalas on May 04, 2015, 06:43:56 PM
Is this real ?
Title: Re: Month-Year Spinner
Post by: thecyberzone on May 10, 2015, 11:03:29 PM
How to initialize this control with current date using javascript ?
Title: Re: Month-Year Spinner
Post by: stworthy on May 10, 2015, 11:46:38 PM
You can initialize the datetimespinner value as:
$('#dt').datetimespinner({
value: '3-2015'
});
or
$('#dt').datetimespinner({
value: 'Mar-2015'
});
|