javascript - Stäng tangentbord på Android-enhet när inmatning triggas i Ionic

Jag använder Syncfusion EJ2 Calendar-plugin för datepicker, men här använder jag endast nivåalternativ för intervall t.ex. idag eller 1 månad eller senaste 7 dagarna från den pluginen. Så pluginen själv tillhandahåller rullgardinsalternativ när jag aktiverar kalendern.

<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>

men saken är att när jag öppnar den datumväljaren visas tangentbordet men jag vill inte att tangentbordet ska öppnas, jag vill dölja tangentbordet när jag aktiverar kalendern.

Svar #1

Du kan importera det inbyggda tillägget keyboard för att visa eller dölja keyboard manuellt så att du kan prova detta

Installera pluginet med det här kommandot ionic cordova plugin add cordova-plugin-ionic-keyboard

Importera pluginet och lägg till dem i constructor() i din ts-fil

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

constructor(private keyboard: Keyboard) { }

Lägg till en funktion och när du klickar på kontrollen utlöses fokushändelsen och denna funktion anropas och döljer tangentbordet

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

I html

<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>

Se dokumentationen för tangentbordsplugin här tangentbordsplugin

Svar #2

Efter granskad dokumentation av plugin-API https://ej2.syncfusion.com/angular/documentation/api/daterangepicker/dateRangePickerModel/#allowedit

Jag hittade en lösning på min ovanstående fråga. Det finns några egenskaper som tillhandahålls av plugin-API:et "allowEdit" om vi har satt allowEdit=false. Mitt krav uppfylls. Vi kan inte ändra inmatningsvärdet, men vi kan välja datum från den modala popupen. Vi behöver inte installera det inbyggda pluginet för tangentbordet.

<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>