DatePicker, mask et overwroteMode

Posted by: RelationsTechniquesDev on 3 January 2022, 12:15 am EST

  • Posted 3 January 2022, 12:15 am EST

    We are facing an issue with the DatePicker using a mask.
    We would prefer to have the behavior that only exists on the input mask.

    Let me explain:
    1- go to
    https://www.grapecity.com/wijmo/demos/Input/InputMask/Overview/angular
    2- click on "Angular" then app.component.html
    4- replace
    <wj-input-mask id = "theZip4" mask = "00000-0000" [overwriteMode] = "overwrite"> </wj-input-mask>
    by
    <wj-input-mask id = "theZip4" mask = "00000-0000" [overwriteMode] = "true"> </wj-input-mask>

    Is it possible to have this behavior (overwriteMode) with the datepicker?
  • Replied 3 January 2022, 5:54 pm EST

    Hello,

    Yes, you can achieve a similar behavior by handling the keypress event on inputDate hostElement. You may provide your own logic to replace/overwrite instead of inserting it in the input field. Please refer to the sample demonstrating the same:

    https://stackblitz.com/edit/angular-wf8shk?file=src%2Fapp%2Fapp.component.ts

    Regards
  • Replied 11 January 2022, 12:20 am EST

    Thank you for your reply.
    I tried your solution.
    My problem is we are losing the validation of the mask and the format.
    Do you have a solution which allow us to keep your validation of mask and format ?
    Best regards
  • Replied 11 January 2022, 11:12 pm EST

    Hello,

    Sorry, but we are unable to understand the reference of validation of the mask here. If you want to validate the date and toggle CSS class to show the validation highlighting then you may refer to the sample link below demonstrating the same:

    https://stackblitz.com/edit/angular-gdjgsm?file=src%2Fapp%2Fapp.component.ts

    You would be required to do a similar operation as there is no direct method or property to validate like inputMask. If you have any other requirements then do let us know.

    Regards
  • Replied 14 January 2022, 12:14 am EST

    I m sorry.
    Let's explain my problem:
    1- open https://stackblitz.com/edit/angular-wf8shk?file=src%2Fapp%2Fapp.component.html
    2- modify mask="00/00/0000" by mask="99/99/9999"
    3- It s possible to enter alphanumeric value

    In fact, the following code should be modify according to the position in the mask
    if (/[A-Za-z0-9 ]/.test(key)) {
  • Replied 17 January 2022, 12:24 am EST

    Hello,

    Let me clarify if I understand your issue here, you want to only enter the integer value into the inputDate input field along with the validation of the mask (highlighting the invalid dates) if so then you can modify the above regex( /[A-Za-z0-9 ]/) to /[0-9 ]/.

    As for the validation, you may toggle the class to show an invalid state by handling the keypress event as explained in the previous response. You can update these methods or events conditions as per your requirement.

    If you still have any other requirements then I would recommend you share some more information along with a screenshot/gif.

    Sample link: https://stackblitz.com/edit/angular-2baxuc?file=src%2Fapp%2Fapp.component.ts

    Regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels