Print Page - DateBox inputmask and validation

Title: DateBox inputmask and validation
Post by: MFS on March 29, 2018, 12:07:43 AM

Hello.
We use datebox and need inputmask on databox and validation when typing date.
In this picture in attachment we mark inpunt like we need it.
How to make this?
Provide to us some sample.

Title: Re: DateBox inputmask and validation
Post by: stworthy on March 29, 2018, 02:40:37 AM

You can call the extended method 'inputMask' to create a mask on the inputing box. The 'inputMask' method is defined in 'maskedbox' plugin that can be downloaded from https://www.jeasyui.com/easyui/plugins/jquery.maskedbox.js

Code:

$('#dt').datebox('inputMask', {
  mask: '99.99.9999'
});

Title: Re: DateBox inputmask and validation
Post by: MFS on July 25, 2019, 05:53:28 AM

Hi,

we tried to implement this feature and it works as expected allowing us to enter the date value without having to type the dots. But the problem we are facing now is that every input that has the mask on it does not accept anything from the number part of the keyboard only the top row numbers.

Is there a way to fix this issue and have it accept the input from the numeric keyboard?

Title: Re: DateBox inputmask and validation
Post by: stworthy on July 28, 2019, 06:30:47 PM

Please try to override the 'inputEvents' events.

Code:

(function($){
	var keydownEventHandler = $.fn.maskedbox.defaults.inputEvents.keydown;
	$.extend($.fn.maskedbox.defaults.inputEvents, {
		keydown: function(e){},
		keypress: function(e){
			var tmp = $('<span></span>');
			tmp.html(String.fromCharCode(e.which));
			var c = tmp.text();
			tmp.remove();
			if ('0123456789'.indexOf(c) >= 0){
				return true;
			}
			return keydownEventHandler(e)
		}
	})
})(jQuery);

Title: Re: DateBox inputmask and validation
Post by: MFS on July 29, 2019, 12:10:10 AM

Thank you for your replay.

After adding your code it actually removed the mask from the input and the numeric keyboard still didn't work.

After analyzing the code a bit, we found that the method String.fromCharCode() doesn't return the numbers from 0-9 but letters and a ` (back tick) symbol.

So we modified the code a bit and now everything is working for us.

The working code sample:

Code:

if($.fn.maskedbox){
    let keydownEventHandler = $.fn.maskedbox.defaults.inputEvents.keydown;
    $.extend($.fn.maskedbox.defaults.inputEvents, {
        keydown: function(e){},
	keypress: function(e){
	    if(e.which > 95 && e.which < 106){
		return  true;
            }
	    return keydownEventHandler(e)
	}
    });
}

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: MFS on March 29, 2018, 12:07:43 AM