如何在 NativeScript 对话框中使用 DatePicker
How to use DatePicker in NativeScript dialogs
我在下面的 NativeScript/Angular
个应用程序中有一个 DatePicker
。
<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
并将其文件移动到 app 文件夹并从新路径导入如我预期的那样工作。
现在我根据文档更改了 App_Resources/Android/values-21/styles.xml
中的 <item name="android:datePickerMode">calendar</item>
,但仍然只显示微调器。
我已经为您创建了示例 here。
您需要使用 custom Dialog。
并且在ShowPicker函数中()
let options: ModalDialogOptions = {
viewContainerRef: this.viewContainerRef
};
this.modalService.showModal(DialogContent, options)
.then((dialogResult: string) => {
this.myForm.controls['transDate'].setValue(result);
this.result = dialogResult})
您可以在关闭回调中传递所选日期。
试试 nativescript-modal-datetimepicker 插件
tns plugin add nativescript-modal-datetimepicker
对于 2 年后才来看这个帖子的人来说,使用 NativeScript 的官方日期选择器是一个更好的选择:
https://github.com/NativeScript/plugins/tree/main/packages/datetimepicker
我错误地尝试了 nativescript-modal-datetimepicker 插件,不幸的是它在 iOS 14 崩溃了,作者似乎没有积极修复问题。
我在下面的 NativeScript/Angular
个应用程序中有一个 DatePicker
。
<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
并将其文件移动到 app 文件夹并从新路径导入如我预期的那样工作。
现在我根据文档更改了 App_Resources/Android/values-21/styles.xml
中的 <item name="android:datePickerMode">calendar</item>
,但仍然只显示微调器。
我已经为您创建了示例 here。 您需要使用 custom Dialog。
并且在ShowPicker函数中()
let options: ModalDialogOptions = {
viewContainerRef: this.viewContainerRef
};
this.modalService.showModal(DialogContent, options)
.then((dialogResult: string) => {
this.myForm.controls['transDate'].setValue(result);
this.result = dialogResult})
您可以在关闭回调中传递所选日期。
试试 nativescript-modal-datetimepicker 插件
tns plugin add nativescript-modal-datetimepicker
对于 2 年后才来看这个帖子的人来说,使用 NativeScript 的官方日期选择器是一个更好的选择:
https://github.com/NativeScript/plugins/tree/main/packages/datetimepicker
我错误地尝试了 nativescript-modal-datetimepicker 插件,不幸的是它在 iOS 14 崩溃了,作者似乎没有积极修复问题。