Как использовать DatePicker в диалогах NativeScript - PullRequest
Новая
       18

Как использовать DatePicker в диалогах NativeScript

0 голосов
/ 24 мая 2019

У меня есть DatePicker в одном из NativeScript/Angular приложений, как показано ниже. 

<StackLayout class="m-x-10 form" [formGroup]="myForm">
<DockLayout stretchLastChild="true">
        <Label text="Date" class="m-x-auto m-y-auto" dock="left"></Label>
        <StackLayout class="input-field">
          <DatePicker loaded="onDatePickerLoaded" formControlName="transDate" minDate="{{ minDate }}" maxDate="{{ maxDate }}"></DatePicker>
        </StackLayout>
      </DockLayout>
</StackLayout>

Я хочу показать DatePicker в диалоговых окнах и присвоить результат свойству формы группы, как показано ниже. 

<TextField formControlName="transDate" (tap)="showDatePicker()"></TextField>

showDatePicker() {
    let options = {
      title: "Transaction Date",
      message: "Select Date",
      cancelButtonText: "Cancel",
      actions: // need to show DatePicker here
    };
    action(options).then((result) => {
      if (result !== 'Cancel') {
        this.myForm.controls['transDate'].setValue(result);
      }
    });
  }

Как мне это сделать?

Как @Manoj предложил добавить tns plugin add nativescript-modal-datetimepicker и переместить его файлы в папку приложения, а импорт по новому пути работает, как я ожидал.

Теперь я изменил <item name="android:datePickerMode">calendar</item> в App_Resources/Android/values-21/styles.xml в соответствии с документом, но все еще показываю только счетчик.

Ответы [ 2 ]

0 голосов
/ 24 мая 2019

Попробуйте nativescript-modal-datetimepicker Плагин 

tns plugin add nativescript-modal-datetimepicker
0 голосов
/ 24 мая 2019

Я создал образец для вас здесь . Вам необходимо использовать настраиваемый диалог .

А в функции ShowPicker () 

let options: ModalDialogOptions = {
            viewContainerRef: this.viewContainerRef
        };

       this.modalService.showModal(DialogContent, options)
    .then((dialogResult: string) => {
 this.myForm.controls['transDate'].setValue(result);
 this.result = dialogResult})

Вы можете передать выбранную дату в режиме обратного вызова.

...