Hiding the keypad on an Android device in an Ionic app when user input is detected

I am currently utilizing the syncfusion ej2 Calendar plugin for a datepicker, but I am only using options such as selecting ranges like today, 1 month, or last 7 days from the plugin itself. The plugin provides dropdown options when the calendar is triggered.

<div class="Datepicker" >
            <ejs-daterangepicker id='daterangepicker'  [(ngModel)]='value' placeholder='Select a range' [startDate]='start' [endDate]='end' [min]='minDate_s' [max]='maxDate_s' [minDays]='minDays' [maxDays]='maxDays'(change)="eJSGetDates($event)">
                <e-presets>
                    <e-preset label="Today" [start]='today' [end]='today'></e-preset>
                    <e-preset label="Yesterday" [start]='yesterday' [end]='yesterday'></e-preset>
                    <e-preset label="This Week" [start]='weekStart' [end]='weekEnd'></e-preset>
                    <e-preset label="This Month" [start]='monthStart' [end]='monthEnd'></e-preset>
                    <e-preset label="Last Month" [start]='lastStart' [end]='lastEnd'></e-preset>
                </e-presets>
            </ejs-daterangepicker>
        </div>
    </div>

However, when I open the datepicker, the keypad displays which I do not want. Instead, I would like to hide the keypad when triggering the calendar.https://i.sstatic.net/XPDXi.jpg

javascriptandroidangulartypescriptionic3

Answer №1

To show or hide the keyboard manually, you can import the native plugin keyboard and use the following steps:

Start by installing the plugin with the command 

ionic cordova plugin add cordova-plugin-ionic-keyboard

Then, import the plugin in your TypeScript file's constructor():

import { Keyboard } from '@ionic-native/keyboard';

constructor(private keyboard: Keyboard) { }

Create a function that will be triggered when a focus event occurs on a control to hide the keyboard:

focusEvent(){
this.keyboard.hide();
}

In your HTML file, add the following code snippet:

<div class="Datepicker" >
            <ejs-daterangepicker id='daterangepicker' (focus)="focusEvent()" [(ngModel)]='value' placeholder='Select a range' [startDate]='start' [endDate]='end' [min]='minDate_s' [max]='maxDate_s' [minDays]='minDays' [maxDays]='maxDays'(change)="eJSGetDates($event)">
                <e-presets>
                    <e-preset label="Today" [start]='today' [end]='today'></e-preset>
                    <e-preset label="Yesterday" [start]='yesterday' [end]='yesterday'></e-preset>
                    <e-preset label="This Week" [start]='weekStart' [end]='weekEnd'></e-preset>
                    <e-preset label="This Month" [start]='monthStart' [end]='monthEnd'></e-preset>
                    <e-preset label="Last Month" [start]='lastStart' [end]='lastEnd'></e-preset>
                </e-presets>
            </ejs-daterangepicker>
        </div>
    </div>

For more information on the keyboard plugin, check out the documentation here.

Answer №2

Upon carefully reviewing the documentation for the plugin API at this link, I was able to find a solution to my initial query.

The plugin API offers a property called "allowEdit", which, when set to false, met my requirements perfectly. This setting prevented users from changing the input value directly but still allowed them to select dates from a modal popup, eliminating the need for a native keyboard plugin installation.

<div class="Datepicker" >
            <ejs-daterangepicker [allowEdit] = 'false' id='daterangepicker'  [(ngModel)]='value' placeholder='Select a range' [startDate]='start' [endDate]='end' [min]='minDate_s' [max]='maxDate_s' [minDays]='minDays' [maxDays]='maxDays'(change)="eJSGetDates($event)">
                <e-presets>
                    <e-preset label="Today" [start]='today' [end]='today'></e-preset>
                    <e-preset label="Yesterday" [start]='yesterday' [end]='yesterday'></e-preset>
                    <e-preset label="This Week" [start]='weekStart' [end]='weekEnd'></e-preset>
                    <e-preset label="This Month" [start]='monthStart' [end]='monthEnd'></e-preset>
                    <e-preset label="Last Month" [start]='lastStart' [end]='lastEnd'></e-preset>
                </e-presets>
            </ejs-daterangepicker>
        </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The datatable does not adjust to changes in page size

My jsfiddle example showcases different card boxes, and I am currently focusing on making the 'Table 1' box responsive. However, I have encountered an issue: Check out my jsfiddle example here code If you open the jsfiddle with a large enough ...

javascripthtmlcssbootstrap-4datatable

Use YUI to parse JSON data enclosed in square brackets and curly braces within a packet

Recently, I have been diving into the world of JSON, JavaScript, and YUI while working on a homework assignment. The JSON packet I am dealing with has the following structure: [{"id":"1234", "name":"some description","description":"url":"www.sd.com"}, {sa ...

javascriptajaxyui

Scrolling with Buttons in both Right and Left directions

I am working with three divs: left, middle, and right. The middle div will contain content, while the left and right divs are designated for buttons that will scroll the middle div. Specifically, I plan to display lists of pictures in the middle div. If a ...

javascriptjqueryhtmlcss

Having trouble with the Document.createElement function not functioning properly when trying to download a

ISSUE While my PDF download feature functions properly in Chrome, it encounters difficulty when attempting to work in IE 11/10/9. When using IE, I receive a security warning prompt. After selecting Yes to allow the download, nothing happens. SOURCE CODE ...

javascripthtmlreactjs

The app was rejected from the Play Store due to a breach of section 4.4 in the Developer Distribution Agreement

Just got an email notification that my application submission, Chami Browser, has been rejected due to violation of section 4.4 of the Developer Distribution Agreement. The reason for rejection is accessing YouTube videos in violation of their Terms of Se ...

androidhtmlwebviewyoutube

Having trouble with prettyphoto functionality

Seeking assistance as I am struggling to get this working Here is how I have set it up: <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/ ...

javascriptjquerycss

Guide to implementing Angular 2 lazy loading with the Visual Studio 2015 ASP.NET Core Template Pack

I am currently working on implementing router lazy loading in Angular 2. My goal is to be able to do something like this: const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full', { path: 'about&apos ...

angularvisual-studio-2015webpackasp.net-core

Menu sidebar in Libgdx

Despite reading numerous resources, I have yet to find the solution to my problem. I am attempting to achieve the following - https://i.sstatic.net/K7CSr.png Since I do not have enough reputation to upload images, I will try to describe it instead. I am ...

javaandroidmenulibgdxsidebar

Incorporating a counter feature into an Angular HTML document

In this section, I am displaying the restaurants that are filtered based on their name and address. If no name or address is provided, all restaurants are shown. However, I am facing an issue as I need to incorporate a counter to keep track of the remainin ...

angular

When I pass an array of objects to Firefox (using TypeScript) and retrieve the data, I find that I am unable to retrieve it in the form of an array of objects

When it comes to saving and retrieving data from a Firebase database, I seem to be encountering an issue where the type of data retrieved does not match what I am expecting. Let me break down what I am doing and the problem I am facing: Saving data To sa ...

jsonangulartypescripthttpget

Receiving the error notification from a 400 Bad Request

I'm having trouble showing the errors returned from an API on my Sign up form when a user submits invalid data. You can check out the error response in the console here: console ss This is my approach in RegisterComponent.ts: onSubmit() { this.u ...

angulartypescripterror-handling

Create a stylish frame for designated rows within a table

Col1 Col2 Col3 Col4 Col5 Col6 Row11 Row12 Row13 Row14 Row15 Row16 Row21 Row22 Row23 Row24 Row25 Row26 Row31 Row32 Row33 Row34 Row35 Row36 Looking for a way to add a border around rows with matching values in the first column, or around a specif ...

javascriptjqueryhtmljsp

In Angular, I aim to invoke the this.addDispatchToReceive method whenever the outcome is successful within each forEach iteration

How can I ensure that the values from this.stockItemDispatch are obtained in this.addDispatchToReceive(); during each iteration of a loop, instead of only getting the last stock value? The issue is that the subscribe function runs after the foreach cycle ...

c#.netangulartypescriptforeach

Having trouble with babel-loader, encountering an issue with UglifyJS (ES6) causing errors

Recently, I integrated the FlipClockJs vue component into my project and it was functioning properly during development when I executed yarn encore dev However, upon running yarn encore production An error cropped up as follows: ERROR Failed to ...

javascriptvue.jsyarnpkgflipclock

Restrict certain links from being clickable until the page has finished loading and all click events have been bound using

I developed a modal dialog plugin using jquery, designed to link to the click event of each <a> element with a specific class. This modal dialog uses AJAX to 'fetch' a page declared under the 'href' parameter of the <a> el ...

javascriptjquery

What steps can be taken to modify the base URL of angular-in-memory-web?

I recently started learning angular and I was following the standard angular material tutorial on the angular website. I came across the section "Get Data from server" where I created my in-memory dataservice like this. import { Injectable } from '@an ...

angularangular-in-memory-web-api

Is there a way to define type information for a global variable when utilizing dynamic import within a function?

Here is a simplified version of my server code: server.ts import google from "googleapis"; const androidPublisher = google.androidpublisher("v3"); app.use('something', function(req, res, n){ ... }) ...(only one of the dozens of other meth ...

javascripttypescript

Consolidate all REST service requests and match the server's response to my specific object model

My goal was to develop a versatile REST service that could be utilized across all my services. For instance, for handling POST requests, the following code snippet demonstrates how I implemented it: post<T>(relativeUrl: string, body?: any, params?: ...

angulartypescript

Encountering an issue when running the 'cypress open' command in Cypress

I am working with a Testing framework using node, cypress, mocha, mochawesome, and mochawesome-merge. You can check out the project on this github repo. https://i.sstatic.net/ItFpn.png In my package.json file, I have two scripts defined: "scripts": { ...

javascriptnode.jswindowsnpmcypress

Add CSS styles to the outermost container element when the slideshow is currently in use

On my homepage, I have a carousel featuring multiple slides. However, when the third slide appears in the carousel, the positioning of the carousel buttons within the div class="rotator-controls" shifts downward due to the space taken up by the image. My o ...

javascriptjquerycsscycle2