You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by raybristol <ra...@gmail.com> on 2007/10/18 15:18:32 UTC
how to change format in DateTimeField?
there is a good example about use DateTextfield in :
http://www.wicketstuff.org/wicket13/dates/?wicket:bookmarkablePage=sources%3Aorg.apache.wicket.examples.dates.DatesPage
however, I want to add the time field as well, so I found DateTimeField
which is working, however i don't know how to change the format of the date
it displayed, in DateTextfield I believe I can do that with using its
constructor: new DateTextField("dateTextField", new
PropertyModel(this,"date"), new StyleDateConverter("S-", true)), but
DateTimeField only has a constructor: new
DateTimeField("dateTimeFromTextField", new PropertyModel(this, "date")) so I
don't know how to change its format, also I want to prevent user to type in
invalid date in the text field as well, becuase if user type some letters in
the textfield next to the date picker then the date picker won't start
properly as well.
I might asking dump question becuase I am too new to wicket (I use asp.net
before).
Many thanks!
--
View this message in context: http://www.nabble.com/how-to-change-format-in-DateTimeField--tf4646276.html#a13272285
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Input Text Mask?
Posted by Eelco Hillenius <ee...@gmail.com>.
On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> Okay, sounds good... I assume I will be notified on which approach that will be decided by the committers at some point in the process?
Of course. We'll discuss in public anyway.
Eelco
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: Input Text Mask?
Posted by William Hoover <wh...@nemours.org>.
Okay, sounds good... I assume I will be notified on which approach that will be decided by the committers at some point in the process?
-----Original Message-----
From: Eelco Hillenius [mailto:eelco.hillenius@gmail.com]
Sent: Thursday, October 18, 2007 5:08 PM
To: users@wicket.apache.org
Subject: Re: Input Text Mask?
On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> I created a Jira Issue (https://issues.apache.org/jira/browse/WICKET-1085) with attached source. I placed the issue under extensions as others suggested.
Thanks.
> Would I still have to go through sf.net?
It would either be put in wicket-stuff minis - in which case you can
maintain it directly yourself after you get access to the wicket-stuff
project - or if we want to use it for the date field components, and
all comitters agree, we can put it in extensions.
Eelco
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Input Text Mask?
Posted by Eelco Hillenius <ee...@gmail.com>.
On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> I created a Jira Issue (https://issues.apache.org/jira/browse/WICKET-1085) with attached source. I placed the issue under extensions as others suggested.
Thanks.
> Would I still have to go through sf.net?
It would either be put in wicket-stuff minis - in which case you can
maintain it directly yourself after you get access to the wicket-stuff
project - or if we want to use it for the date field components, and
all comitters agree, we can put it in extensions.
Eelco
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: Input Text Mask?
Posted by William Hoover <wh...@nemours.org>.
I created a Jira Issue (https://issues.apache.org/jira/browse/WICKET-1085) with attached source. I placed the issue under extensions as others suggested. Would I still have to go through sf.net?
-----Original Message-----
From: Igor Vaynberg [mailto:igor.vaynberg@gmail.com]
Sent: Thursday, October 18, 2007 3:57 PM
To: users@wicket.apache.org
Subject: Re: Input Text Mask?
create a sf.net account and i will give you commit access to wicketstuff repo.
-igor
On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> Sure. How would I go about doing so?
>
> -----Original Message-----
> From: Igor Vaynberg [mailto:igor.vaynberg@gmail.com]
> Sent: Thursday, October 18, 2007 1:11 PM
> To: users@wicket.apache.org
> Subject: Re: Input Text Mask?
>
>
> would you be interested in making this a subclass of textfield and
> throwing it into wicketstuff-minis project which is in wicket-stuff?
>
> -igor
>
>
> On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> > Is anyone interested in using the mask script (below) to a component in a Wicket extension? The script prevents invalid input in a text field as the user types (similar to the Atlas version: http://www.fci.com.br/maskedit/MaskEdit/MaskEdit.aspx). I didn't see a component in Wicket that would accomplish this out-of-the-box and thought it would be a cool addition to Wicket.
> >
> > For example to force the input to mask a phone number:
> > <input type="text" onfocus="InputTextMask.processMaskFocus(this, "(999)999-9999", true);" />
> >
> > /**
> > * InputTextMask script used for mask/regexp operations.
> > * Mask Individual Character Usage:
> > * 9 - designates only numeric values
> > * L - designates only uppercase letter values
> > * l - designates only lowercase letter values
> > * A - designates only alphanumeric values
> > * X - denotes that a custom client script regular expression is specified</li>
> > * All other characters are assumed to be "special" characters used to mask
> > * the input component
> > * Example 1:
> > * (999)999-9999 only numeric values can be entered where the the character
> > * position value is 9. Parenthesis and dash are non-editable/mask characters.
> > * Example 2:
> > * 99L-ll-X[^A-C]X only numeric values for the first two characters,
> > * uppercase values for the third character, lowercase letters for the
> > * fifth/sixth characters, and the last character X[^A-C]X together counts
> > * as the eighth character regular expression that would allow all characters
> > * but "A", "B", and "C". Dashes outside the regular expression are
> > * non-editable/mask characters.
> > */
> > var InputTextMask = {
> > processMaskFocus: function(input, mask, clearWhenInvalid){
> > // create an input mask and register it on the specified input (if it hasnt already been added by a previous call
> > InputTextMask.createInputMask(input, mask, clearWhenInvalid);
> > if(input.value.length == 0){
> > // when the input value is empty populate it with the viewing mask and move the cursor to the
> > // beginning of the input field
> > var cursorPos = InputTextMask.getCursorPosition(input, input.value);
> > input.value = input.mask.viewMask;
> > InputTextMask.moveCursorToPosition(input, null, cursorPos);
> > }
> > },
> > getEvent: function(e) {
> > // get the event either from the window or from the passed event
> > return (typeof event != 'undefined')? event: e;
> > },
> > handleEventBubble: function(keyEvent, keyCode){
> > // this method ensures that the key enterned by the user is not propagated unless it is a tab or arrow key
> > try {
> > if(keyCode && (keyCode.isTab || keyCode.isLeftOrRightArrow)){
> > // allow all tab/arrow keys by returning true- no further action required
> > return true;
> > }
> > keyEvent.cancelBubble = true;
> > if(keyEvent.stopPropagation){
> > // prevent other event triggers
> > keyEvent.stopPropagation();
> > }
> > if(keyEvent.preventDefault){
> > // prevent the default event from firing. in this case it is propagation of the keyed input
> > keyEvent.preventDefault();
> > }
> > return false;
> > } catch(e) {
> > alert(e.message);
> > }
> > },
> > createInputMask: function(input, mask, clearWhenInvalid) {
> > // if this input hasnt already registered its mask go ahead and do so now. This only needs to be performed the
> > // first time the input is encountered when it gains focus. It will attach the MaskType object to the input object
> > // add add all of the appropriate event listeners to ensure that the mask is applied
> > if(!input.mask || input.mask.rawMask != mask){
> > input.mask = new InputTextMask.MaskType(input, mask, clearWhenInvalid);
> > // add the event listeners that will ensure that when the input contains an incomplete mask it will be remove.
> > // Also, make sure that the keydown event is fired from this point forward thus invoking the mask format.
> > if(input.addEventListener){
> > // most doms
> > input.addEventListener('blur', function(){input.mask.removeValueWhenInvalid();}, false);
> > input.addEventListener('keydown', function(e){return input.mask.processMaskFormatting(e);}, false);
> > if(window.opera){
> > // in opera- need to ensure that the keypress event isnt interfering with this input mask
> > input.addEventListener('keypress', function(e){return InputTextMask.handleEventBubble(InputTextMask.getEvent(e), null);}, false);
> > }
> > } else if(input.attachEvent) {
> > // ie
> > input.attachEvent('onblur', function(){input.mask.removeValueWhenInvalid();});
> > input.attachEvent('onkeydown', function(e){return input.mask.processMaskFormatting(e);});
> > } else {
> > // other browsers that do not support dynamic event propagations
> > input.onBlur = function(){input.mask.removeValueWhenInvalid();};
> > input.onKeyDown = function(e){input.mask.processMaskFormatting(e)};
> > }
> > }
> > },
> > getCursorPosition: function(input, previousValue) {
> > // gets the current cursor position (s=start, e=end) and creates/returns a new CursorPosition instance
> > var s, e, r;
> > if(input.createTextRange){
> > // ie- need to capture the start/end cursor positions
> > r = document.selection.createRange().duplicate();
> > r.moveEnd('character', previousValue.length);
> > if(r.text === ''){
> > s = previousValue.length;
> > } else {
> > s = previousValue.lastIndexOf(r.text);
> > }
> > r = document.selection.createRange().duplicate();
> > r.moveStart('character', -previousValue.length);
> > e = r.text.length;
> > } else {
> > // other browsers
> > s = input.selectionStart;
> > e = input.selectionEnd;
> > }
> > return new InputTextMask.CursorPosition(s, e, r, previousValue);
> > },
> > moveCursorToPosition: function(input, keyCode, cursorPosition) {
> > // moves a cursor position for the passed input element to the specified cursor position- because the
> > // range cursor position is 1 indexed we add an additional space (unless the pressed key is a backspace)
> > var p = (!keyCode || (keyCode && keyCode.isBackspace))? cursorPosition.start: cursorPosition.start + 1;
> > if(input.createTextRange){
> > // ie move- cursor to the index p
> > cursorPosition.range.move('character', p);
> > cursorPosition.range.select();
> > } else {
> > // other browser- move cursor to the index p
> > input.selectionStart = p;
> > input.selectionEnd = p;
> > }
> > },
> > injectValue: function(input, keyCode, cursorPosition) {
> > // inject the validated key into the input mask at the specified cursor position and return true on success
> > var key = (keyCode.isBackspace)? '_': input.mask.getValidatedKey(keyCode, cursorPosition);
> > if(key){
> > input.value = cursorPosition.previousValue.substring(0, cursorPosition.start) + key + cursorPosition.previousValue.substring(cursorPosition.start + 1, cursorPosition.previousValue.length);
> > return true;
> > }
> > // invalid key
> > return false;
> > },
> > MaskType: function(inputTextElement, mask, clearWhenInvalid) {
> > // this object instance is holds relative mask properties for a specified input element
> > this.inputTextElement = inputTextElement;
> > // designates whether or not the input value is cleared when its mask is incomplete and a blur event is triggered
> > this.clearWhenInvalid = clearWhenInvalid;
> > // holds the last validated key code
> > this.lastValidatedKeyCode = null;
> > // the mask value used to validate/mask valid input
> > this.rawMask = mask;
> > // the mask displayed in the input
> > this.viewMask = '';
> > // the string array of all the raw mask values (some indexes contain more than one char so we need to track this)
> > this.maskArray = new Array();
> > var mai = 0;
> > var regexp = '';
> > // cycle through the raw mask and perform view mask conversions
> > for(var i=0; i<mask.length; i++){
> > if(regexp){
> > if(regexp == 'X'){
> > // end of current regexp slot
> > regexp = '';
> > }
> > if(mask.charAt(i) == 'X'){
> > // current mask array index contains the complete regexp so we need to store it in the array
> > this.maskArray[mai] = regexp;
> > mai++;
> > regexp = null;
> > } else {
> > // still in the middle of the regexp keep adding the current character to the regexp
> > regexp += mask.charAt(i);
> > }
> > } else if(mask.charAt(i) == 'X'){
> > // current slot is a regexp
> > regexp += 'X';
> > this.viewMask += '_';
> > } else if(mask.charAt(i) == '9' || mask.charAt(i) == 'L' || mask.charAt(i) == 'l' || mask.charAt(i) == 'A') {
> > // the current mask character is one of the predefined/reserved characters
> > this.viewMask += '_';
> > this.maskArray[mai] = mask.charAt(i);
> > mai++;
> > } else {
> > // just a regular char
> > this.viewMask += mask.charAt(i);
> > this.maskArray[mai] = mask.charAt(i);
> > mai++;
> > }
> > }
> > // the predefined/reserved characters need to be replaced with the viewing mask char that desigantes an editable value (underscore)
> > this.specialChars = this.viewMask.replace(/(L|l|9|A|_|X)/g,'');
> > this.getValidatedKey = function(keyCode, cursorPosition) {
> > // validates if the passed key code is valid for the specified cursor position and returns the value if it is. otherwise, return false
> > var maskKey = this.maskArray[cursorPosition.start];
> > if(maskKey == '9'){
> > // only allow numbers at the specified slot
> > return keyCode.pressedKey.match(/[0-9]/);
> > } else if(maskKey == 'L'){
> > // only allow uppercase letters at specified slot (convert if necessary)
> > return (keyCode.pressedKey.match(/[A-Za-z]/))? keyCode.pressedKey.toUpperCase(): null;
> > } else if(maskKey == 'l'){
> > // only allow lowercase letters at specified slot (convert if necessary)
> > return (keyCode.pressedKey.match(/[A-Za-z]/))? keyCode.pressedKey.toLowerCase(): null;
> > } else {
> > if(maskKey == 'A'){
> > // only allow alpha-numeric values at the specified slot
> > return keyCode.pressedKey.match(/[A-Za-z0-9]/);
> > } else {
> > // only allow values that are verified by the specified regexp at the specified slot
> > return (this.maskArray[cursorPosition.start].length > 1)? keyCode.pressedKey.match(new RegExp(maskKey)): null;
> > }
> > }
> > };
> > this.removeValueWhenInvalid = function(){
> > // removes value from the input element when the mask is incomplete
> > if(this.inputTextElement.value.indexOf('_') > -1){
> > this.inputTextElement.value = '';
> > }
> > };
> > this.processMaskFormatting = function(e) {
> > // capture event (should be the keydown event)
> > var onKeyDownEvent = InputTextMask.getEvent(e);
> > // create the key code from the event.
> > var keyCode = new InputTextMask.KeyCode(onKeyDownEvent);
> > if(InputTextMask.handleEventBubble(onKeyDownEvent, keyCode)){
> > // the pressed key is allowed to propagate- no mask injection required
> > return true;
> > }
> > var v = this.inputTextElement.value;
> > if(v.length === 0){
> > // when the input value is empty populate it with the viewing mask
> > this.inputTextElement.value = this.viewMask;
> > }
> > var cursorPos = InputTextMask.getCursorPosition(this.inputTextElement, v);
> > if(cursorPos.end == cursorPos.previousValue.length && !keyCode.isBackspace){
> > // input cursor position is at the end of the mask- do not allow any more characters to be keyed
> > return false;
> > }
> > // move the cursor position to the next slot that does not contain a mask character
> > while(this.inputTextElement.mask.specialChars.match(RegExp.escape(cursorPos.previousValue.charAt(((keyCode.isBackspace)? cursorPos.start-1: cursorPos.start))))){
> > if(keyCode.isBackspace) {
> > // backspace needs to move the cursor backwards
> > cursorPos.decStart();
> > } else {
> > // still moving cursor one space to the right
> > cursorPos.incStart();
> > }
> > if(cursorPos.start >= cursorPos.previousValue.length || cursorPos.start < 0){
> > // end of the mask- no more keys should be keyed
> > return false;
> > }
> > }
> > if(keyCode.isBackspace){
> > // need to go back one space to the left
> > cursorPos.decStart();
> > }
> > // inject the key that was pressed into the input value mask
> > if(InputTextMask.injectValue(this.inputTextElement, keyCode, cursorPos)){
> > // when the injection is sucessful move the cursor to the next slot to the right of the injected key
> > InputTextMask.moveCursorToPosition(this.inputTextElement, keyCode, cursorPos);
> > }
> > // because the pressed key is being injected we always need to return false to prevent duplicate
> > // key injection
> > return false;
> > };
> > },
> > KeyCode: function(onKeyDownEvent) {
> > this.onKeyDownEvent = onKeyDownEvent;
> > // get the unicode value from the key event
> > this.unicode = onKeyDownEvent.which? onKeyDownEvent.which: (onKeyDownEvent.keyCode? onKeyDownEvent.keyCode: (onKeyDownEvent.charCode? onKeyDownEvent.charCode: 0));
> > this.isShiftPressed = onKeyDownEvent.shiftKey == false || onKeyDownEvent.shiftKey == true? onKeyDownEvent.shiftKey: (onKeyDownEvent.modifiers && (onKeyDownEvent.modifiers & 4)); //bitWise AND
> > // TODO : need to get cap lock capture for onkeydown event
> > //this.isCapLock = ((!this.isShiftPressed && this.unicode >= 65 && this.unicode <= 90) || (this.unicode >= 97 && this.unicode <= 122 && this.isShiftPressed));
> > if(this.unicode >= 96 && this.unicode <= 105) {
> > this.unicode -= 48; // handle number keypad
> > }
> > if(this.unicode >= 65 && this.unicode <= 90 && !this.isShiftPressed){
> > this.unicode += 32; // handle uppercase
> > }
> > this.isTab = (this.unicode == 9)? true: false;
> > this.isBackspace = (this.unicode == 8)? true: false;
> > this.isLeftOrRightArrow = (this.unicode == 37 || this.unicode == 39)? true: false;
> > // capture the actual key for the passed key code
> > this.pressedKey = String.fromCharCode(this.unicode);
> > },
> > CursorPosition: function(start, end, range, previousValue) {
> > // holds the cursor position values
> > this.start = isNaN(start)? 0: start;
> > this.end = isNaN(end)? 0: end;
> > this.range = range;
> > this.previousValue = previousValue;
> > this.incStart = function(){
> > this.start++;
> > };
> > this.decStart = function(){
> > this.start--;
> > };
> > }
> > };
> > // Add escape prototype feature to RegExp object
> > // text.replace(/[.*+?^${}()|[\]\/\\]/g, '\\$0');
> > // text.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, '\\$1');
> > if(!RegExp.escape) {
> > RegExp.escape = function(text){
> > var sp;
> > if(!arguments.callee.sRE){
> > sp=['/','.','*','+','?','|','(',')','[',']','{','}','\\'];
> > arguments.callee.sRE = new RegExp('(\\' + sp.join('|\\') + ')','g');
> > }
> > return text.replace(arguments.callee.sRE, '\\$1');
> > };
> > }
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Input Text Mask?
Posted by Igor Vaynberg <ig...@gmail.com>.
create a sf.net account and i will give you commit access to wicketstuff repo.
-igor
On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> Sure. How would I go about doing so?
>
> -----Original Message-----
> From: Igor Vaynberg [mailto:igor.vaynberg@gmail.com]
> Sent: Thursday, October 18, 2007 1:11 PM
> To: users@wicket.apache.org
> Subject: Re: Input Text Mask?
>
>
> would you be interested in making this a subclass of textfield and
> throwing it into wicketstuff-minis project which is in wicket-stuff?
>
> -igor
>
>
> On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> > Is anyone interested in using the mask script (below) to a component in a Wicket extension? The script prevents invalid input in a text field as the user types (similar to the Atlas version: http://www.fci.com.br/maskedit/MaskEdit/MaskEdit.aspx). I didn't see a component in Wicket that would accomplish this out-of-the-box and thought it would be a cool addition to Wicket.
> >
> > For example to force the input to mask a phone number:
> > <input type="text" onfocus="InputTextMask.processMaskFocus(this, "(999)999-9999", true);" />
> >
> > /**
> > * InputTextMask script used for mask/regexp operations.
> > * Mask Individual Character Usage:
> > * 9 - designates only numeric values
> > * L - designates only uppercase letter values
> > * l - designates only lowercase letter values
> > * A - designates only alphanumeric values
> > * X - denotes that a custom client script regular expression is specified</li>
> > * All other characters are assumed to be "special" characters used to mask
> > * the input component
> > * Example 1:
> > * (999)999-9999 only numeric values can be entered where the the character
> > * position value is 9. Parenthesis and dash are non-editable/mask characters.
> > * Example 2:
> > * 99L-ll-X[^A-C]X only numeric values for the first two characters,
> > * uppercase values for the third character, lowercase letters for the
> > * fifth/sixth characters, and the last character X[^A-C]X together counts
> > * as the eighth character regular expression that would allow all characters
> > * but "A", "B", and "C". Dashes outside the regular expression are
> > * non-editable/mask characters.
> > */
> > var InputTextMask = {
> > processMaskFocus: function(input, mask, clearWhenInvalid){
> > // create an input mask and register it on the specified input (if it hasnt already been added by a previous call
> > InputTextMask.createInputMask(input, mask, clearWhenInvalid);
> > if(input.value.length == 0){
> > // when the input value is empty populate it with the viewing mask and move the cursor to the
> > // beginning of the input field
> > var cursorPos = InputTextMask.getCursorPosition(input, input.value);
> > input.value = input.mask.viewMask;
> > InputTextMask.moveCursorToPosition(input, null, cursorPos);
> > }
> > },
> > getEvent: function(e) {
> > // get the event either from the window or from the passed event
> > return (typeof event != 'undefined')? event: e;
> > },
> > handleEventBubble: function(keyEvent, keyCode){
> > // this method ensures that the key enterned by the user is not propagated unless it is a tab or arrow key
> > try {
> > if(keyCode && (keyCode.isTab || keyCode.isLeftOrRightArrow)){
> > // allow all tab/arrow keys by returning true- no further action required
> > return true;
> > }
> > keyEvent.cancelBubble = true;
> > if(keyEvent.stopPropagation){
> > // prevent other event triggers
> > keyEvent.stopPropagation();
> > }
> > if(keyEvent.preventDefault){
> > // prevent the default event from firing. in this case it is propagation of the keyed input
> > keyEvent.preventDefault();
> > }
> > return false;
> > } catch(e) {
> > alert(e.message);
> > }
> > },
> > createInputMask: function(input, mask, clearWhenInvalid) {
> > // if this input hasnt already registered its mask go ahead and do so now. This only needs to be performed the
> > // first time the input is encountered when it gains focus. It will attach the MaskType object to the input object
> > // add add all of the appropriate event listeners to ensure that the mask is applied
> > if(!input.mask || input.mask.rawMask != mask){
> > input.mask = new InputTextMask.MaskType(input, mask, clearWhenInvalid);
> > // add the event listeners that will ensure that when the input contains an incomplete mask it will be remove.
> > // Also, make sure that the keydown event is fired from this point forward thus invoking the mask format.
> > if(input.addEventListener){
> > // most doms
> > input.addEventListener('blur', function(){input.mask.removeValueWhenInvalid();}, false);
> > input.addEventListener('keydown', function(e){return input.mask.processMaskFormatting(e);}, false);
> > if(window.opera){
> > // in opera- need to ensure that the keypress event isnt interfering with this input mask
> > input.addEventListener('keypress', function(e){return InputTextMask.handleEventBubble(InputTextMask.getEvent(e), null);}, false);
> > }
> > } else if(input.attachEvent) {
> > // ie
> > input.attachEvent('onblur', function(){input.mask.removeValueWhenInvalid();});
> > input.attachEvent('onkeydown', function(e){return input.mask.processMaskFormatting(e);});
> > } else {
> > // other browsers that do not support dynamic event propagations
> > input.onBlur = function(){input.mask.removeValueWhenInvalid();};
> > input.onKeyDown = function(e){input.mask.processMaskFormatting(e)};
> > }
> > }
> > },
> > getCursorPosition: function(input, previousValue) {
> > // gets the current cursor position (s=start, e=end) and creates/returns a new CursorPosition instance
> > var s, e, r;
> > if(input.createTextRange){
> > // ie- need to capture the start/end cursor positions
> > r = document.selection.createRange().duplicate();
> > r.moveEnd('character', previousValue.length);
> > if(r.text === ''){
> > s = previousValue.length;
> > } else {
> > s = previousValue.lastIndexOf(r.text);
> > }
> > r = document.selection.createRange().duplicate();
> > r.moveStart('character', -previousValue.length);
> > e = r.text.length;
> > } else {
> > // other browsers
> > s = input.selectionStart;
> > e = input.selectionEnd;
> > }
> > return new InputTextMask.CursorPosition(s, e, r, previousValue);
> > },
> > moveCursorToPosition: function(input, keyCode, cursorPosition) {
> > // moves a cursor position for the passed input element to the specified cursor position- because the
> > // range cursor position is 1 indexed we add an additional space (unless the pressed key is a backspace)
> > var p = (!keyCode || (keyCode && keyCode.isBackspace))? cursorPosition.start: cursorPosition.start + 1;
> > if(input.createTextRange){
> > // ie move- cursor to the index p
> > cursorPosition.range.move('character', p);
> > cursorPosition.range.select();
> > } else {
> > // other browser- move cursor to the index p
> > input.selectionStart = p;
> > input.selectionEnd = p;
> > }
> > },
> > injectValue: function(input, keyCode, cursorPosition) {
> > // inject the validated key into the input mask at the specified cursor position and return true on success
> > var key = (keyCode.isBackspace)? '_': input.mask.getValidatedKey(keyCode, cursorPosition);
> > if(key){
> > input.value = cursorPosition.previousValue.substring(0, cursorPosition.start) + key + cursorPosition.previousValue.substring(cursorPosition.start + 1, cursorPosition.previousValue.length);
> > return true;
> > }
> > // invalid key
> > return false;
> > },
> > MaskType: function(inputTextElement, mask, clearWhenInvalid) {
> > // this object instance is holds relative mask properties for a specified input element
> > this.inputTextElement = inputTextElement;
> > // designates whether or not the input value is cleared when its mask is incomplete and a blur event is triggered
> > this.clearWhenInvalid = clearWhenInvalid;
> > // holds the last validated key code
> > this.lastValidatedKeyCode = null;
> > // the mask value used to validate/mask valid input
> > this.rawMask = mask;
> > // the mask displayed in the input
> > this.viewMask = '';
> > // the string array of all the raw mask values (some indexes contain more than one char so we need to track this)
> > this.maskArray = new Array();
> > var mai = 0;
> > var regexp = '';
> > // cycle through the raw mask and perform view mask conversions
> > for(var i=0; i<mask.length; i++){
> > if(regexp){
> > if(regexp == 'X'){
> > // end of current regexp slot
> > regexp = '';
> > }
> > if(mask.charAt(i) == 'X'){
> > // current mask array index contains the complete regexp so we need to store it in the array
> > this.maskArray[mai] = regexp;
> > mai++;
> > regexp = null;
> > } else {
> > // still in the middle of the regexp keep adding the current character to the regexp
> > regexp += mask.charAt(i);
> > }
> > } else if(mask.charAt(i) == 'X'){
> > // current slot is a regexp
> > regexp += 'X';
> > this.viewMask += '_';
> > } else if(mask.charAt(i) == '9' || mask.charAt(i) == 'L' || mask.charAt(i) == 'l' || mask.charAt(i) == 'A') {
> > // the current mask character is one of the predefined/reserved characters
> > this.viewMask += '_';
> > this.maskArray[mai] = mask.charAt(i);
> > mai++;
> > } else {
> > // just a regular char
> > this.viewMask += mask.charAt(i);
> > this.maskArray[mai] = mask.charAt(i);
> > mai++;
> > }
> > }
> > // the predefined/reserved characters need to be replaced with the viewing mask char that desigantes an editable value (underscore)
> > this.specialChars = this.viewMask.replace(/(L|l|9|A|_|X)/g,'');
> > this.getValidatedKey = function(keyCode, cursorPosition) {
> > // validates if the passed key code is valid for the specified cursor position and returns the value if it is. otherwise, return false
> > var maskKey = this.maskArray[cursorPosition.start];
> > if(maskKey == '9'){
> > // only allow numbers at the specified slot
> > return keyCode.pressedKey.match(/[0-9]/);
> > } else if(maskKey == 'L'){
> > // only allow uppercase letters at specified slot (convert if necessary)
> > return (keyCode.pressedKey.match(/[A-Za-z]/))? keyCode.pressedKey.toUpperCase(): null;
> > } else if(maskKey == 'l'){
> > // only allow lowercase letters at specified slot (convert if necessary)
> > return (keyCode.pressedKey.match(/[A-Za-z]/))? keyCode.pressedKey.toLowerCase(): null;
> > } else {
> > if(maskKey == 'A'){
> > // only allow alpha-numeric values at the specified slot
> > return keyCode.pressedKey.match(/[A-Za-z0-9]/);
> > } else {
> > // only allow values that are verified by the specified regexp at the specified slot
> > return (this.maskArray[cursorPosition.start].length > 1)? keyCode.pressedKey.match(new RegExp(maskKey)): null;
> > }
> > }
> > };
> > this.removeValueWhenInvalid = function(){
> > // removes value from the input element when the mask is incomplete
> > if(this.inputTextElement.value.indexOf('_') > -1){
> > this.inputTextElement.value = '';
> > }
> > };
> > this.processMaskFormatting = function(e) {
> > // capture event (should be the keydown event)
> > var onKeyDownEvent = InputTextMask.getEvent(e);
> > // create the key code from the event.
> > var keyCode = new InputTextMask.KeyCode(onKeyDownEvent);
> > if(InputTextMask.handleEventBubble(onKeyDownEvent, keyCode)){
> > // the pressed key is allowed to propagate- no mask injection required
> > return true;
> > }
> > var v = this.inputTextElement.value;
> > if(v.length === 0){
> > // when the input value is empty populate it with the viewing mask
> > this.inputTextElement.value = this.viewMask;
> > }
> > var cursorPos = InputTextMask.getCursorPosition(this.inputTextElement, v);
> > if(cursorPos.end == cursorPos.previousValue.length && !keyCode.isBackspace){
> > // input cursor position is at the end of the mask- do not allow any more characters to be keyed
> > return false;
> > }
> > // move the cursor position to the next slot that does not contain a mask character
> > while(this.inputTextElement.mask.specialChars.match(RegExp.escape(cursorPos.previousValue.charAt(((keyCode.isBackspace)? cursorPos.start-1: cursorPos.start))))){
> > if(keyCode.isBackspace) {
> > // backspace needs to move the cursor backwards
> > cursorPos.decStart();
> > } else {
> > // still moving cursor one space to the right
> > cursorPos.incStart();
> > }
> > if(cursorPos.start >= cursorPos.previousValue.length || cursorPos.start < 0){
> > // end of the mask- no more keys should be keyed
> > return false;
> > }
> > }
> > if(keyCode.isBackspace){
> > // need to go back one space to the left
> > cursorPos.decStart();
> > }
> > // inject the key that was pressed into the input value mask
> > if(InputTextMask.injectValue(this.inputTextElement, keyCode, cursorPos)){
> > // when the injection is sucessful move the cursor to the next slot to the right of the injected key
> > InputTextMask.moveCursorToPosition(this.inputTextElement, keyCode, cursorPos);
> > }
> > // because the pressed key is being injected we always need to return false to prevent duplicate
> > // key injection
> > return false;
> > };
> > },
> > KeyCode: function(onKeyDownEvent) {
> > this.onKeyDownEvent = onKeyDownEvent;
> > // get the unicode value from the key event
> > this.unicode = onKeyDownEvent.which? onKeyDownEvent.which: (onKeyDownEvent.keyCode? onKeyDownEvent.keyCode: (onKeyDownEvent.charCode? onKeyDownEvent.charCode: 0));
> > this.isShiftPressed = onKeyDownEvent.shiftKey == false || onKeyDownEvent.shiftKey == true? onKeyDownEvent.shiftKey: (onKeyDownEvent.modifiers && (onKeyDownEvent.modifiers & 4)); //bitWise AND
> > // TODO : need to get cap lock capture for onkeydown event
> > //this.isCapLock = ((!this.isShiftPressed && this.unicode >= 65 && this.unicode <= 90) || (this.unicode >= 97 && this.unicode <= 122 && this.isShiftPressed));
> > if(this.unicode >= 96 && this.unicode <= 105) {
> > this.unicode -= 48; // handle number keypad
> > }
> > if(this.unicode >= 65 && this.unicode <= 90 && !this.isShiftPressed){
> > this.unicode += 32; // handle uppercase
> > }
> > this.isTab = (this.unicode == 9)? true: false;
> > this.isBackspace = (this.unicode == 8)? true: false;
> > this.isLeftOrRightArrow = (this.unicode == 37 || this.unicode == 39)? true: false;
> > // capture the actual key for the passed key code
> > this.pressedKey = String.fromCharCode(this.unicode);
> > },
> > CursorPosition: function(start, end, range, previousValue) {
> > // holds the cursor position values
> > this.start = isNaN(start)? 0: start;
> > this.end = isNaN(end)? 0: end;
> > this.range = range;
> > this.previousValue = previousValue;
> > this.incStart = function(){
> > this.start++;
> > };
> > this.decStart = function(){
> > this.start--;
> > };
> > }
> > };
> > // Add escape prototype feature to RegExp object
> > // text.replace(/[.*+?^${}()|[\]\/\\]/g, '\\$0');
> > // text.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, '\\$1');
> > if(!RegExp.escape) {
> > RegExp.escape = function(text){
> > var sp;
> > if(!arguments.callee.sRE){
> > sp=['/','.','*','+','?','|','(',')','[',']','{','}','\\'];
> > arguments.callee.sRE = new RegExp('(\\' + sp.join('|\\') + ')','g');
> > }
> > return text.replace(arguments.callee.sRE, '\\$1');
> > };
> > }
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: Input Text Mask?
Posted by William Hoover <wh...@nemours.org>.
johan, see https://issues.apache.org/jira/browse/WICKET-1085
-----Original Message-----
From: Johan Compagner [mailto:jcompagner@gmail.com]
Sent: Saturday, October 20, 2007 12:55 PM
To: users@wicket.apache.org
Subject: Re: Input Text Mask?
I think such a thing in extentions would also be nice.
johan
On 10/18/07, Igor Vaynberg <ig...@gmail.com> wrote:
>
> would you be interested in making this a subclass of textfield and
> throwing it into wicketstuff-minis project which is in wicket-stuff?
>
> -igor
>
>
> On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> > Is anyone interested in using the mask script (below) to a component in
> a Wicket extension? The script prevents invalid input in a text field as the
> user types (similar to the Atlas version:
> http://www.fci.com.br/maskedit/MaskEdit/MaskEdit.aspx). I didn't see a
> component in Wicket that would accomplish this out-of-the-box and thought it
> would be a cool addition to Wicket.
> >
> > For example to force the input to mask a phone number:
> > <input type="text" onfocus="InputTextMask.processMaskFocus(this,
> "(999)999-9999", true);" />
> >
> > /**
> > * InputTextMask script used for mask/regexp operations.
> > * Mask Individual Character Usage:
> > * 9 - designates only numeric values
> > * L - designates only uppercase letter values
> > * l - designates only lowercase letter values
> > * A - designates only alphanumeric values
> > * X - denotes that a custom client script regular expression is
> specified</li>
> > * All other characters are assumed to be "special" characters used to
> mask
> > * the input component
> > * Example 1:
> > * (999)999-9999 <LiveCall:(999)999-9999> only numeric values can be
> entered where the the character
> > * position value is 9. Parenthesis and dash are non-editable/mask
> characters.
> > * Example 2:
> > * 99L-ll-X[^A-C]X only numeric values for the first two characters,
> > * uppercase values for the third character, lowercase letters for the
> > * fifth/sixth characters, and the last character X[^A-C]X together
> counts
> > * as the eighth character regular expression that would allow all
> characters
> > * but "A", "B", and "C". Dashes outside the regular expression are
> > * non-editable/mask characters.
> > */
> > var InputTextMask = {
> > processMaskFocus: function(input, mask, clearWhenInvalid){
> > // create an input mask and register it on the specified
> input (if it hasnt already been added by a previous call
> > InputTextMask.createInputMask(input, mask,
> clearWhenInvalid);
> > if(input.value.length == 0){
> > // when the input value is empty populate it
> with the viewing mask and move the cursor to the
> > // beginning of the input field
> > var cursorPos = InputTextMask.getCursorPosition(input,
> input.value);
> > input.value = input.mask.viewMask;
> > InputTextMask.moveCursorToPosition(input, null,
> cursorPos);
> > }
> > },
> > getEvent: function(e) {
> > // get the event either from the window or from the
> passed event
> > return (typeof event != 'undefined')? event: e;
> > },
> > handleEventBubble: function(keyEvent, keyCode){
> > // this method ensures that the key enterned by the user
> is not propagated unless it is a tab or arrow key
> > try {
> > if(keyCode && (keyCode.isTab ||
> keyCode.isLeftOrRightArrow)){
> > // allow all tab/arrow keys by returning
> true- no further action required
> > return true;
> > }
> > keyEvent.cancelBubble = true;
> > if(keyEvent.stopPropagation){
> > // prevent other event triggers
> > keyEvent.stopPropagation();
> > }
> > if(keyEvent.preventDefault){
> > // prevent the default event from
> firing. in this case it is propagation of the keyed input
> > keyEvent.preventDefault();
> > }
> > return false;
> > } catch(e) {
> > alert(e.message);
> > }
> > },
> > createInputMask: function(input, mask, clearWhenInvalid) {
> > // if this input hasnt already registered its mask go
> ahead and do so now. This only needs to be performed the
> > // first time the input is encountered when it gains
> focus. It will attach the MaskType object to the input object
> > // add add all of the appropriate event listeners to
> ensure that the mask is applied
> > if(!input.mask || input.mask.rawMask != mask){
> > input.mask = new InputTextMask.MaskType(input,
> mask, clearWhenInvalid);
> > // add the event listeners that will ensure that
> when the input contains an incomplete mask it will be remove.
> > // Also, make sure that the keydown event is
> fired from this point forward thus invoking the mask format.
> > if(input.addEventListener){
> > // most doms
> > input.addEventListener('blur',
> function(){input.mask.removeValueWhenInvalid();}, false);
> > input.addEventListener('keydown',
> function(e){return input.mask.processMaskFormatting(e);}, false);
> > if(window.opera){
> > // in opera- need to ensure that
> the keypress event isnt interfering with this input mask
> > input.addEventListener('keypress',
> function(e){return InputTextMask.handleEventBubble(InputTextMask.getEvent(e),
> null);}, false);
> > }
> > } else if(input.attachEvent) {
> > // ie
> > input.attachEvent('onblur', function(){
> input.mask.removeValueWhenInvalid();});
> > input.attachEvent('onkeydown',
> function(e){return input.mask.processMaskFormatting(e);});
> > } else {
> > // other browsers that do not support
> dynamic event propagations
> > input.onBlur = function(){
> input.mask.removeValueWhenInvalid();};
> > input.onKeyDown = function(e){
> input.mask.processMaskFormatting(e)};
> > }
> > }
> > },
> > getCursorPosition: function(input, previousValue) {
> > // gets the current cursor position (s=start, e=end) and
> creates/returns a new CursorPosition instance
> > var s, e, r;
> > if(input.createTextRange){
> > // ie- need to capture the start/end cursor
> positions
> > r = document.selection.createRange
> ().duplicate();
> > r.moveEnd('character', previousValue.length);
> > if(r.text === ''){
> > s = previousValue.length;
> > } else {
> > s = previousValue.lastIndexOf(r.text);
> > }
> > r = document.selection.createRange
> ().duplicate();
> > r.moveStart('character', -previousValue.length);
> > e = r.text.length;
> > } else {
> > // other browsers
> > s = input.selectionStart;
> > e = input.selectionEnd;
> > }
> > return new InputTextMask.CursorPosition(s, e, r,
> previousValue);
> > },
> > moveCursorToPosition: function(input, keyCode, cursorPosition) {
> > // moves a cursor position for the passed input element
> to the specified cursor position- because the
> > // range cursor position is 1 indexed we add an
> additional space (unless the pressed key is a backspace)
> > var p = (!keyCode || (keyCode && keyCode.isBackspace))?
> cursorPosition.start: cursorPosition.start + 1;
> > if(input.createTextRange){
> > // ie move- cursor to the index p
> > cursorPosition.range.move('character', p);
> > cursorPosition.range.select();
> > } else {
> > // other browser- move cursor to the index p
> > input.selectionStart = p;
> > input.selectionEnd = p;
> > }
> > },
> > injectValue: function(input, keyCode, cursorPosition) {
> > // inject the validated key into the input mask at the
> specified cursor position and return true on success
> > var key = (keyCode.isBackspace)? '_':
> input.mask.getValidatedKey(keyCode, cursorPosition);
> > if(key){
> > input.value =
> cursorPosition.previousValue.substring(0, cursorPosition.start) + key +
> cursorPosition.previousValue.substring(cursorPosition.start + 1,
> cursorPosition.previousValue.length);
> > return true;
> > }
> > // invalid key
> > return false;
> > },
> > MaskType: function(inputTextElement, mask, clearWhenInvalid) {
> > // this object instance is holds relative mask
> properties for a specified input element
> > this.inputTextElement = inputTextElement;
> > // designates whether or not the input value is cleared
> when its mask is incomplete and a blur event is triggered
> > this.clearWhenInvalid = clearWhenInvalid;
> > // holds the last validated key code
> > this.lastValidatedKeyCode = null;
> > // the mask value used to validate/mask valid input
> > this.rawMask = mask;
> > // the mask displayed in the input
> > this.viewMask = '';
> > // the string array of all the raw mask values (some
> indexes contain more than one char so we need to track this)
> > this.maskArray = new Array();
> > var mai = 0;
> > var regexp = '';
> > // cycle through the raw mask and perform view mask
> conversions
> > for(var i=0; i<mask.length; i++){
> > if(regexp){
> > if(regexp == 'X'){
> > // end of current regexp slot
> > regexp = '';
> > }
> > if(mask.charAt(i) == 'X'){
> > // current mask array index
> contains the complete regexp so we need to store it in the array
> > this.maskArray[mai] = regexp;
> > mai++;
> > regexp = null;
> > } else {
> > // still in the middle of the
> regexp keep adding the current character to the regexp
> > regexp += mask.charAt(i);
> > }
> > } else if(mask.charAt(i) == 'X'){
> > // current slot is a regexp
> > regexp += 'X';
> > this.viewMask += '_';
> > } else if(mask.charAt(i) == '9' || mask.charAt(i)
> == 'L' || mask.charAt(i) == 'l' || mask.charAt(i) == 'A') {
> > // the current mask character is one of
> the predefined/reserved characters
> > this.viewMask += '_';
> > this.maskArray[mai] = mask.charAt(i);
> > mai++;
> > } else {
> > // just a regular char
> > this.viewMask += mask.charAt(i);
> > this.maskArray[mai] = mask.charAt(i);
> > mai++;
> > }
> > }
> > // the predefined/reserved characters need to be
> replaced with the viewing mask char that desigantes an editable value
> (underscore)
> > this.specialChars = this.viewMask.replace
> (/(L|l|9|A|_|X)/g,'');
> > this.getValidatedKey = function(keyCode, cursorPosition)
> {
> > // validates if the passed key code is valid for
> the specified cursor position and returns the value if it is. otherwise,
> return false
> > var maskKey = this.maskArray[
> cursorPosition.start];
> > if(maskKey == '9'){
> > // only allow numbers at the specified
> slot
> > return keyCode.pressedKey.match
> (/[0-9]/);
> > } else if(maskKey == 'L'){
> > // only allow uppercase letters at
> specified slot (convert if necessary)
> > return (keyCode.pressedKey.match(/[A-Za-z]/))?
> keyCode.pressedKey.toUpperCase(): null;
> > } else if(maskKey == 'l'){
> > // only allow lowercase letters at
> specified slot (convert if necessary)
> > return (keyCode.pressedKey.match(/[A-Za-z]/))?
> keyCode.pressedKey.toLowerCase(): null;
> > } else {
> > if(maskKey == 'A'){
> > // only allow alpha-numeric
> values at the specified slot
> > return keyCode.pressedKey.match
> (/[A-Za-z0-9]/);
> > } else {
> > // only allow values that are
> verified by the specified regexp at the specified slot
> > return (this.maskArray[
> cursorPosition.start].length > 1)? keyCode.pressedKey.match(new
> RegExp(maskKey)): null;
> > }
> > }
> > };
> > this.removeValueWhenInvalid = function(){
> > // removes value from the input element when the
> mask is incomplete
> > if(this.inputTextElement.value.indexOf('_') >
> -1){
> > this.inputTextElement.value = '';
> > }
> > };
> > this.processMaskFormatting = function(e) {
> > // capture event (should be the keydown event)
> > var onKeyDownEvent = InputTextMask.getEvent(e);
> > // create the key code from the event.
> > var keyCode = new InputTextMask.KeyCode
> (onKeyDownEvent);
> > if(InputTextMask.handleEventBubble(onKeyDownEvent,
> keyCode)){
> > // the pressed key is allowed to
> propagate- no mask injection required
> > return true;
> > }
> > var v = this.inputTextElement.value;
> > if(v.length === 0){
> > // when the input value is empty
> populate it with the viewing mask
> > this.inputTextElement.value =
> this.viewMask;
> > }
> > var cursorPos = InputTextMask.getCursorPosition(
> this.inputTextElement, v);
> > if(cursorPos.end ==
> cursorPos.previousValue.length && !keyCode.isBackspace){
> > // input cursor position is at the end
> of the mask- do not allow any more characters to be keyed
> > return false;
> > }
> > // move the cursor position to the next slot
> that does not contain a mask character
> > while(
> this.inputTextElement.mask.specialChars.match(RegExp.escape(
> cursorPos.previousValue.charAt(((keyCode.isBackspace)? cursorPos.start-1:
> cursorPos.start))))){
> > if(keyCode.isBackspace) {
> > // backspace needs to move the
> cursor backwards
> > cursorPos.decStart();
> > } else {
> > // still moving cursor one space
> to the right
> > cursorPos.incStart();
> > }
> > if(cursorPos.start >=
> cursorPos.previousValue.length || cursorPos.start < 0){
> > // end of the mask- no more keys
> should be keyed
> > return false;
> > }
> > }
> > if(keyCode.isBackspace){
> > // need to go back one space to the left
> > cursorPos.decStart();
> > }
> > // inject the key that was pressed into the
> input value mask
> > if(InputTextMask.injectValue(
> this.inputTextElement, keyCode, cursorPos)){
> > // when the injection is sucessful move
> the cursor to the next slot to the right of the injected key
> > InputTextMask.moveCursorToPosition(
> this.inputTextElement, keyCode, cursorPos);
> > }
> > // because the pressed key is being injected we
> always need to return false to prevent duplicate
> > // key injection
> > return false;
> > };
> > },
> > KeyCode: function(onKeyDownEvent) {
> > this.onKeyDownEvent = onKeyDownEvent;
> > // get the unicode value from the key event
> > this.unicode = onKeyDownEvent.which?
> onKeyDownEvent.which: (onKeyDownEvent.keyCode? onKeyDownEvent.keyCode: (
> onKeyDownEvent.charCode? onKeyDownEvent.charCode: 0));
> > this.isShiftPressed = onKeyDownEvent.shiftKey == false
> || onKeyDownEvent.shiftKey == true? onKeyDownEvent.shiftKey: (
> onKeyDownEvent.modifiers && (onKeyDownEvent.modifiers & 4)); //bitWise AND
> > // TODO : need to get cap lock capture for onkeydown
> event
> > //this.isCapLock = ((!this.isShiftPressed &&
> this.unicode >= 65 && this.unicode <= 90) || (this.unicode >= 97 &&
> this.unicode <= 122 && this.isShiftPressed));
> > if(this.unicode >= 96 && this.unicode <= 105) {
> > this.unicode -= 48; // handle number keypad
> > }
> > if(this.unicode >= 65 && this.unicode <= 90 &&
> !this.isShiftPressed){
> > this.unicode += 32; // handle uppercase
> > }
> > this.isTab = (this.unicode == 9)? true: false;
> > this.isBackspace = (this.unicode == 8)? true: false;
> > this.isLeftOrRightArrow = (this.unicode == 37 ||
> this.unicode == 39)? true: false;
> > // capture the actual key for the passed key code
> > this.pressedKey = String.fromCharCode(this.unicode);
> > },
> > CursorPosition: function(start, end, range, previousValue) {
> > // holds the cursor position values
> > this.start = isNaN(start)? 0: start;
> > this.end = isNaN(end)? 0: end;
> > this.range = range;
> > this.previousValue = previousValue;
> > this.incStart = function(){
> > this.start++;
> > };
> > this.decStart = function(){
> > this.start--;
> > };
> > }
> > };
> > // Add escape prototype feature to RegExp object
> > // text.replace(/[.*+?^${}()|[\]\/\\]/g, '\\$0');
> > // text.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, '\\$1');
> > if(!RegExp.escape) {
> > RegExp.escape = function(text){
> > var sp;
> > if(!arguments.callee.sRE){
> >
> sp=['/','.','*','+','?','|','(',')','[',']','{','}','\\'];
> > arguments.callee.sRE = new RegExp('(\\' +
> sp.join('|\\') + ')','g');
> > }
> > return text.replace(arguments.callee.sRE, '\\$1');
> > };
> > }
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Input Text Mask?
Posted by Johan Compagner <jc...@gmail.com>.
I think such a thing in extentions would also be nice.
johan
On 10/18/07, Igor Vaynberg <ig...@gmail.com> wrote:
>
> would you be interested in making this a subclass of textfield and
> throwing it into wicketstuff-minis project which is in wicket-stuff?
>
> -igor
>
>
> On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> > Is anyone interested in using the mask script (below) to a component in
> a Wicket extension? The script prevents invalid input in a text field as the
> user types (similar to the Atlas version:
> http://www.fci.com.br/maskedit/MaskEdit/MaskEdit.aspx). I didn't see a
> component in Wicket that would accomplish this out-of-the-box and thought it
> would be a cool addition to Wicket.
> >
> > For example to force the input to mask a phone number:
> > <input type="text" onfocus="InputTextMask.processMaskFocus(this,
> "(999)999-9999", true);" />
> >
> > /**
> > * InputTextMask script used for mask/regexp operations.
> > * Mask Individual Character Usage:
> > * 9 - designates only numeric values
> > * L - designates only uppercase letter values
> > * l - designates only lowercase letter values
> > * A - designates only alphanumeric values
> > * X - denotes that a custom client script regular expression is
> specified</li>
> > * All other characters are assumed to be "special" characters used to
> mask
> > * the input component
> > * Example 1:
> > * (999)999-9999 <LiveCall:(999)999-9999> only numeric values can be
> entered where the the character
> > * position value is 9. Parenthesis and dash are non-editable/mask
> characters.
> > * Example 2:
> > * 99L-ll-X[^A-C]X only numeric values for the first two characters,
> > * uppercase values for the third character, lowercase letters for the
> > * fifth/sixth characters, and the last character X[^A-C]X together
> counts
> > * as the eighth character regular expression that would allow all
> characters
> > * but "A", "B", and "C". Dashes outside the regular expression are
> > * non-editable/mask characters.
> > */
> > var InputTextMask = {
> > processMaskFocus: function(input, mask, clearWhenInvalid){
> > // create an input mask and register it on the specified
> input (if it hasnt already been added by a previous call
> > InputTextMask.createInputMask(input, mask,
> clearWhenInvalid);
> > if(input.value.length == 0){
> > // when the input value is empty populate it
> with the viewing mask and move the cursor to the
> > // beginning of the input field
> > var cursorPos = InputTextMask.getCursorPosition(input,
> input.value);
> > input.value = input.mask.viewMask;
> > InputTextMask.moveCursorToPosition(input, null,
> cursorPos);
> > }
> > },
> > getEvent: function(e) {
> > // get the event either from the window or from the
> passed event
> > return (typeof event != 'undefined')? event: e;
> > },
> > handleEventBubble: function(keyEvent, keyCode){
> > // this method ensures that the key enterned by the user
> is not propagated unless it is a tab or arrow key
> > try {
> > if(keyCode && (keyCode.isTab ||
> keyCode.isLeftOrRightArrow)){
> > // allow all tab/arrow keys by returning
> true- no further action required
> > return true;
> > }
> > keyEvent.cancelBubble = true;
> > if(keyEvent.stopPropagation){
> > // prevent other event triggers
> > keyEvent.stopPropagation();
> > }
> > if(keyEvent.preventDefault){
> > // prevent the default event from
> firing. in this case it is propagation of the keyed input
> > keyEvent.preventDefault();
> > }
> > return false;
> > } catch(e) {
> > alert(e.message);
> > }
> > },
> > createInputMask: function(input, mask, clearWhenInvalid) {
> > // if this input hasnt already registered its mask go
> ahead and do so now. This only needs to be performed the
> > // first time the input is encountered when it gains
> focus. It will attach the MaskType object to the input object
> > // add add all of the appropriate event listeners to
> ensure that the mask is applied
> > if(!input.mask || input.mask.rawMask != mask){
> > input.mask = new InputTextMask.MaskType(input,
> mask, clearWhenInvalid);
> > // add the event listeners that will ensure that
> when the input contains an incomplete mask it will be remove.
> > // Also, make sure that the keydown event is
> fired from this point forward thus invoking the mask format.
> > if(input.addEventListener){
> > // most doms
> > input.addEventListener('blur',
> function(){input.mask.removeValueWhenInvalid();}, false);
> > input.addEventListener('keydown',
> function(e){return input.mask.processMaskFormatting(e);}, false);
> > if(window.opera){
> > // in opera- need to ensure that
> the keypress event isnt interfering with this input mask
> > input.addEventListener('keypress',
> function(e){return InputTextMask.handleEventBubble(InputTextMask.getEvent(e),
> null);}, false);
> > }
> > } else if(input.attachEvent) {
> > // ie
> > input.attachEvent('onblur', function(){
> input.mask.removeValueWhenInvalid();});
> > input.attachEvent('onkeydown',
> function(e){return input.mask.processMaskFormatting(e);});
> > } else {
> > // other browsers that do not support
> dynamic event propagations
> > input.onBlur = function(){
> input.mask.removeValueWhenInvalid();};
> > input.onKeyDown = function(e){
> input.mask.processMaskFormatting(e)};
> > }
> > }
> > },
> > getCursorPosition: function(input, previousValue) {
> > // gets the current cursor position (s=start, e=end) and
> creates/returns a new CursorPosition instance
> > var s, e, r;
> > if(input.createTextRange){
> > // ie- need to capture the start/end cursor
> positions
> > r = document.selection.createRange
> ().duplicate();
> > r.moveEnd('character', previousValue.length);
> > if(r.text === ''){
> > s = previousValue.length;
> > } else {
> > s = previousValue.lastIndexOf(r.text);
> > }
> > r = document.selection.createRange
> ().duplicate();
> > r.moveStart('character', -previousValue.length);
> > e = r.text.length;
> > } else {
> > // other browsers
> > s = input.selectionStart;
> > e = input.selectionEnd;
> > }
> > return new InputTextMask.CursorPosition(s, e, r,
> previousValue);
> > },
> > moveCursorToPosition: function(input, keyCode, cursorPosition) {
> > // moves a cursor position for the passed input element
> to the specified cursor position- because the
> > // range cursor position is 1 indexed we add an
> additional space (unless the pressed key is a backspace)
> > var p = (!keyCode || (keyCode && keyCode.isBackspace))?
> cursorPosition.start: cursorPosition.start + 1;
> > if(input.createTextRange){
> > // ie move- cursor to the index p
> > cursorPosition.range.move('character', p);
> > cursorPosition.range.select();
> > } else {
> > // other browser- move cursor to the index p
> > input.selectionStart = p;
> > input.selectionEnd = p;
> > }
> > },
> > injectValue: function(input, keyCode, cursorPosition) {
> > // inject the validated key into the input mask at the
> specified cursor position and return true on success
> > var key = (keyCode.isBackspace)? '_':
> input.mask.getValidatedKey(keyCode, cursorPosition);
> > if(key){
> > input.value =
> cursorPosition.previousValue.substring(0, cursorPosition.start) + key +
> cursorPosition.previousValue.substring(cursorPosition.start + 1,
> cursorPosition.previousValue.length);
> > return true;
> > }
> > // invalid key
> > return false;
> > },
> > MaskType: function(inputTextElement, mask, clearWhenInvalid) {
> > // this object instance is holds relative mask
> properties for a specified input element
> > this.inputTextElement = inputTextElement;
> > // designates whether or not the input value is cleared
> when its mask is incomplete and a blur event is triggered
> > this.clearWhenInvalid = clearWhenInvalid;
> > // holds the last validated key code
> > this.lastValidatedKeyCode = null;
> > // the mask value used to validate/mask valid input
> > this.rawMask = mask;
> > // the mask displayed in the input
> > this.viewMask = '';
> > // the string array of all the raw mask values (some
> indexes contain more than one char so we need to track this)
> > this.maskArray = new Array();
> > var mai = 0;
> > var regexp = '';
> > // cycle through the raw mask and perform view mask
> conversions
> > for(var i=0; i<mask.length; i++){
> > if(regexp){
> > if(regexp == 'X'){
> > // end of current regexp slot
> > regexp = '';
> > }
> > if(mask.charAt(i) == 'X'){
> > // current mask array index
> contains the complete regexp so we need to store it in the array
> > this.maskArray[mai] = regexp;
> > mai++;
> > regexp = null;
> > } else {
> > // still in the middle of the
> regexp keep adding the current character to the regexp
> > regexp += mask.charAt(i);
> > }
> > } else if(mask.charAt(i) == 'X'){
> > // current slot is a regexp
> > regexp += 'X';
> > this.viewMask += '_';
> > } else if(mask.charAt(i) == '9' || mask.charAt(i)
> == 'L' || mask.charAt(i) == 'l' || mask.charAt(i) == 'A') {
> > // the current mask character is one of
> the predefined/reserved characters
> > this.viewMask += '_';
> > this.maskArray[mai] = mask.charAt(i);
> > mai++;
> > } else {
> > // just a regular char
> > this.viewMask += mask.charAt(i);
> > this.maskArray[mai] = mask.charAt(i);
> > mai++;
> > }
> > }
> > // the predefined/reserved characters need to be
> replaced with the viewing mask char that desigantes an editable value
> (underscore)
> > this.specialChars = this.viewMask.replace
> (/(L|l|9|A|_|X)/g,'');
> > this.getValidatedKey = function(keyCode, cursorPosition)
> {
> > // validates if the passed key code is valid for
> the specified cursor position and returns the value if it is. otherwise,
> return false
> > var maskKey = this.maskArray[
> cursorPosition.start];
> > if(maskKey == '9'){
> > // only allow numbers at the specified
> slot
> > return keyCode.pressedKey.match
> (/[0-9]/);
> > } else if(maskKey == 'L'){
> > // only allow uppercase letters at
> specified slot (convert if necessary)
> > return (keyCode.pressedKey.match(/[A-Za-z]/))?
> keyCode.pressedKey.toUpperCase(): null;
> > } else if(maskKey == 'l'){
> > // only allow lowercase letters at
> specified slot (convert if necessary)
> > return (keyCode.pressedKey.match(/[A-Za-z]/))?
> keyCode.pressedKey.toLowerCase(): null;
> > } else {
> > if(maskKey == 'A'){
> > // only allow alpha-numeric
> values at the specified slot
> > return keyCode.pressedKey.match
> (/[A-Za-z0-9]/);
> > } else {
> > // only allow values that are
> verified by the specified regexp at the specified slot
> > return (this.maskArray[
> cursorPosition.start].length > 1)? keyCode.pressedKey.match(new
> RegExp(maskKey)): null;
> > }
> > }
> > };
> > this.removeValueWhenInvalid = function(){
> > // removes value from the input element when the
> mask is incomplete
> > if(this.inputTextElement.value.indexOf('_') >
> -1){
> > this.inputTextElement.value = '';
> > }
> > };
> > this.processMaskFormatting = function(e) {
> > // capture event (should be the keydown event)
> > var onKeyDownEvent = InputTextMask.getEvent(e);
> > // create the key code from the event.
> > var keyCode = new InputTextMask.KeyCode
> (onKeyDownEvent);
> > if(InputTextMask.handleEventBubble(onKeyDownEvent,
> keyCode)){
> > // the pressed key is allowed to
> propagate- no mask injection required
> > return true;
> > }
> > var v = this.inputTextElement.value;
> > if(v.length === 0){
> > // when the input value is empty
> populate it with the viewing mask
> > this.inputTextElement.value =
> this.viewMask;
> > }
> > var cursorPos = InputTextMask.getCursorPosition(
> this.inputTextElement, v);
> > if(cursorPos.end ==
> cursorPos.previousValue.length && !keyCode.isBackspace){
> > // input cursor position is at the end
> of the mask- do not allow any more characters to be keyed
> > return false;
> > }
> > // move the cursor position to the next slot
> that does not contain a mask character
> > while(
> this.inputTextElement.mask.specialChars.match(RegExp.escape(
> cursorPos.previousValue.charAt(((keyCode.isBackspace)? cursorPos.start-1:
> cursorPos.start))))){
> > if(keyCode.isBackspace) {
> > // backspace needs to move the
> cursor backwards
> > cursorPos.decStart();
> > } else {
> > // still moving cursor one space
> to the right
> > cursorPos.incStart();
> > }
> > if(cursorPos.start >=
> cursorPos.previousValue.length || cursorPos.start < 0){
> > // end of the mask- no more keys
> should be keyed
> > return false;
> > }
> > }
> > if(keyCode.isBackspace){
> > // need to go back one space to the left
> > cursorPos.decStart();
> > }
> > // inject the key that was pressed into the
> input value mask
> > if(InputTextMask.injectValue(
> this.inputTextElement, keyCode, cursorPos)){
> > // when the injection is sucessful move
> the cursor to the next slot to the right of the injected key
> > InputTextMask.moveCursorToPosition(
> this.inputTextElement, keyCode, cursorPos);
> > }
> > // because the pressed key is being injected we
> always need to return false to prevent duplicate
> > // key injection
> > return false;
> > };
> > },
> > KeyCode: function(onKeyDownEvent) {
> > this.onKeyDownEvent = onKeyDownEvent;
> > // get the unicode value from the key event
> > this.unicode = onKeyDownEvent.which?
> onKeyDownEvent.which: (onKeyDownEvent.keyCode? onKeyDownEvent.keyCode: (
> onKeyDownEvent.charCode? onKeyDownEvent.charCode: 0));
> > this.isShiftPressed = onKeyDownEvent.shiftKey == false
> || onKeyDownEvent.shiftKey == true? onKeyDownEvent.shiftKey: (
> onKeyDownEvent.modifiers && (onKeyDownEvent.modifiers & 4)); //bitWise AND
> > // TODO : need to get cap lock capture for onkeydown
> event
> > //this.isCapLock = ((!this.isShiftPressed &&
> this.unicode >= 65 && this.unicode <= 90) || (this.unicode >= 97 &&
> this.unicode <= 122 && this.isShiftPressed));
> > if(this.unicode >= 96 && this.unicode <= 105) {
> > this.unicode -= 48; // handle number keypad
> > }
> > if(this.unicode >= 65 && this.unicode <= 90 &&
> !this.isShiftPressed){
> > this.unicode += 32; // handle uppercase
> > }
> > this.isTab = (this.unicode == 9)? true: false;
> > this.isBackspace = (this.unicode == 8)? true: false;
> > this.isLeftOrRightArrow = (this.unicode == 37 ||
> this.unicode == 39)? true: false;
> > // capture the actual key for the passed key code
> > this.pressedKey = String.fromCharCode(this.unicode);
> > },
> > CursorPosition: function(start, end, range, previousValue) {
> > // holds the cursor position values
> > this.start = isNaN(start)? 0: start;
> > this.end = isNaN(end)? 0: end;
> > this.range = range;
> > this.previousValue = previousValue;
> > this.incStart = function(){
> > this.start++;
> > };
> > this.decStart = function(){
> > this.start--;
> > };
> > }
> > };
> > // Add escape prototype feature to RegExp object
> > // text.replace(/[.*+?^${}()|[\]\/\\]/g, '\\$0');
> > // text.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, '\\$1');
> > if(!RegExp.escape) {
> > RegExp.escape = function(text){
> > var sp;
> > if(!arguments.callee.sRE){
> >
> sp=['/','.','*','+','?','|','(',')','[',']','{','}','\\'];
> > arguments.callee.sRE = new RegExp('(\\' +
> sp.join('|\\') + ')','g');
> > }
> > return text.replace(arguments.callee.sRE, '\\$1');
> > };
> > }
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
RE: Input Text Mask?
Posted by William Hoover <wh...@nemours.org>.
Sure. How would I go about doing so?
-----Original Message-----
From: Igor Vaynberg [mailto:igor.vaynberg@gmail.com]
Sent: Thursday, October 18, 2007 1:11 PM
To: users@wicket.apache.org
Subject: Re: Input Text Mask?
would you be interested in making this a subclass of textfield and
throwing it into wicketstuff-minis project which is in wicket-stuff?
-igor
On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> Is anyone interested in using the mask script (below) to a component in a Wicket extension? The script prevents invalid input in a text field as the user types (similar to the Atlas version: http://www.fci.com.br/maskedit/MaskEdit/MaskEdit.aspx). I didn't see a component in Wicket that would accomplish this out-of-the-box and thought it would be a cool addition to Wicket.
>
> For example to force the input to mask a phone number:
> <input type="text" onfocus="InputTextMask.processMaskFocus(this, "(999)999-9999", true);" />
>
> /**
> * InputTextMask script used for mask/regexp operations.
> * Mask Individual Character Usage:
> * 9 - designates only numeric values
> * L - designates only uppercase letter values
> * l - designates only lowercase letter values
> * A - designates only alphanumeric values
> * X - denotes that a custom client script regular expression is specified</li>
> * All other characters are assumed to be "special" characters used to mask
> * the input component
> * Example 1:
> * (999)999-9999 only numeric values can be entered where the the character
> * position value is 9. Parenthesis and dash are non-editable/mask characters.
> * Example 2:
> * 99L-ll-X[^A-C]X only numeric values for the first two characters,
> * uppercase values for the third character, lowercase letters for the
> * fifth/sixth characters, and the last character X[^A-C]X together counts
> * as the eighth character regular expression that would allow all characters
> * but "A", "B", and "C". Dashes outside the regular expression are
> * non-editable/mask characters.
> */
> var InputTextMask = {
> processMaskFocus: function(input, mask, clearWhenInvalid){
> // create an input mask and register it on the specified input (if it hasnt already been added by a previous call
> InputTextMask.createInputMask(input, mask, clearWhenInvalid);
> if(input.value.length == 0){
> // when the input value is empty populate it with the viewing mask and move the cursor to the
> // beginning of the input field
> var cursorPos = InputTextMask.getCursorPosition(input, input.value);
> input.value = input.mask.viewMask;
> InputTextMask.moveCursorToPosition(input, null, cursorPos);
> }
> },
> getEvent: function(e) {
> // get the event either from the window or from the passed event
> return (typeof event != 'undefined')? event: e;
> },
> handleEventBubble: function(keyEvent, keyCode){
> // this method ensures that the key enterned by the user is not propagated unless it is a tab or arrow key
> try {
> if(keyCode && (keyCode.isTab || keyCode.isLeftOrRightArrow)){
> // allow all tab/arrow keys by returning true- no further action required
> return true;
> }
> keyEvent.cancelBubble = true;
> if(keyEvent.stopPropagation){
> // prevent other event triggers
> keyEvent.stopPropagation();
> }
> if(keyEvent.preventDefault){
> // prevent the default event from firing. in this case it is propagation of the keyed input
> keyEvent.preventDefault();
> }
> return false;
> } catch(e) {
> alert(e.message);
> }
> },
> createInputMask: function(input, mask, clearWhenInvalid) {
> // if this input hasnt already registered its mask go ahead and do so now. This only needs to be performed the
> // first time the input is encountered when it gains focus. It will attach the MaskType object to the input object
> // add add all of the appropriate event listeners to ensure that the mask is applied
> if(!input.mask || input.mask.rawMask != mask){
> input.mask = new InputTextMask.MaskType(input, mask, clearWhenInvalid);
> // add the event listeners that will ensure that when the input contains an incomplete mask it will be remove.
> // Also, make sure that the keydown event is fired from this point forward thus invoking the mask format.
> if(input.addEventListener){
> // most doms
> input.addEventListener('blur', function(){input.mask.removeValueWhenInvalid();}, false);
> input.addEventListener('keydown', function(e){return input.mask.processMaskFormatting(e);}, false);
> if(window.opera){
> // in opera- need to ensure that the keypress event isnt interfering with this input mask
> input.addEventListener('keypress', function(e){return InputTextMask.handleEventBubble(InputTextMask.getEvent(e), null);}, false);
> }
> } else if(input.attachEvent) {
> // ie
> input.attachEvent('onblur', function(){input.mask.removeValueWhenInvalid();});
> input.attachEvent('onkeydown', function(e){return input.mask.processMaskFormatting(e);});
> } else {
> // other browsers that do not support dynamic event propagations
> input.onBlur = function(){input.mask.removeValueWhenInvalid();};
> input.onKeyDown = function(e){input.mask.processMaskFormatting(e)};
> }
> }
> },
> getCursorPosition: function(input, previousValue) {
> // gets the current cursor position (s=start, e=end) and creates/returns a new CursorPosition instance
> var s, e, r;
> if(input.createTextRange){
> // ie- need to capture the start/end cursor positions
> r = document.selection.createRange().duplicate();
> r.moveEnd('character', previousValue.length);
> if(r.text === ''){
> s = previousValue.length;
> } else {
> s = previousValue.lastIndexOf(r.text);
> }
> r = document.selection.createRange().duplicate();
> r.moveStart('character', -previousValue.length);
> e = r.text.length;
> } else {
> // other browsers
> s = input.selectionStart;
> e = input.selectionEnd;
> }
> return new InputTextMask.CursorPosition(s, e, r, previousValue);
> },
> moveCursorToPosition: function(input, keyCode, cursorPosition) {
> // moves a cursor position for the passed input element to the specified cursor position- because the
> // range cursor position is 1 indexed we add an additional space (unless the pressed key is a backspace)
> var p = (!keyCode || (keyCode && keyCode.isBackspace))? cursorPosition.start: cursorPosition.start + 1;
> if(input.createTextRange){
> // ie move- cursor to the index p
> cursorPosition.range.move('character', p);
> cursorPosition.range.select();
> } else {
> // other browser- move cursor to the index p
> input.selectionStart = p;
> input.selectionEnd = p;
> }
> },
> injectValue: function(input, keyCode, cursorPosition) {
> // inject the validated key into the input mask at the specified cursor position and return true on success
> var key = (keyCode.isBackspace)? '_': input.mask.getValidatedKey(keyCode, cursorPosition);
> if(key){
> input.value = cursorPosition.previousValue.substring(0, cursorPosition.start) + key + cursorPosition.previousValue.substring(cursorPosition.start + 1, cursorPosition.previousValue.length);
> return true;
> }
> // invalid key
> return false;
> },
> MaskType: function(inputTextElement, mask, clearWhenInvalid) {
> // this object instance is holds relative mask properties for a specified input element
> this.inputTextElement = inputTextElement;
> // designates whether or not the input value is cleared when its mask is incomplete and a blur event is triggered
> this.clearWhenInvalid = clearWhenInvalid;
> // holds the last validated key code
> this.lastValidatedKeyCode = null;
> // the mask value used to validate/mask valid input
> this.rawMask = mask;
> // the mask displayed in the input
> this.viewMask = '';
> // the string array of all the raw mask values (some indexes contain more than one char so we need to track this)
> this.maskArray = new Array();
> var mai = 0;
> var regexp = '';
> // cycle through the raw mask and perform view mask conversions
> for(var i=0; i<mask.length; i++){
> if(regexp){
> if(regexp == 'X'){
> // end of current regexp slot
> regexp = '';
> }
> if(mask.charAt(i) == 'X'){
> // current mask array index contains the complete regexp so we need to store it in the array
> this.maskArray[mai] = regexp;
> mai++;
> regexp = null;
> } else {
> // still in the middle of the regexp keep adding the current character to the regexp
> regexp += mask.charAt(i);
> }
> } else if(mask.charAt(i) == 'X'){
> // current slot is a regexp
> regexp += 'X';
> this.viewMask += '_';
> } else if(mask.charAt(i) == '9' || mask.charAt(i) == 'L' || mask.charAt(i) == 'l' || mask.charAt(i) == 'A') {
> // the current mask character is one of the predefined/reserved characters
> this.viewMask += '_';
> this.maskArray[mai] = mask.charAt(i);
> mai++;
> } else {
> // just a regular char
> this.viewMask += mask.charAt(i);
> this.maskArray[mai] = mask.charAt(i);
> mai++;
> }
> }
> // the predefined/reserved characters need to be replaced with the viewing mask char that desigantes an editable value (underscore)
> this.specialChars = this.viewMask.replace(/(L|l|9|A|_|X)/g,'');
> this.getValidatedKey = function(keyCode, cursorPosition) {
> // validates if the passed key code is valid for the specified cursor position and returns the value if it is. otherwise, return false
> var maskKey = this.maskArray[cursorPosition.start];
> if(maskKey == '9'){
> // only allow numbers at the specified slot
> return keyCode.pressedKey.match(/[0-9]/);
> } else if(maskKey == 'L'){
> // only allow uppercase letters at specified slot (convert if necessary)
> return (keyCode.pressedKey.match(/[A-Za-z]/))? keyCode.pressedKey.toUpperCase(): null;
> } else if(maskKey == 'l'){
> // only allow lowercase letters at specified slot (convert if necessary)
> return (keyCode.pressedKey.match(/[A-Za-z]/))? keyCode.pressedKey.toLowerCase(): null;
> } else {
> if(maskKey == 'A'){
> // only allow alpha-numeric values at the specified slot
> return keyCode.pressedKey.match(/[A-Za-z0-9]/);
> } else {
> // only allow values that are verified by the specified regexp at the specified slot
> return (this.maskArray[cursorPosition.start].length > 1)? keyCode.pressedKey.match(new RegExp(maskKey)): null;
> }
> }
> };
> this.removeValueWhenInvalid = function(){
> // removes value from the input element when the mask is incomplete
> if(this.inputTextElement.value.indexOf('_') > -1){
> this.inputTextElement.value = '';
> }
> };
> this.processMaskFormatting = function(e) {
> // capture event (should be the keydown event)
> var onKeyDownEvent = InputTextMask.getEvent(e);
> // create the key code from the event.
> var keyCode = new InputTextMask.KeyCode(onKeyDownEvent);
> if(InputTextMask.handleEventBubble(onKeyDownEvent, keyCode)){
> // the pressed key is allowed to propagate- no mask injection required
> return true;
> }
> var v = this.inputTextElement.value;
> if(v.length === 0){
> // when the input value is empty populate it with the viewing mask
> this.inputTextElement.value = this.viewMask;
> }
> var cursorPos = InputTextMask.getCursorPosition(this.inputTextElement, v);
> if(cursorPos.end == cursorPos.previousValue.length && !keyCode.isBackspace){
> // input cursor position is at the end of the mask- do not allow any more characters to be keyed
> return false;
> }
> // move the cursor position to the next slot that does not contain a mask character
> while(this.inputTextElement.mask.specialChars.match(RegExp.escape(cursorPos.previousValue.charAt(((keyCode.isBackspace)? cursorPos.start-1: cursorPos.start))))){
> if(keyCode.isBackspace) {
> // backspace needs to move the cursor backwards
> cursorPos.decStart();
> } else {
> // still moving cursor one space to the right
> cursorPos.incStart();
> }
> if(cursorPos.start >= cursorPos.previousValue.length || cursorPos.start < 0){
> // end of the mask- no more keys should be keyed
> return false;
> }
> }
> if(keyCode.isBackspace){
> // need to go back one space to the left
> cursorPos.decStart();
> }
> // inject the key that was pressed into the input value mask
> if(InputTextMask.injectValue(this.inputTextElement, keyCode, cursorPos)){
> // when the injection is sucessful move the cursor to the next slot to the right of the injected key
> InputTextMask.moveCursorToPosition(this.inputTextElement, keyCode, cursorPos);
> }
> // because the pressed key is being injected we always need to return false to prevent duplicate
> // key injection
> return false;
> };
> },
> KeyCode: function(onKeyDownEvent) {
> this.onKeyDownEvent = onKeyDownEvent;
> // get the unicode value from the key event
> this.unicode = onKeyDownEvent.which? onKeyDownEvent.which: (onKeyDownEvent.keyCode? onKeyDownEvent.keyCode: (onKeyDownEvent.charCode? onKeyDownEvent.charCode: 0));
> this.isShiftPressed = onKeyDownEvent.shiftKey == false || onKeyDownEvent.shiftKey == true? onKeyDownEvent.shiftKey: (onKeyDownEvent.modifiers && (onKeyDownEvent.modifiers & 4)); //bitWise AND
> // TODO : need to get cap lock capture for onkeydown event
> //this.isCapLock = ((!this.isShiftPressed && this.unicode >= 65 && this.unicode <= 90) || (this.unicode >= 97 && this.unicode <= 122 && this.isShiftPressed));
> if(this.unicode >= 96 && this.unicode <= 105) {
> this.unicode -= 48; // handle number keypad
> }
> if(this.unicode >= 65 && this.unicode <= 90 && !this.isShiftPressed){
> this.unicode += 32; // handle uppercase
> }
> this.isTab = (this.unicode == 9)? true: false;
> this.isBackspace = (this.unicode == 8)? true: false;
> this.isLeftOrRightArrow = (this.unicode == 37 || this.unicode == 39)? true: false;
> // capture the actual key for the passed key code
> this.pressedKey = String.fromCharCode(this.unicode);
> },
> CursorPosition: function(start, end, range, previousValue) {
> // holds the cursor position values
> this.start = isNaN(start)? 0: start;
> this.end = isNaN(end)? 0: end;
> this.range = range;
> this.previousValue = previousValue;
> this.incStart = function(){
> this.start++;
> };
> this.decStart = function(){
> this.start--;
> };
> }
> };
> // Add escape prototype feature to RegExp object
> // text.replace(/[.*+?^${}()|[\]\/\\]/g, '\\$0');
> // text.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, '\\$1');
> if(!RegExp.escape) {
> RegExp.escape = function(text){
> var sp;
> if(!arguments.callee.sRE){
> sp=['/','.','*','+','?','|','(',')','[',']','{','}','\\'];
> arguments.callee.sRE = new RegExp('(\\' + sp.join('|\\') + ')','g');
> }
> return text.replace(arguments.callee.sRE, '\\$1');
> };
> }
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Input Text Mask?
Posted by Igor Vaynberg <ig...@gmail.com>.
would you be interested in making this a subclass of textfield and
throwing it into wicketstuff-minis project which is in wicket-stuff?
-igor
On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> Is anyone interested in using the mask script (below) to a component in a Wicket extension? The script prevents invalid input in a text field as the user types (similar to the Atlas version: http://www.fci.com.br/maskedit/MaskEdit/MaskEdit.aspx). I didn't see a component in Wicket that would accomplish this out-of-the-box and thought it would be a cool addition to Wicket.
>
> For example to force the input to mask a phone number:
> <input type="text" onfocus="InputTextMask.processMaskFocus(this, "(999)999-9999", true);" />
>
> /**
> * InputTextMask script used for mask/regexp operations.
> * Mask Individual Character Usage:
> * 9 - designates only numeric values
> * L - designates only uppercase letter values
> * l - designates only lowercase letter values
> * A - designates only alphanumeric values
> * X - denotes that a custom client script regular expression is specified</li>
> * All other characters are assumed to be "special" characters used to mask
> * the input component
> * Example 1:
> * (999)999-9999 only numeric values can be entered where the the character
> * position value is 9. Parenthesis and dash are non-editable/mask characters.
> * Example 2:
> * 99L-ll-X[^A-C]X only numeric values for the first two characters,
> * uppercase values for the third character, lowercase letters for the
> * fifth/sixth characters, and the last character X[^A-C]X together counts
> * as the eighth character regular expression that would allow all characters
> * but "A", "B", and "C". Dashes outside the regular expression are
> * non-editable/mask characters.
> */
> var InputTextMask = {
> processMaskFocus: function(input, mask, clearWhenInvalid){
> // create an input mask and register it on the specified input (if it hasnt already been added by a previous call
> InputTextMask.createInputMask(input, mask, clearWhenInvalid);
> if(input.value.length == 0){
> // when the input value is empty populate it with the viewing mask and move the cursor to the
> // beginning of the input field
> var cursorPos = InputTextMask.getCursorPosition(input, input.value);
> input.value = input.mask.viewMask;
> InputTextMask.moveCursorToPosition(input, null, cursorPos);
> }
> },
> getEvent: function(e) {
> // get the event either from the window or from the passed event
> return (typeof event != 'undefined')? event: e;
> },
> handleEventBubble: function(keyEvent, keyCode){
> // this method ensures that the key enterned by the user is not propagated unless it is a tab or arrow key
> try {
> if(keyCode && (keyCode.isTab || keyCode.isLeftOrRightArrow)){
> // allow all tab/arrow keys by returning true- no further action required
> return true;
> }
> keyEvent.cancelBubble = true;
> if(keyEvent.stopPropagation){
> // prevent other event triggers
> keyEvent.stopPropagation();
> }
> if(keyEvent.preventDefault){
> // prevent the default event from firing. in this case it is propagation of the keyed input
> keyEvent.preventDefault();
> }
> return false;
> } catch(e) {
> alert(e.message);
> }
> },
> createInputMask: function(input, mask, clearWhenInvalid) {
> // if this input hasnt already registered its mask go ahead and do so now. This only needs to be performed the
> // first time the input is encountered when it gains focus. It will attach the MaskType object to the input object
> // add add all of the appropriate event listeners to ensure that the mask is applied
> if(!input.mask || input.mask.rawMask != mask){
> input.mask = new InputTextMask.MaskType(input, mask, clearWhenInvalid);
> // add the event listeners that will ensure that when the input contains an incomplete mask it will be remove.
> // Also, make sure that the keydown event is fired from this point forward thus invoking the mask format.
> if(input.addEventListener){
> // most doms
> input.addEventListener('blur', function(){input.mask.removeValueWhenInvalid();}, false);
> input.addEventListener('keydown', function(e){return input.mask.processMaskFormatting(e);}, false);
> if(window.opera){
> // in opera- need to ensure that the keypress event isnt interfering with this input mask
> input.addEventListener('keypress', function(e){return InputTextMask.handleEventBubble(InputTextMask.getEvent(e), null);}, false);
> }
> } else if(input.attachEvent) {
> // ie
> input.attachEvent('onblur', function(){input.mask.removeValueWhenInvalid();});
> input.attachEvent('onkeydown', function(e){return input.mask.processMaskFormatting(e);});
> } else {
> // other browsers that do not support dynamic event propagations
> input.onBlur = function(){input.mask.removeValueWhenInvalid();};
> input.onKeyDown = function(e){input.mask.processMaskFormatting(e)};
> }
> }
> },
> getCursorPosition: function(input, previousValue) {
> // gets the current cursor position (s=start, e=end) and creates/returns a new CursorPosition instance
> var s, e, r;
> if(input.createTextRange){
> // ie- need to capture the start/end cursor positions
> r = document.selection.createRange().duplicate();
> r.moveEnd('character', previousValue.length);
> if(r.text === ''){
> s = previousValue.length;
> } else {
> s = previousValue.lastIndexOf(r.text);
> }
> r = document.selection.createRange().duplicate();
> r.moveStart('character', -previousValue.length);
> e = r.text.length;
> } else {
> // other browsers
> s = input.selectionStart;
> e = input.selectionEnd;
> }
> return new InputTextMask.CursorPosition(s, e, r, previousValue);
> },
> moveCursorToPosition: function(input, keyCode, cursorPosition) {
> // moves a cursor position for the passed input element to the specified cursor position- because the
> // range cursor position is 1 indexed we add an additional space (unless the pressed key is a backspace)
> var p = (!keyCode || (keyCode && keyCode.isBackspace))? cursorPosition.start: cursorPosition.start + 1;
> if(input.createTextRange){
> // ie move- cursor to the index p
> cursorPosition.range.move('character', p);
> cursorPosition.range.select();
> } else {
> // other browser- move cursor to the index p
> input.selectionStart = p;
> input.selectionEnd = p;
> }
> },
> injectValue: function(input, keyCode, cursorPosition) {
> // inject the validated key into the input mask at the specified cursor position and return true on success
> var key = (keyCode.isBackspace)? '_': input.mask.getValidatedKey(keyCode, cursorPosition);
> if(key){
> input.value = cursorPosition.previousValue.substring(0, cursorPosition.start) + key + cursorPosition.previousValue.substring(cursorPosition.start + 1, cursorPosition.previousValue.length);
> return true;
> }
> // invalid key
> return false;
> },
> MaskType: function(inputTextElement, mask, clearWhenInvalid) {
> // this object instance is holds relative mask properties for a specified input element
> this.inputTextElement = inputTextElement;
> // designates whether or not the input value is cleared when its mask is incomplete and a blur event is triggered
> this.clearWhenInvalid = clearWhenInvalid;
> // holds the last validated key code
> this.lastValidatedKeyCode = null;
> // the mask value used to validate/mask valid input
> this.rawMask = mask;
> // the mask displayed in the input
> this.viewMask = '';
> // the string array of all the raw mask values (some indexes contain more than one char so we need to track this)
> this.maskArray = new Array();
> var mai = 0;
> var regexp = '';
> // cycle through the raw mask and perform view mask conversions
> for(var i=0; i<mask.length; i++){
> if(regexp){
> if(regexp == 'X'){
> // end of current regexp slot
> regexp = '';
> }
> if(mask.charAt(i) == 'X'){
> // current mask array index contains the complete regexp so we need to store it in the array
> this.maskArray[mai] = regexp;
> mai++;
> regexp = null;
> } else {
> // still in the middle of the regexp keep adding the current character to the regexp
> regexp += mask.charAt(i);
> }
> } else if(mask.charAt(i) == 'X'){
> // current slot is a regexp
> regexp += 'X';
> this.viewMask += '_';
> } else if(mask.charAt(i) == '9' || mask.charAt(i) == 'L' || mask.charAt(i) == 'l' || mask.charAt(i) == 'A') {
> // the current mask character is one of the predefined/reserved characters
> this.viewMask += '_';
> this.maskArray[mai] = mask.charAt(i);
> mai++;
> } else {
> // just a regular char
> this.viewMask += mask.charAt(i);
> this.maskArray[mai] = mask.charAt(i);
> mai++;
> }
> }
> // the predefined/reserved characters need to be replaced with the viewing mask char that desigantes an editable value (underscore)
> this.specialChars = this.viewMask.replace(/(L|l|9|A|_|X)/g,'');
> this.getValidatedKey = function(keyCode, cursorPosition) {
> // validates if the passed key code is valid for the specified cursor position and returns the value if it is. otherwise, return false
> var maskKey = this.maskArray[cursorPosition.start];
> if(maskKey == '9'){
> // only allow numbers at the specified slot
> return keyCode.pressedKey.match(/[0-9]/);
> } else if(maskKey == 'L'){
> // only allow uppercase letters at specified slot (convert if necessary)
> return (keyCode.pressedKey.match(/[A-Za-z]/))? keyCode.pressedKey.toUpperCase(): null;
> } else if(maskKey == 'l'){
> // only allow lowercase letters at specified slot (convert if necessary)
> return (keyCode.pressedKey.match(/[A-Za-z]/))? keyCode.pressedKey.toLowerCase(): null;
> } else {
> if(maskKey == 'A'){
> // only allow alpha-numeric values at the specified slot
> return keyCode.pressedKey.match(/[A-Za-z0-9]/);
> } else {
> // only allow values that are verified by the specified regexp at the specified slot
> return (this.maskArray[cursorPosition.start].length > 1)? keyCode.pressedKey.match(new RegExp(maskKey)): null;
> }
> }
> };
> this.removeValueWhenInvalid = function(){
> // removes value from the input element when the mask is incomplete
> if(this.inputTextElement.value.indexOf('_') > -1){
> this.inputTextElement.value = '';
> }
> };
> this.processMaskFormatting = function(e) {
> // capture event (should be the keydown event)
> var onKeyDownEvent = InputTextMask.getEvent(e);
> // create the key code from the event.
> var keyCode = new InputTextMask.KeyCode(onKeyDownEvent);
> if(InputTextMask.handleEventBubble(onKeyDownEvent, keyCode)){
> // the pressed key is allowed to propagate- no mask injection required
> return true;
> }
> var v = this.inputTextElement.value;
> if(v.length === 0){
> // when the input value is empty populate it with the viewing mask
> this.inputTextElement.value = this.viewMask;
> }
> var cursorPos = InputTextMask.getCursorPosition(this.inputTextElement, v);
> if(cursorPos.end == cursorPos.previousValue.length && !keyCode.isBackspace){
> // input cursor position is at the end of the mask- do not allow any more characters to be keyed
> return false;
> }
> // move the cursor position to the next slot that does not contain a mask character
> while(this.inputTextElement.mask.specialChars.match(RegExp.escape(cursorPos.previousValue.charAt(((keyCode.isBackspace)? cursorPos.start-1: cursorPos.start))))){
> if(keyCode.isBackspace) {
> // backspace needs to move the cursor backwards
> cursorPos.decStart();
> } else {
> // still moving cursor one space to the right
> cursorPos.incStart();
> }
> if(cursorPos.start >= cursorPos.previousValue.length || cursorPos.start < 0){
> // end of the mask- no more keys should be keyed
> return false;
> }
> }
> if(keyCode.isBackspace){
> // need to go back one space to the left
> cursorPos.decStart();
> }
> // inject the key that was pressed into the input value mask
> if(InputTextMask.injectValue(this.inputTextElement, keyCode, cursorPos)){
> // when the injection is sucessful move the cursor to the next slot to the right of the injected key
> InputTextMask.moveCursorToPosition(this.inputTextElement, keyCode, cursorPos);
> }
> // because the pressed key is being injected we always need to return false to prevent duplicate
> // key injection
> return false;
> };
> },
> KeyCode: function(onKeyDownEvent) {
> this.onKeyDownEvent = onKeyDownEvent;
> // get the unicode value from the key event
> this.unicode = onKeyDownEvent.which? onKeyDownEvent.which: (onKeyDownEvent.keyCode? onKeyDownEvent.keyCode: (onKeyDownEvent.charCode? onKeyDownEvent.charCode: 0));
> this.isShiftPressed = onKeyDownEvent.shiftKey == false || onKeyDownEvent.shiftKey == true? onKeyDownEvent.shiftKey: (onKeyDownEvent.modifiers && (onKeyDownEvent.modifiers & 4)); //bitWise AND
> // TODO : need to get cap lock capture for onkeydown event
> //this.isCapLock = ((!this.isShiftPressed && this.unicode >= 65 && this.unicode <= 90) || (this.unicode >= 97 && this.unicode <= 122 && this.isShiftPressed));
> if(this.unicode >= 96 && this.unicode <= 105) {
> this.unicode -= 48; // handle number keypad
> }
> if(this.unicode >= 65 && this.unicode <= 90 && !this.isShiftPressed){
> this.unicode += 32; // handle uppercase
> }
> this.isTab = (this.unicode == 9)? true: false;
> this.isBackspace = (this.unicode == 8)? true: false;
> this.isLeftOrRightArrow = (this.unicode == 37 || this.unicode == 39)? true: false;
> // capture the actual key for the passed key code
> this.pressedKey = String.fromCharCode(this.unicode);
> },
> CursorPosition: function(start, end, range, previousValue) {
> // holds the cursor position values
> this.start = isNaN(start)? 0: start;
> this.end = isNaN(end)? 0: end;
> this.range = range;
> this.previousValue = previousValue;
> this.incStart = function(){
> this.start++;
> };
> this.decStart = function(){
> this.start--;
> };
> }
> };
> // Add escape prototype feature to RegExp object
> // text.replace(/[.*+?^${}()|[\]\/\\]/g, '\\$0');
> // text.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, '\\$1');
> if(!RegExp.escape) {
> RegExp.escape = function(text){
> var sp;
> if(!arguments.callee.sRE){
> sp=['/','.','*','+','?','|','(',')','[',']','{','}','\\'];
> arguments.callee.sRE = new RegExp('(\\' + sp.join('|\\') + ')','g');
> }
> return text.replace(arguments.callee.sRE, '\\$1');
> };
> }
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: how to change format in DateTimeField?
Posted by Alex Objelean <al...@isdc.ro>.
There is no difference, you still can use DateTextField . All you have to do
is update the datePattern to support also the time, like this: "dd/MM/yyy
HH:mm:ss"
Alex
raybristol wrote:
>
> Thanks for your reply, I actually mean DateTimeField and I want to do the
> same thing as in DateTextField, because I need no only the date but the
> time as well.
>
> Many thanks
> Ray
>
>
>
>
> Alex Objelean wrote:
>>
>> You mean DateTextField (instead of DateTimeField). It has also this
>> constructor:
>> DateTextField(String id, IModel model, String datePattern)
>> where datePattern can be: "dd/MM/yyyy".
>>
>> Alex
>>
>>
>> raybristol wrote:
>>>
>>> there is a good example about use DateTextfield in :
>>> http://www.wicketstuff.org/wicket13/dates/?wicket:bookmarkablePage=sources%3Aorg.apache.wicket.examples.dates.DatesPage
>>>
>>> however, I want to add the time field as well, so I found DateTimeField
>>> which is working, however i don't know how to change the format of the
>>> date it displayed, in DateTextfield I believe I can do that with using
>>> its constructor: new DateTextField("dateTextField", new
>>> PropertyModel(this,"date"), new StyleDateConverter("S-", true)), but
>>> DateTimeField only has a constructor: new
>>> DateTimeField("dateTimeFromTextField", new PropertyModel(this, "date"))
>>> so I don't know how to change its format, also I want to prevent user to
>>> type in invalid date in the text field as well, becuase if user type
>>> some letters in the textfield next to the date picker then the date
>>> picker won't start properly as well.
>>>
>>> I might asking dump question becuase I am too new to wicket (I use
>>> asp.net before).
>>>
>>>
>>> Many thanks!
>>>
>>>
>>
>>
>
>
--
View this message in context: http://www.nabble.com/how-to-change-format-in-DateTimeField--tf4646276.html#a13281652
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Input Text Mask?
Posted by William Hoover <wh...@nemours.org>.
Is anyone interested in using the mask script (below) to a component in a Wicket extension? The script prevents invalid input in a text field as the user types (similar to the Atlas version: http://www.fci.com.br/maskedit/MaskEdit/MaskEdit.aspx). I didn't see a component in Wicket that would accomplish this out-of-the-box and thought it would be a cool addition to Wicket.
For example to force the input to mask a phone number:
<input type="text" onfocus="InputTextMask.processMaskFocus(this, "(999)999-9999", true);" />
/**
* InputTextMask script used for mask/regexp operations.
* Mask Individual Character Usage:
* 9 - designates only numeric values
* L - designates only uppercase letter values
* l - designates only lowercase letter values
* A - designates only alphanumeric values
* X - denotes that a custom client script regular expression is specified</li>
* All other characters are assumed to be "special" characters used to mask
* the input component
* Example 1:
* (999)999-9999 only numeric values can be entered where the the character
* position value is 9. Parenthesis and dash are non-editable/mask characters.
* Example 2:
* 99L-ll-X[^A-C]X only numeric values for the first two characters,
* uppercase values for the third character, lowercase letters for the
* fifth/sixth characters, and the last character X[^A-C]X together counts
* as the eighth character regular expression that would allow all characters
* but "A", "B", and "C". Dashes outside the regular expression are
* non-editable/mask characters.
*/
var InputTextMask = {
processMaskFocus: function(input, mask, clearWhenInvalid){
// create an input mask and register it on the specified input (if it hasnt already been added by a previous call
InputTextMask.createInputMask(input, mask, clearWhenInvalid);
if(input.value.length == 0){
// when the input value is empty populate it with the viewing mask and move the cursor to the
// beginning of the input field
var cursorPos = InputTextMask.getCursorPosition(input, input.value);
input.value = input.mask.viewMask;
InputTextMask.moveCursorToPosition(input, null, cursorPos);
}
},
getEvent: function(e) {
// get the event either from the window or from the passed event
return (typeof event != 'undefined')? event: e;
},
handleEventBubble: function(keyEvent, keyCode){
// this method ensures that the key enterned by the user is not propagated unless it is a tab or arrow key
try {
if(keyCode && (keyCode.isTab || keyCode.isLeftOrRightArrow)){
// allow all tab/arrow keys by returning true- no further action required
return true;
}
keyEvent.cancelBubble = true;
if(keyEvent.stopPropagation){
// prevent other event triggers
keyEvent.stopPropagation();
}
if(keyEvent.preventDefault){
// prevent the default event from firing. in this case it is propagation of the keyed input
keyEvent.preventDefault();
}
return false;
} catch(e) {
alert(e.message);
}
},
createInputMask: function(input, mask, clearWhenInvalid) {
// if this input hasnt already registered its mask go ahead and do so now. This only needs to be performed the
// first time the input is encountered when it gains focus. It will attach the MaskType object to the input object
// add add all of the appropriate event listeners to ensure that the mask is applied
if(!input.mask || input.mask.rawMask != mask){
input.mask = new InputTextMask.MaskType(input, mask, clearWhenInvalid);
// add the event listeners that will ensure that when the input contains an incomplete mask it will be remove.
// Also, make sure that the keydown event is fired from this point forward thus invoking the mask format.
if(input.addEventListener){
// most doms
input.addEventListener('blur', function(){input.mask.removeValueWhenInvalid();}, false);
input.addEventListener('keydown', function(e){return input.mask.processMaskFormatting(e);}, false);
if(window.opera){
// in opera- need to ensure that the keypress event isnt interfering with this input mask
input.addEventListener('keypress', function(e){return InputTextMask.handleEventBubble(InputTextMask.getEvent(e), null);}, false);
}
} else if(input.attachEvent) {
// ie
input.attachEvent('onblur', function(){input.mask.removeValueWhenInvalid();});
input.attachEvent('onkeydown', function(e){return input.mask.processMaskFormatting(e);});
} else {
// other browsers that do not support dynamic event propagations
input.onBlur = function(){input.mask.removeValueWhenInvalid();};
input.onKeyDown = function(e){input.mask.processMaskFormatting(e)};
}
}
},
getCursorPosition: function(input, previousValue) {
// gets the current cursor position (s=start, e=end) and creates/returns a new CursorPosition instance
var s, e, r;
if(input.createTextRange){
// ie- need to capture the start/end cursor positions
r = document.selection.createRange().duplicate();
r.moveEnd('character', previousValue.length);
if(r.text === ''){
s = previousValue.length;
} else {
s = previousValue.lastIndexOf(r.text);
}
r = document.selection.createRange().duplicate();
r.moveStart('character', -previousValue.length);
e = r.text.length;
} else {
// other browsers
s = input.selectionStart;
e = input.selectionEnd;
}
return new InputTextMask.CursorPosition(s, e, r, previousValue);
},
moveCursorToPosition: function(input, keyCode, cursorPosition) {
// moves a cursor position for the passed input element to the specified cursor position- because the
// range cursor position is 1 indexed we add an additional space (unless the pressed key is a backspace)
var p = (!keyCode || (keyCode && keyCode.isBackspace))? cursorPosition.start: cursorPosition.start + 1;
if(input.createTextRange){
// ie move- cursor to the index p
cursorPosition.range.move('character', p);
cursorPosition.range.select();
} else {
// other browser- move cursor to the index p
input.selectionStart = p;
input.selectionEnd = p;
}
},
injectValue: function(input, keyCode, cursorPosition) {
// inject the validated key into the input mask at the specified cursor position and return true on success
var key = (keyCode.isBackspace)? '_': input.mask.getValidatedKey(keyCode, cursorPosition);
if(key){
input.value = cursorPosition.previousValue.substring(0, cursorPosition.start) + key + cursorPosition.previousValue.substring(cursorPosition.start + 1, cursorPosition.previousValue.length);
return true;
}
// invalid key
return false;
},
MaskType: function(inputTextElement, mask, clearWhenInvalid) {
// this object instance is holds relative mask properties for a specified input element
this.inputTextElement = inputTextElement;
// designates whether or not the input value is cleared when its mask is incomplete and a blur event is triggered
this.clearWhenInvalid = clearWhenInvalid;
// holds the last validated key code
this.lastValidatedKeyCode = null;
// the mask value used to validate/mask valid input
this.rawMask = mask;
// the mask displayed in the input
this.viewMask = '';
// the string array of all the raw mask values (some indexes contain more than one char so we need to track this)
this.maskArray = new Array();
var mai = 0;
var regexp = '';
// cycle through the raw mask and perform view mask conversions
for(var i=0; i<mask.length; i++){
if(regexp){
if(regexp == 'X'){
// end of current regexp slot
regexp = '';
}
if(mask.charAt(i) == 'X'){
// current mask array index contains the complete regexp so we need to store it in the array
this.maskArray[mai] = regexp;
mai++;
regexp = null;
} else {
// still in the middle of the regexp keep adding the current character to the regexp
regexp += mask.charAt(i);
}
} else if(mask.charAt(i) == 'X'){
// current slot is a regexp
regexp += 'X';
this.viewMask += '_';
} else if(mask.charAt(i) == '9' || mask.charAt(i) == 'L' || mask.charAt(i) == 'l' || mask.charAt(i) == 'A') {
// the current mask character is one of the predefined/reserved characters
this.viewMask += '_';
this.maskArray[mai] = mask.charAt(i);
mai++;
} else {
// just a regular char
this.viewMask += mask.charAt(i);
this.maskArray[mai] = mask.charAt(i);
mai++;
}
}
// the predefined/reserved characters need to be replaced with the viewing mask char that desigantes an editable value (underscore)
this.specialChars = this.viewMask.replace(/(L|l|9|A|_|X)/g,'');
this.getValidatedKey = function(keyCode, cursorPosition) {
// validates if the passed key code is valid for the specified cursor position and returns the value if it is. otherwise, return false
var maskKey = this.maskArray[cursorPosition.start];
if(maskKey == '9'){
// only allow numbers at the specified slot
return keyCode.pressedKey.match(/[0-9]/);
} else if(maskKey == 'L'){
// only allow uppercase letters at specified slot (convert if necessary)
return (keyCode.pressedKey.match(/[A-Za-z]/))? keyCode.pressedKey.toUpperCase(): null;
} else if(maskKey == 'l'){
// only allow lowercase letters at specified slot (convert if necessary)
return (keyCode.pressedKey.match(/[A-Za-z]/))? keyCode.pressedKey.toLowerCase(): null;
} else {
if(maskKey == 'A'){
// only allow alpha-numeric values at the specified slot
return keyCode.pressedKey.match(/[A-Za-z0-9]/);
} else {
// only allow values that are verified by the specified regexp at the specified slot
return (this.maskArray[cursorPosition.start].length > 1)? keyCode.pressedKey.match(new RegExp(maskKey)): null;
}
}
};
this.removeValueWhenInvalid = function(){
// removes value from the input element when the mask is incomplete
if(this.inputTextElement.value.indexOf('_') > -1){
this.inputTextElement.value = '';
}
};
this.processMaskFormatting = function(e) {
// capture event (should be the keydown event)
var onKeyDownEvent = InputTextMask.getEvent(e);
// create the key code from the event.
var keyCode = new InputTextMask.KeyCode(onKeyDownEvent);
if(InputTextMask.handleEventBubble(onKeyDownEvent, keyCode)){
// the pressed key is allowed to propagate- no mask injection required
return true;
}
var v = this.inputTextElement.value;
if(v.length === 0){
// when the input value is empty populate it with the viewing mask
this.inputTextElement.value = this.viewMask;
}
var cursorPos = InputTextMask.getCursorPosition(this.inputTextElement, v);
if(cursorPos.end == cursorPos.previousValue.length && !keyCode.isBackspace){
// input cursor position is at the end of the mask- do not allow any more characters to be keyed
return false;
}
// move the cursor position to the next slot that does not contain a mask character
while(this.inputTextElement.mask.specialChars.match(RegExp.escape(cursorPos.previousValue.charAt(((keyCode.isBackspace)? cursorPos.start-1: cursorPos.start))))){
if(keyCode.isBackspace) {
// backspace needs to move the cursor backwards
cursorPos.decStart();
} else {
// still moving cursor one space to the right
cursorPos.incStart();
}
if(cursorPos.start >= cursorPos.previousValue.length || cursorPos.start < 0){
// end of the mask- no more keys should be keyed
return false;
}
}
if(keyCode.isBackspace){
// need to go back one space to the left
cursorPos.decStart();
}
// inject the key that was pressed into the input value mask
if(InputTextMask.injectValue(this.inputTextElement, keyCode, cursorPos)){
// when the injection is sucessful move the cursor to the next slot to the right of the injected key
InputTextMask.moveCursorToPosition(this.inputTextElement, keyCode, cursorPos);
}
// because the pressed key is being injected we always need to return false to prevent duplicate
// key injection
return false;
};
},
KeyCode: function(onKeyDownEvent) {
this.onKeyDownEvent = onKeyDownEvent;
// get the unicode value from the key event
this.unicode = onKeyDownEvent.which? onKeyDownEvent.which: (onKeyDownEvent.keyCode? onKeyDownEvent.keyCode: (onKeyDownEvent.charCode? onKeyDownEvent.charCode: 0));
this.isShiftPressed = onKeyDownEvent.shiftKey == false || onKeyDownEvent.shiftKey == true? onKeyDownEvent.shiftKey: (onKeyDownEvent.modifiers && (onKeyDownEvent.modifiers & 4)); //bitWise AND
// TODO : need to get cap lock capture for onkeydown event
//this.isCapLock = ((!this.isShiftPressed && this.unicode >= 65 && this.unicode <= 90) || (this.unicode >= 97 && this.unicode <= 122 && this.isShiftPressed));
if(this.unicode >= 96 && this.unicode <= 105) {
this.unicode -= 48; // handle number keypad
}
if(this.unicode >= 65 && this.unicode <= 90 && !this.isShiftPressed){
this.unicode += 32; // handle uppercase
}
this.isTab = (this.unicode == 9)? true: false;
this.isBackspace = (this.unicode == 8)? true: false;
this.isLeftOrRightArrow = (this.unicode == 37 || this.unicode == 39)? true: false;
// capture the actual key for the passed key code
this.pressedKey = String.fromCharCode(this.unicode);
},
CursorPosition: function(start, end, range, previousValue) {
// holds the cursor position values
this.start = isNaN(start)? 0: start;
this.end = isNaN(end)? 0: end;
this.range = range;
this.previousValue = previousValue;
this.incStart = function(){
this.start++;
};
this.decStart = function(){
this.start--;
};
}
};
// Add escape prototype feature to RegExp object
// text.replace(/[.*+?^${}()|[\]\/\\]/g, '\\$0');
// text.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, '\\$1');
if(!RegExp.escape) {
RegExp.escape = function(text){
var sp;
if(!arguments.callee.sRE){
sp=['/','.','*','+','?','|','(',')','[',']','{','}','\\'];
arguments.callee.sRE = new RegExp('(\\' + sp.join('|\\') + ')','g');
}
return text.replace(arguments.callee.sRE, '\\$1');
};
}
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: how to change format in DateTimeField?
Posted by raybristol <ra...@gmail.com>.
Thanks for your reply, I actually mean DateTimeField and I want to do the
same thing as in DateTextField, because I need no only the date but the time
as well.
Many thanks
Ray
Alex Objelean wrote:
>
> You mean DateTextField (instead of DateTimeField). It has also this
> constructor:
> DateTextField(String id, IModel model, String datePattern)
> where datePattern can be: "dd/MM/yyyy".
>
> Alex
>
>
> raybristol wrote:
>>
>> there is a good example about use DateTextfield in :
>> http://www.wicketstuff.org/wicket13/dates/?wicket:bookmarkablePage=sources%3Aorg.apache.wicket.examples.dates.DatesPage
>>
>> however, I want to add the time field as well, so I found DateTimeField
>> which is working, however i don't know how to change the format of the
>> date it displayed, in DateTextfield I believe I can do that with using
>> its constructor: new DateTextField("dateTextField", new
>> PropertyModel(this,"date"), new StyleDateConverter("S-", true)), but
>> DateTimeField only has a constructor: new
>> DateTimeField("dateTimeFromTextField", new PropertyModel(this, "date"))
>> so I don't know how to change its format, also I want to prevent user to
>> type in invalid date in the text field as well, becuase if user type some
>> letters in the textfield next to the date picker then the date picker
>> won't start properly as well.
>>
>> I might asking dump question becuase I am too new to wicket (I use
>> asp.net before).
>>
>>
>> Many thanks!
>>
>>
>
>
--
View this message in context: http://www.nabble.com/how-to-change-format-in-DateTimeField--tf4646276.html#a13276631
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: how to change format in DateTimeField?
Posted by Alex Objelean <al...@isdc.ro>.
You mean DateTextField (instead of DateTimeField). It has also this
constructor:
DateTextField(String id, IModel model, String datePattern)
where datePattern can be: "mm/DD/yyyy".
Alex
raybristol wrote:
>
> there is a good example about use DateTextfield in :
> http://www.wicketstuff.org/wicket13/dates/?wicket:bookmarkablePage=sources%3Aorg.apache.wicket.examples.dates.DatesPage
>
> however, I want to add the time field as well, so I found DateTimeField
> which is working, however i don't know how to change the format of the
> date it displayed, in DateTextfield I believe I can do that with using
> its constructor: new DateTextField("dateTextField", new
> PropertyModel(this,"date"), new StyleDateConverter("S-", true)), but
> DateTimeField only has a constructor: new
> DateTimeField("dateTimeFromTextField", new PropertyModel(this, "date")) so
> I don't know how to change its format, also I want to prevent user to type
> in invalid date in the text field as well, becuase if user type some
> letters in the textfield next to the date picker then the date picker
> won't start properly as well.
>
> I might asking dump question becuase I am too new to wicket (I use asp.net
> before).
>
>
> Many thanks!
>
>
--
View this message in context: http://www.nabble.com/how-to-change-format-in-DateTimeField--tf4646276.html#a13274525
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: how to change format in DateTimeField?
Posted by William Hoover <wh...@nemours.org>.
I went ahead and added the Jira Issue (https://issues.apache.org/jira/browse/WICKET-1085) with the attached code granting the license. All the code is original and unborrowed except the trivial "public domain" snippet that adds an escape function to JavaScript's RegExp. Let me know if there is anything else I need to do- thanks for the help!
-----Original Message-----
From: Martijn Dashorst [mailto:martijn.dashorst@gmail.com]
Sent: Thursday, October 18, 2007 3:34 PM
To: users@wicket.apache.org
Subject: Re: how to change format in DateTimeField?
It is your code, so we can't legally license it ;-)
If you don't mind people taking your code without contributing back
the following licenses are rather equivalent:
- BSD (http://www.opensource.org/licenses/bsd-license.php)
- MIT (http://www.opensource.org/licenses/mit-license.php)
If you do mind people taking your code without contributing back, the
(L)GPL is what you are looking for. But that will hinder adoption with
for instance Wicket.
If you want maximum compatibility with Wicket, then you should choose
the Apache license. The easiest way to contribute it would be to
attach it to a JIRA issue, and check the 'may be used in the project'
checkmark.
I see you already have possible sponsors in Eelco and Gerolf, so
inclusion in wicket-extensions wouldn't be too far off.
This all assumes of course that you are the owner of the copyright of
your contribution and didn't use another javascript library as a base.
Please note that I'm not implying anything wrong, but it is easy to
mess things up, and messy to clean up after the fact.
Martijn
On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> I see... Not sure how the licensing works, but whatever is the suggested license is fine with me. I'm not much of a business guru and wouldn't mind leaving it up to you Wicket folks ;o) I just need to know what the next step is so that others can make use of it :o)
>
--
Buy Wicket in Action: http://manning.com/dashorst
Apache Wicket 1.3.0-beta4 is released
Get it now: http://www.apache.org/dyn/closer.cgi/wicket/1.3.0-beta4/
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: how to change format in DateTimeField?
Posted by Martijn Dashorst <ma...@gmail.com>.
It is your code, so we can't legally license it ;-)
If you don't mind people taking your code without contributing back
the following licenses are rather equivalent:
- BSD (http://www.opensource.org/licenses/bsd-license.php)
- MIT (http://www.opensource.org/licenses/mit-license.php)
If you do mind people taking your code without contributing back, the
(L)GPL is what you are looking for. But that will hinder adoption with
for instance Wicket.
If you want maximum compatibility with Wicket, then you should choose
the Apache license. The easiest way to contribute it would be to
attach it to a JIRA issue, and check the 'may be used in the project'
checkmark.
I see you already have possible sponsors in Eelco and Gerolf, so
inclusion in wicket-extensions wouldn't be too far off.
This all assumes of course that you are the owner of the copyright of
your contribution and didn't use another javascript library as a base.
Please note that I'm not implying anything wrong, but it is easy to
mess things up, and messy to clean up after the fact.
Martijn
On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> I see... Not sure how the licensing works, but whatever is the suggested license is fine with me. I'm not much of a business guru and wouldn't mind leaving it up to you Wicket folks ;o) I just need to know what the next step is so that others can make use of it :o)
>
--
Buy Wicket in Action: http://manning.com/dashorst
Apache Wicket 1.3.0-beta4 is released
Get it now: http://www.apache.org/dyn/closer.cgi/wicket/1.3.0-beta4/
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: how to change format in DateTimeField?
Posted by William Hoover <wh...@nemours.org>.
I see... Not sure how the licensing works, but whatever is the suggested license is fine with me. I'm not much of a business guru and wouldn't mind leaving it up to you Wicket folks ;o) I just need to know what the next step is so that others can make use of it :o)
-----Original Message-----
From: Martijn Dashorst [mailto:martijn.dashorst@gmail.com]
Sent: Thursday, October 18, 2007 2:57 PM
To: users@wicket.apache.org
Subject: Re: how to change format in DateTimeField?
On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> There are no licenses or dependencies.
This is in itself a problem :). You really should pick a license, or
make it "public domain". But the best way of ensuring compatibility
with the rest of the world is to make it BSD or MIT licensed. Picking
a (L)GPL license will ensure Wicket can't ever distribute it in the
core. I also think wicketstuff-minis won't accept the contribution if
you use (L)GPL.
Martijn
--
Buy Wicket in Action: http://manning.com/dashorst
Apache Wicket 1.3.0-beta4 is released
Get it now: http://www.apache.org/dyn/closer.cgi/wicket/1.3.0-beta4/
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: how to change format in DateTimeField?
Posted by Martijn Dashorst <ma...@gmail.com>.
On 10/18/07, William Hoover <wh...@nemours.org> wrote:
> There are no licenses or dependencies.
This is in itself a problem :). You really should pick a license, or
make it "public domain". But the best way of ensuring compatibility
with the rest of the world is to make it BSD or MIT licensed. Picking
a (L)GPL license will ensure Wicket can't ever distribute it in the
core. I also think wicketstuff-minis won't accept the contribution if
you use (L)GPL.
Martijn
--
Buy Wicket in Action: http://manning.com/dashorst
Apache Wicket 1.3.0-beta4 is released
Get it now: http://www.apache.org/dyn/closer.cgi/wicket/1.3.0-beta4/
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: how to change format in DateTimeField?
Posted by Gerolf Seitz <ge...@gmail.com>.
>
> Does it work well? Any issues with licenses/ dependencies? If it is a
> big improvement, I'd be ok with it if the rest agrees. A good mask
> component imho would fit wicket-extensions. Though we have to be
> careful not get ourselves into more maintenance obligations.
yep, i totally agree with.
also, thanks for pointing out possible limitations/restrictions/concerns,
which i should have done
in the first place.
Gerolf
RE: how to change format in DateTimeField?
Posted by William Hoover <wh...@nemours.org>.
There are no licenses or dependencies. The script from the previous post is a lightweight js mask solution that I created to handle needs that my company has had in the past. I have not migrated a Wicket component to use it as of yet, but it would be very simple to accomplish seeing its just a js call when the input text gains focus. There is not any external variables stored in the dom that would cause namespace conflicts (other than the "InputTextMask" namespace that could possibly be migrated to a wicket registered namespace). Let me know what your thoughts are on this.
-----Original Message-----
From: Eelco Hillenius [mailto:eelco.hillenius@gmail.com]
Sent: Thursday, October 18, 2007 2:16 PM
To: users@wicket.apache.org
Subject: Re: how to change format in DateTimeField?
> maybe we could use the input text mask (
> http://www.fci.com.br/maskedit/MaskEdit/MaskEdit.aspx) which was mentioned
> by william in a thread recently.
> but then it would have to be in a wicket core project (eg.
> wicket-extensions) instead of the suggested wicketstuff-minis...
Does it work well? Any issues with licenses/ dependencies? If it is a
big improvement, I'd be ok with it if the rest agrees. A good mask
component imho would fit wicket-extensions. Though we have to be
careful not get ourselves into more maintenance obligations.
Eelco
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: how to change format in DateTimeField?
Posted by Eelco Hillenius <ee...@gmail.com>.
> maybe we could use the input text mask (
> http://www.fci.com.br/maskedit/MaskEdit/MaskEdit.aspx) which was mentioned
> by william in a thread recently.
> but then it would have to be in a wicket core project (eg.
> wicket-extensions) instead of the suggested wicketstuff-minis...
Does it work well? Any issues with licenses/ dependencies? If it is a
big improvement, I'd be ok with it if the rest agrees. A good mask
component imho would fit wicket-extensions. Though we have to be
careful not get ourselves into more maintenance obligations.
Eelco
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: how to change format in DateTimeField?
Posted by William Hoover <wh...@nemours.org>.
Would it make more sense to add it to extensions instead?
-----Original Message-----
From: Gerolf Seitz [mailto:gerolf.seitz@gmail.com]
Sent: Thursday, October 18, 2007 1:39 PM
To: users@wicket.apache.org
Subject: Re: how to change format in DateTimeField?
On 10/18/07, Eelco Hillenius <ee...@gmail.com> wrote:
>
> > also I want to prevent user to type in
> > invalid date in the text field as well, becuase if user type some
> letters in
> > the textfield next to the date picker then the date picker won't start
> > properly as well.
>
> I think there's an open issue for that.
>
maybe we could use the input text mask (
http://www.fci.com.br/maskedit/MaskEdit/MaskEdit.aspx) which was mentioned
by william in a thread recently.
but then it would have to be in a wicket core project (eg.
wicket-extensions) instead of the suggested wicketstuff-minis...
Gerolf
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: how to change format in DateTimeField?
Posted by Gerolf Seitz <ge...@gmail.com>.
On 10/18/07, Eelco Hillenius <ee...@gmail.com> wrote:
>
> > also I want to prevent user to type in
> > invalid date in the text field as well, becuase if user type some
> letters in
> > the textfield next to the date picker then the date picker won't start
> > properly as well.
>
> I think there's an open issue for that.
>
maybe we could use the input text mask (
http://www.fci.com.br/maskedit/MaskEdit/MaskEdit.aspx) which was mentioned
by william in a thread recently.
but then it would have to be in a wicket core project (eg.
wicket-extensions) instead of the suggested wicketstuff-minis...
Gerolf
Re: how to change format in DateTimeField?
Posted by Eelco Hillenius <ee...@gmail.com>.
> however, I want to add the time field as well, so I found DateTimeField
> which is working, however i don't know how to change the format of the date
> it displayed, in DateTextfield I believe I can do that with using its
> constructor: new DateTextField("dateTextField", new
> PropertyModel(this,"date"), new StyleDateConverter("S-", true)), but
> DateTimeField only has a constructor: new
> DateTimeField("dateTimeFromTextField", new PropertyModel(this, "date")) so I
> don't know how to change its format,
Provide a custom datetextfield by overriding newDateTextField(String,
PropertyModel)
> also I want to prevent user to type in
> invalid date in the text field as well, becuase if user type some letters in
> the textfield next to the date picker then the date picker won't start
> properly as well.
I think there's an open issue for that.
Eelco
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: how to change format in DateTimeField?
Posted by Alex Objelean <al...@isdc.ro>.
You mean DateTextField (instead of DateTimeField). It has also this
constructor:
DateTextField(String id, IModel model, String datePattern)
where datePattern can be: "dd/MM/yyyy".
Alex
raybristol wrote:
>
> there is a good example about use DateTextfield in :
> http://www.wicketstuff.org/wicket13/dates/?wicket:bookmarkablePage=sources%3Aorg.apache.wicket.examples.dates.DatesPage
>
> however, I want to add the time field as well, so I found DateTimeField
> which is working, however i don't know how to change the format of the
> date it displayed, in DateTextfield I believe I can do that with using
> its constructor: new DateTextField("dateTextField", new
> PropertyModel(this,"date"), new StyleDateConverter("S-", true)), but
> DateTimeField only has a constructor: new
> DateTimeField("dateTimeFromTextField", new PropertyModel(this, "date")) so
> I don't know how to change its format, also I want to prevent user to type
> in invalid date in the text field as well, becuase if user type some
> letters in the textfield next to the date picker then the date picker
> won't start properly as well.
>
> I might asking dump question becuase I am too new to wicket (I use asp.net
> before).
>
>
> Many thanks!
>
>
--
View this message in context: http://www.nabble.com/how-to-change-format-in-DateTimeField--tf4646276.html#a13274525
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org