25
Views
9
Comments
Hide keyboard when selecting from a date-picker in traditional web app on a tablet
Application Type
Traditional Web
Service Studio Version
11.10.8 (Build 37957)

When selecting a date in a date field using the date picker, my systems works perfectly well on a computer. When running it on a mobile tablet, whenever the user enters a date field, the screen keyboard appears, which covers the date picker.  How can I force the keyboard not to appear, bearing in mind that this is a traditional web app.

I have searched the forum without success. 

Any help would be much appreciated.

Rank: #639

Dear Leon

We need to use both JavaScript keypress and keydown events because when using keypress event you cannot handle Backspace keyboard button. You must use javascript keydown event to disable Backspace button.

$("#txtdate").keypress(function (e) {
      return false;
});
$("#txtdate").keydown(function (e) {
         return false;
});

 

You can also try with below Js: This quick block of Javascript will allow you to disable keyboard input within Date fields. This snippet is helpful if you need to avoid the virtual keyboard from appearing within the datepicker. 

<script type="text/javascript">

    jQuery(function() {

         jQuery( ".datepicker" ).datepicker({ }).attr('readonly','readonly');

    });

</script>

Rank: #3481

Thanks Manish.  I will try this.

Rank: #639

Sure, Please let me know the results

Rank: #3481

Hi Manish.

I took long to get back to this problem.

I used the Javascript option. I added it to the module's Javascript property.  What I noticed on the tablet is that the keyboard still appears and it ignores any click on the date-picker.

Any thoughts?

Leon

Rank: #639

Hello Leon

Just to confirm - Is it working in Mobile correctly? Or in Mobile too it has same issue as Tablet? Please let me know

Rank: #639

This worked for me, showing the picker both with the icon and the input field, but no keyboard shown:

HTML:

<input type='text' class="form-control" placeholder="Fecha Inicio" readonly="true" />

JS:

$('#dateIniPick').datetimepicker({
    format: 'DD/MM/YYYY',
    ignoreReadonly: true,
    allowInputToggle: true
});
Rank: #3481

The system works perfectly well on my Huawei mobile.  On my Huawei tablet it does not.  I notice now that the date-picker widget does not wok at all. It seems to freeze and I cannot get rid of it.  The keyboard still comes up when I enter the date input, and it covers the date-picker.

Rank: #639

No Worries, Please use the component I have suggested and it will work. I have checked it with the scenario.


Please remember to use the selected version from available one - 

 

If you are still facing any issues, Please share the app with me and I will add the datepicker for you and share the package with you. 

Hope you will get it done soon. 

Thanks

Rank: #639

Hii Leon

Please Use this Component for the help - https://www.outsystems.com/forge/component-overview/351/datepicker

It has one option "DatePicker without Typing" that's working fine. 

Please feel free to ask if you still face any issues