How to hide native android keyboard in IONIC 2 when clicking on a text box?

Question

How to hide native android keyboard when clicking on text box using IONIC 2? I have installed IONIC keyboard plugin from https://ionicframework.com/docs/native/keyboard/ link and uses this.keyboard.close(); But still keyboard is opening. Help me how to close the keyboard. I am basically showing DOB from the datepicker plugin in a TEXTBOXenter image description here.

This is the ts file(datepicker1.ts)

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { DatePicker } from '@ionic-native/date-picker';
    import { Keyboard } from '@ionic-native/keyboard';
    @IonicPage()
@Component({
  selector: 'page-datepicker1',
  templateUrl: 'datepicker1.html',
})
export class Datepicker1Page {
  public today:any;
  constructor(public navCtrl: NavController, public navParams: NavParams,private datePicker: DatePicker,private keyboard: Keyboard) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Datepicker1Page');
  }
  openDatepicker()
  {

    this.keyboard.close();
    this.datePicker.show({
      date: new Date(),
      mode: 'date',
      androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
    }).then(
      date => {
        this.today=date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear()},
      err => console.log('Error occurred while getting date: ', err)
    );
  }

}

And this is the datepicker1.html page

<ion-header>
  <ion-navbar>
    <ion-title>datepicker page</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <ion-item>
        <ion-label>DOB</ion-label>
        <ion-input type="text" name="DOB" (click)="openDatepicker()" [(ngModel)]="today" ng-readonly></ion-input>
      </ion-item>
</ion-content>

Answer 1

You have missed to declare the today variable in the class and you missed to add disabled="true" in ion-input tag. Everything is working fine and I have tested it.

TS File

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { DatePicker } from '@ionic-native/date-picker';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public keyboard : Keyboard, public datePicker : DatePicker) {

  }

  today : any;
  openDatepicker(){
    this.keyboard.close();
    this.datePicker.show({
      date: new Date(),
      mode: 'date',
      androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
    }).then(
      date => {
        this.today=date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear()},
      err => console.log('Error occurred while getting date: ', err)
    );
  }

}

HTML File

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
      <ion-label>DOB</ion-label>
      <ion-input disabled="true" type="text" name="DOB" (click)="openDatepicker()" [(ngModel)]="today" ng-readonly></ion-input>
    </ion-item>
</ion-content>