首页 > 解决方案 > 如何在 NativeScript 对话框中使用 DatePicker

问题描述

我有一个像下面这样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 并将结果分配给 formgroup 属性,如下所示。

<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

标签: angularnativescriptangular2-nativescript

解决方案


对于那些在 2 年后来到这个线程的人来说,使用 NativeScript 的官方日期选择器是一个更好的选择:

https://github.com/NativeScript/plugins/tree/main/packages/datetimepicker

我犯了一个错误,首先尝试了 nativescript-modal-datetimepicker 插件,不幸的是它在 iOS 14 上崩溃了,作者似乎并没有积极修复问题。


推荐阅读