當輸入在Ionic中觸發時關閉Android設備中的鍵盤

Question

我將syncfusion ej2 Calendar插件用於日期選擇器，但在這里，我僅使用范圍級別ex：今天或1個月或最后7天來自該插件的選項。 因此，插件本身在我觸發日歷時會提供下拉選項。

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

但是問題是，當我調用顯示的日期選擇器小鍵盤但我不想觸發小鍵盤時，我想在觸發日歷時隱藏小鍵盤。

Answer 1

您可以導入本機插件keyboard以手動顯示或隱藏keyboard ，以便嘗試此操作

使用此命令安裝插件ionic cordova plugin add cordova-plugin-ionic-keyboard

導入插件，並將其添加到ts文件中的constructor()中

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

constructor(private keyboard: Keyboard) { }

添加一個函數，當您單擊控件時，焦點事件觸發，此函數被調用並隱藏鍵盤

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

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

請參閱鍵盤插件的文檔在這里鍵盤插件

Answer 2

在參考了插件API的文檔后https://ej2.syncfusion.com/angular/documentation/api/daterangepicker/dateRangePickerModel/#allowedit

我為上述問題找到了解決方案。如果我們給了allowedit = false，則插件API“ allowEdit”提供了一些屬性。 我的要求得到滿足。 我們無法更改輸入值，但可以從模式彈出窗口中選擇日期。 我們不需要為鍵盤安裝本地插件。

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