|
thecyberzone
|
 |
« on: December 19, 2018, 12:16:46 AM » |
|
I have made a custom monthyearspinner control by extending datetimespinner as follows: $(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()
});
})
Now I want onSpin or onChange event when the value of the control changes. just writing <input id="dt" name="dt" class="easyui-datetimespinner" style="width:98px; text-align: right" onChange="func1()" /> is not working. Should I have to extend the event, but how? |
|
|
|
|
Logged
|
|
|
|
|
thecyberzone
|
|
« Reply #1 on: December 19, 2018, 10:32:30 AM » |
|
Is there any way to define onChange event to this custom control?
|
|
|
|
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #2 on: December 19, 2018, 05:34:49 PM » |
|
The events should be defined in the 'data-options' attribute. <input id="dt" name="dt" class="easyui-datetimespinner" style="width:98px; text-align: right" data-options="onChange:func1" />
|
|
|
|
|
Logged
|
|
|
|
|
thecyberzone
|
|
« Reply #3 on: December 19, 2018, 10:48:46 PM » |
|
This thing I have tested, but failed to response in onChange event, even I have tries onSpinUp/onSpinDown event also. Both failed. Following code I have used to built custom yearmonth control based on datetimespinner. $(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()
});
})
And here it is used. <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NOMINATION</title>
<!-- <script type="text/javascript" src="../tapp/ui/themes/jquery.easyui.theme.v1.js"></script> -->
<link rel="stylesheet" type="text/css" href="../tapp/ui/themes/ui-cupertino/easyui.css">
<link rel="stylesheet" type="text/css" href="../tapp/ui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../tapp/ui/demo/demo.css">
<script type="text/javascript" src="../tapp/ui/jquery.min.js"></script>
<script type="text/javascript" src="../tapp/ui/jquery.easyui.min.js"></script>
</head>
<body>
<script type="text/javascript" src="cal.js"></script>
<input id="dt" name="dt" class="easyui-datetimespinner" style="width:100px;" onSpinUp="testme()" />
</body>
<script>
function testme() {
alert("dddd");
}
</script>
I could not find why it is not working. |
|
|
|
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #4 on: December 20, 2018, 12:15:43 AM » |
|
This code works fine in version 1.5.5. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DateTimeSpinner - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/ui-cupertino/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../themes/jquery.easyui.theme.v1.js"></script>
<style type="text/css">
.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>
<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()
});
})
function func1(value){
alert(value)
}
</script>
</head>
<body>
<label>Month :</label>
<input id="dt" name="dt" class="easyui-datetimespinner" data-options="onChange:func1" style="width:100px;" data-options="" />
</body>
</html>
|
|
|
|
|
Logged
|
|
|
|
|
thecyberzone
|
|
« Reply #5 on: December 20, 2018, 08:21:00 AM » |
|
I got it, calling of onChange event should be under data-options, I mis-placed it.
Thanks Jarry.
|
|
|
|
|
Logged
|
|
|
|
|
