Title: Extending timespinner/datetimespinner not rendering spin buttons in v1.5.5
Post by: thecyberzone on December 03, 2018, 08:54:48 AM
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.
Title: Re: Extending timespinner/datetimespinner not rendering spin buttons in v1.5.5
Post by: jarry on December 03, 2018, 07:54:53 PM
Please add this code to fix this issue, or download the 'easyui.css' from https://www.jeasyui.com/easyui/themes/ui-cupertino/easyui.css <style type="text/css">
.spinner-button-updown {
opacity: 1.0;
}
.spinner-button-updown .spinner-button-top,
.spinner-button-updown .spinner-button-bottom {
position: relative;
display: block;
width: 100%;
height: 50%;
}
.spinner-button-updown .spinner-arrow-up,
.spinner-button-updown .spinner-arrow-down {
opacity: 1.0;
filter: alpha(opacity=100);
cursor: pointer;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -8px;
position: absolute;
}
</style>
Title: Re: Extending timespinner/datetimespinner not rendering spin buttons in v1.5.5
Post by: thecyberzone on December 04, 2018, 08:02:23 AM
Thanks for fixing the CSS to make the ui-cupertino theme compatible with jeasyui ver.1.5.5. Now my month-year spinner control can be rendered correctly.
I am also tendering another help from you. I have designed my project based on ver.1.5.3 and later on updated with ver.1.5.5. I have also tried the same with ver.1.6 but in this version font-size, line-height, grid-row-height etc. approx 20% larger than 1.5.3. Can you provide me a little bit CSS hack/correction to make ver.1.6 same font-size, line-height, grid-row-height as of ver.1.5.3.
Anyway thanks in advance.
Title: Re: Extending timespinner/datetimespinner not rendering spin buttons in v1.5.5
Post by: jarry on December 04, 2018, 07:05:13 PM
Please download the themes with smaller size from https://www.jeasyui.com/extension/themes_older.php
Title: Re: Extending timespinner/datetimespinner not rendering spin buttons in v1.5.5
Post by: thecyberzone on December 06, 2018, 12:38:51 AM
I am using this older themes but ver.1.5.5 does not contain checkbox or radio-button. Is there any way to include new checkbox or radio-button as found in ver.1.6?
Title: Re: Extending timespinner/datetimespinner not rendering spin buttons in v1.5.5
Post by: jarry on December 07, 2018, 02:16:34 AM
You can try to include the 'jquery.combobox.js' and 'jquery.radiobutton.js' files from the 'plugins' directory.
Title: Re: Extending timespinner/datetimespinner not rendering spin buttons in v1.5.5
Post by: thecyberzone on December 11, 2018, 09:17:53 AM
I have already tried both 'jquery.combobox.js' and 'jquery.radiobutton.js' files from the 'plugins' directory, but rendering is not done correctly, line height/font height/control height increases. Should required css correction just to match old cupertino theme.
Title: Re: Extending timespinner/datetimespinner not rendering spin buttons in v1.5.5
Post by: jarry on December 11, 2018, 11:38:34 PM
To use the narrow size in the newer theme, please include the 'jquery.easyui.theme.v1.js' file to the page. This file can be download from https://www.jeasyui.com/extension/themes_older.php
|