2

I have a datebox on "zk" and i need to mask it in this way: dd/mm/yyyy

I've found some solution online but all based on textbox (and not datebox) like this: jQuery(compId).mask("dd/mm/yyyy");

i've tried using as compId my datebox but is not working...

could you please help me?

user1186213
  • 69
  • 8

1 Answers1

4

It's very easy for setting a format (I know it's no mask):

<datebox format="dd/mm/yyyy"/>

You can found it in the datebox documentation.

Other solution could be from this blog.

Edit :

I don't know why you need a mask. If you set the format to dd/mm/yyyy you can do this :

  • 12 loose focus => will be 12/current month selected in the calender/current year selected in calendar
  • 122 loose focus => will be 12/02/current year selected in calendar.
  • 0202 loose focus => will be 02/02/current year selected in calendar.
  • 12/02 loose focus => will be 12/02/current year selected in calendar.
  • 2/2 loose focus => will be 02/02/current year selected in calendar.
  • 12-02 loose focus => will be 12/02/current year selected in calendar.
  • 12--02/2012 loose focus => will be 12/02/2012.

You get the point?
ZK did implement a nice feature without most people know about it.
Like this you are also open to the clients habbits and you don't want to change it to much. (just day must be set first of course).

Try it out and give feedback if the mask is still needed when you know this.

Edit 2:

With a smart usage of the DOM structure of datebox I came up to the following :

jq("@datebox > input").mask("dd/mm/yyyy"); // all datebox get this mask

jq("$date > input").mask("dd/mm/yyyy"); // only datebox with that id get mask

This is tested on mine environment and it does work.

Edit 3:

Oke, mine enviremont was ZK 6.5.x.
Here is the fiddle where it does works :
http://zkfiddle.org/sample/4b9qh0/17-Datebox-MVVM-formatting
As you can see this works in ZK 6.5.x but not in ZK 7.0.x, So I'm still searching for that.
"span > input" works in ZK 7 but this is then for all the inputs who are in a span.

Last edit :

I've contacted ZK about this and there is a solution for ZK 7 :

jq('@datebox').find('input')

This also works for the ZK 6 so here is the updated fiddle.

And the issue is resolved in ZK 7.0.5

chillworld
  • 4,207
  • 3
  • 23
  • 50
  • the format is ok, but my problem is to show to the user how to add the date... so i need a mask but non using a textbox because also the calendar is needed. – user1186213 Feb 13 '15 at 09:53
  • so you still want a mask. I'll try it out, but no succes guarenteed – chillworld Feb 13 '15 at 12:41
  • yes, what did you write is perfect but my situation in a little bit different... it is importat to avoid users to add letters on datebox and let him to add only numbers. Having mask, the user see what i has to add and in this way the possibility to made mistake is lower... using only format, i need to check if the date is valid before to save data and my idea is to avoid this check if possible... – user1186213 Feb 13 '15 at 12:52
  • and working with constraint="no empty" when user loose the focus => he get warning with the format how he should enter it. (you can say also no future,...) – chillworld Feb 13 '15 at 14:03
  • This was my initial idea but also in this case, there is only a warning but the user can save without problem and i need to made check if the date is valid/correct anyway... having a mask if user doesn't add a number, the field is automatically filled... The main problem is that i've hundred of datebox and adding a check on error for each one is a problem... adding instead a mask on the component direct is much easier and quickly (not the best solution...) – user1186213 Feb 13 '15 at 14:08