2017-09-06 3 views
0

내가 입력에 클릭 이벤트를 처리하여 이온 2의 기본 날짜 선택기를 사용하는 것을 시도하고 보여 방지하지 않습니다읽기 전용 속성은 키보드가

<ion-item> 
    <ion-label stacked>Start</ion-label> 
    <ion-input type="datetime" readonly="true" placeholder="Choose a date" formControlName="date" (click)="onDateClick($event)" tappable></ion-input> 
    </ion-item> 

그러나 readonly 속성은하지 않는 것 키보드가 처음으로 표시되는 것을 방지하려면 원래 날짜 선택 도구를 표시하려면 다시 클릭해야합니다 (onDateClick($event)에서 처리).

나는이 첫 공연을 방지하는 방법 스타일이 다른과 반응성 양식을 사용할 때 좋은 패턴 아니다처럼 어떻게 든 보이지만 작동 disabled 재산 ...

어떤 생각을 사용하려 키보드?

EDIT ***** ***** 여기서

onDateClick 함수

onDateClick(e: Event) { 
    console.log('NewEventPage#onDateClick'); 

    if (this.platform.is('cordova')) { 
     this.datePicker.show({ 
     date: new Date(), 
     mode: 'datetime', 
     allowOldDates: false 
     }).then(
     date => { 
      console.log('Picked date ', date); 
      this.startDate = moment(date); 
      this.newEventForm.get('date').setValue(moment(date).format('LLLL')); 
     }, 
     err => console.log('Error occurred while getting date: ', err) 
    ); 
    } else { 
     let tmp = new Date(); 
     this.startDate = moment(tmp); 
     this.newEventForm.get('date').setValue(moment(tmp).format('LLLL')); 
    } 
    } 

답변

0

않습니다처럼 수행

<ion-item> 
    <ion-label stacked>Start</ion-label> 
    <ion-input type="datetime" [readonly]="true" placeholder="Choose a date" formControlName="date" (click)="onDateClick($event)" tappable></ion-input> 
    </ion-item> 

readonly 이온의 입력 속성 인 그 이유는 그것이 괄호 안에 쓰여 져야하기 때문입니다. 자세한 내용은 here을 참조하십시오.

+0

문제는 솔루션과 함께 계속 발생합니다 (실제로 구현하기에 적합한 것처럼 보입니다). –

+0

@Manuel 클릭 이벤트에서 정확히 무엇을하고 있습니까? –

+0

클릭 이벤트 기능이 무엇인지 알 수 있도록 내 게시물을 업데이트했습니다. –

관련 문제