DateBox inputmask and validation

[MFS]

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.

[stworthy]

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'
});

[MFS]

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?

[stworthy]

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);

[MFS]

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)
	}
    });
}