Print Page - Code to add key handler works in developer console, not when included in page

Title: Code to add key handler works in developer console, not when included in page
Post by: galcott 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);
        }
      }
    })
  })

Title: Re: Code to add key handler works in developer console, not when included in page
Post by: jarry 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>

Title: Re: Code to add key handler works in developer console, not when included in page
Post by: galcott 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);
      }
    })

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: galcott on March 05, 2023, 05:33:26 PM