How to use DatePicker in NativeScript dialogs

Question

I have a DatePicker in one of NativeScript/Angular App like below.

<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>

I want to show DatePicker on dialogs and assign result to a formgroup property some thing like below.

<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);
      }
    });
  }

How do I do it?

As @Manoj suggested adding tns plugin add nativescript-modal-datetimepicker and moving its files to app folder and importing from new path is working as I expected.

Now I changed <item name="android:datePickerMode">calendar</item> in App_Resources/Android/values-21/styles.xml as per doc but still showing spinner only.

Answer 1

Try nativescript-modal-datetimepicker plugin

tns plugin add nativescript-modal-datetimepicker