Date Mask question

Hi All,

I have a requirement for my date fields and don’t know how to get it working. Please help.

The client wants the date field to have a mask so they don’t have to type dashes/slashes/whatever delimiters between the date components.
Fine, I set the field format to “dd-MM-yyyy HH:mm|mask”.

But then the client wants to be able to type the date up to the hours component and have zeros for minutes automatically.
So, they want to type till their date looks like this ‘25-12-2014 09:mm’ and then stop/tab out/do something else, the minutes should magically turn into ‘00’.
Now, that’s the bit I can’t get my head around.

Things I’ve tried:

  1. dd-MM-yyyy HH:00|mask - If I set the mask to be zeros for minutes, the user is unable to type in those placeholders at all.
  2. dd-MM-yyyy HH:mm|0|mask - If I set the mask placeholder to be a zero, the user cannot distinguish between the day and month components of the field.
  3. I tried to use key listeners to intercept the user input while they are typing the date, but if I have a mask on, listeners don’t trigger until I entered the full mask - which the user doesn’t want to have to do.

I sort of ran out of options.
This is very important request as there is a lot of data entry and we need to speed it up as best we can.
Please suggest something.

Hi Maria,

just use onFocusGained/Lost events on your field.
at onFocusGained set:

elements.myDate.format = 'dd-MM-yyyy HH|mask'

and at onFocusLost revert it like this:

elements.myDate.format = 'dd-MM-yyyy HH:mm|mask'

to do this even smarter, create a top level scope method like this:

function maskDate(event) {
	var _sFormat = (event.getType() == 'focusGained') ? 'dd-MM-yyyy HH|mask' : 'dd-MM-yyyy HH:mm|mask';
	
	event.getSource().format = _sFormat;
}

Now attach this to both the onFocusGained and onFocusLost events of the field.

Hope this helps

mboegem:
Hi Maria,

just use onFocusGained/Lost events on your field.
at onFocusGained set:

elements.myDate.format = 'dd-MM-yyyy HH|mask'

and at onFocusLost revert it like this:

elements.myDate.format = 'dd-MM-yyyy HH:mm|mask'

to do this even smarter, create a top level scope method like this:

function maskDate(event) {
var _sFormat = (event.getType() == 'focusGained') ? 'dd-MM-yyyy HH|mask' : 'dd-MM-yyyy HH:mm|mask';

event.getSource().format = _sFormat;

}



Now attach this to both the onFocusGained and onFocusLost events of the field.

Hope this helps

Nice, Marc!
Sounds good, will try it, thanks.

Ok, I tried it but even though it sounded so sweet, it didn’t do what I wanted to.

Setting the mask to ‘dd/MM/yyyy HH|mask’ at onFocusGained doesn’t help at all because the user can’t enter the minutes - and sometimes they do want to do that.
So this approach will not work, unfortunately.

I need to both enable the user to enter the minutes AND not force them to enter the minutes (I’d enter the zeroes automatically if they leave the field).

Please help, the clients are used to this behaviour after using our FoxPro application for years and years.

Create a UI converter. Best option for granular control of user input.

Example you can go off of: https://www.servoyforge.net/projects/fractions/wiki

david:
Create a UI converter. Best option for granular control of user input.

Example you can go off of: https://www.servoyforge.net/projects/fractions/wiki

Hi, David,

thanks for your reply. I work with maria, and now I am trying to fix this issue.
i have tried your method, but it does not work properly in our situation.

first, after i set the uiconvertor, the date format mask will not work.
When using uiconvertor, the servoy doesn’t allow to put the date format placeholder and the mask function is disabled.

second, it is weird for the time that the uiconvertor method was triggered.
we use keylistener plugin to monitor the input of each field, and do some work on this.
The problem is if the field doesnt have keylistener, the conversion method would only be triggered when the field lost it focus.
after i add the keylistener, the conversion method would be triggered every time the keylistener was triggered, but not triggered after the field lost it focus anymore.

So could you please give us more detail advise for this problem?

Thank you very much.

Turn off the keylistener on this field and do everything in the converter. Logic, returned value, stored value, error checking. There is even placeholder and display format on the configuration pane:

[attachment=0]formatter.png[/attachment]