EasyUI Forum
July 14, 2024, 04:23:41 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Code to add key handler works in developer console, not when included in page  (Read 1760 times)
galcott
Newbie
*
Posts: 39


View Profile
« on: March 05, 2023, 05:33:26 PM »

I created this function to add a key handler to dateboxes that will increment /decrement the date when the up or down arrows are pressed. This code works when I enter it in the developer console after loading the page, but not when I include it in the page. I tried including it in the document.ready function and then placing it at the bottom of the page but it doesn't work either way - it does nothing. Where do I need to put this in order for it to work?

Also, when figuring out how to do this, I found that in this code, $(this) returns the textbox that EasyUI creates internally, not the actual datebox component, and therefore it's necessary to use val() rather than getText or setText. Is there a way to get the datebox component here? It's not really important but would make the code more understandable.

Code:
  $('.easyui-datebox').datebox({
    inputEvents:$.extend({},$.fn.datebox.defaults.inputEvents,{
      keyup:function(e){
        if ((e.which == 38) || (e.which==40)){
          var days=(e.which==38) ? 1 : -1;
          var d1 = moment($(this).val()).add(days, 'days');   // uses moment.js date library
          var d2 =d1.format('MM/DD/YYYY');
          $(this).val(d2);
        }
      }
    })
  })
Logged
jarry
Administrator
Hero Member
*****
Posts: 2269


View Profile Email
« Reply #1 on: March 05, 2023, 08:12:12 PM »

Please try to extend the 'keyHandler'.
Code:
<script>
$.extend($.fn.datebox.defaults, {
keyHandler: $.extend({}, $.fn.combo.defaults.keyHandler, {
up: function (e) {
var d = $(e.data.target);
var d1 = moment(d.datebox('getText')).add(-1, 'days');   // uses moment.js date library
var d2 = d1.format('MM/DD/YYYY');
d.datebox('setValue', d2);
},
down: function (e) {
var d = $(e.data.target);
var d1 = moment(d.datebox('getText')).add(1, 'days');   // uses moment.js date library
var d2 = d1.format('MM/DD/YYYY');
d.datebox('setValue', d2);
}
})
});
</script>
Logged
galcott
Newbie
*
Posts: 39


View Profile
« Reply #2 on: March 05, 2023, 10:34:20 PM »

Your code didn't work and I figured out that it wasn't correct. You have the "extend" twice, and substituted "combo" for "datebox". I changed it to the following and it did work.

Code:
    $.extend($.fn.datebox.defaults.keyHandler, {
      up: function (e) {
        var d = $(e.data.target);
        var d1 = moment(d.datebox('getText')).add(1, 'days');
        var d2 = d1.format('MM/DD/YYYY');
        d.datebox('setValue', d2);
      },
      down: function (e) {
        var d = $(e.data.target);
        var d1 = moment(d.datebox('getText')).add(-1, 'days');
        var d2 = d1.format('MM/DD/YYYY');
        d.datebox('setValue', d2);
      }
    })
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!