Hello friends! I have extended datetimespinner class just to make a custom Mon-Year Spinner. Code is given below. If I use jeasyui ver. 1.5.4/1.5.3 along with Cupertino themes it is rending spinner buttons with absolutely no problem. But if use the latest ver. 1.5.5 along with old Cupertino themes it hides the spinner buttons from the control. I couldn't find the bug. Anybody please help me so that I can use it with ver. 1.5.5.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mon-Year</title>
<link rel="stylesheet" type="text/css" href="./easyui/themes/ui-cupertino/easyui.css">
<link rel="stylesheet" type="text/css" href="./easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="./easyui/demo/demo.css">
<script type="text/javascript" src="./easyui/jquery.min.js"></script>
<script type="text/javascript" src="./easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(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);
})
}
})
var di = new Date();
$('#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: (di.getMonth()+1)+'-'+di.getFullYear()
});
})
</script>
</head>
<body>
<label>Month :</label>
<input id="dt" name="dt" class="easyui-datetimespinner" style="width:100px;" data-options="" />
</body>
</html>
Thanks in advance.
