On IOS Angular Tap on overlay to close Datetimepicker is not working on Ios if we pass dateTimePickerStyle object to

[sinhapallav]

if we pass date time picker style object to DateTimePicker.pickDate tap on overlay to close datetime picker doesnot work on ios angular `const dateTimePickerStyle = DateTimePickerStyle.create(args.object as Button);

dateTimePickerStyle.buttonCancelTextColor = new Color('black');
dateTimePickerStyle.buttonOkTextColor = new Color('black');
dateTimePickerStyle.titleTextColor = new Color('black');
dateTimePickerStyle.buttonsBackgroundColor = new Color('white');
dateTimePickerStyle.dialogBackgroundColor = new Color('white');
dateTimePickerStyle.buttonsTextColor = new Color('white');
dateTimePickerStyle.spinnersBackgroundColor = new Color('white');
dateTimePickerStyle.spinnersTextColor = new Color('white');
dateTimePickerStyle.buttonCancelBackgroundColor = new Color('white');
dateTimePickerStyle.buttonOkBackgroundColor = new Color('white');

var date = new Date();
var firstday = new Date(date.getFullYear(), date.getMonth() ,1)
var lastday = new Date(date.getFullYear(), date.getMonth() + 1 ,0)

const title = "Please select the appointment date";   
title.replace(title, '<b>'+title+'</b>');

DateTimePicker.pickDate(
  {
    context: (args.object as Button)._context,
    date: this.appointmentDate != null ? new Date(this.appointmentDate) : new Date(),
    minDate: new Date(1900,1,1),
    maxDate: new Date(2099.12,31),
    title: title,
    okButtonText: 'Select',
    cancelButtonText: 'Cancel',
    locale: 'en',
  },      
  dateTimePickerStyle
)
  .then((result) => {
    if (result) {
      // handle the result
      var date = moment(result);
      this.appointmentDate = this.formatSelectedDate(date);
      this.openDatepicker();
    }
  })
  .catch((error) => {
    console.log("Error: " + error);
  });   

}`

stackblitz example https://stackblitz.com/edit/nativescript-stackblitz-templates-qfqw8r?file=src%2Fapp%2Fitem%2Fitems.component.html,src%2Fapp%2Fitem%2Fitems.component.ts&title=NativeScript%20Starter%20Angular

"dependencies": { "@angular/animations": "~12.0.0", "@angular/common": "~12.0.0", "@angular/compiler": "~12.0.0", "@angular/core": "~12.0.0", "@angular/forms": "~12.0.0", "@angular/platform-browser": "~12.0.0", "@angular/platform-browser-dynamic": "~12.0.0", "@angular/router": "~12.0.0", "@nativescript-community/ui-material-activityindicator": "^7.0.2", "@nativescript-community/ui-material-button": "^7.0.2", "@nativescript-community/ui-material-tabs": "^7.0.2", "@nativescript-community/ui-material-textfield": "^7.0.2", "@nativescript/angular": "~12.0.0", "@nativescript/core": "~8.3.5", "@nativescript/datetimepicker": "^2.1.9", "@nativescript/directions": "^2.0.1", "@nativescript/theme": "~3.0.1", "@nativescript/unit-test-runner": "^2.0.5", "@ngrx/effects": "^12.4.0", "@ngrx/store": "^12.4.0", "@nstudio/nativescript-checkbox": "^2.0.4", "material-design-icons": "^3.0.1", "moment": "^2.29.3", "nativescript-fonticon": "^2.0.2", "nativescript-modal-datetimepicker": "^2.1.5", "nativescript-ng2-fonticon": "^1.3.4", "nativescript-phone": "^3.0.2", "nativescript-ui-listview": "^10.0.2", "nativescript-ui-sidedrawer": "^10.0.1", "rxjs": "^6.6.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular/compiler-cli": "~12.0.0", "@nativescript/android": "8.2.2", "@nativescript/ios": "8.3.3", "@nativescript/types": "~8.2.0", "@nativescript/webpack": "~5.0.6", "@ngtools/webpack": "~12.0.0", "@types/jasmine": "3.7.2", "karma": "^6.3.17", "karma-jasmine": "4.0.1", "karma-nativescript-launcher": "^0.3.0", "karma-webpack": "5.0.0", "sass": "^1.35.2", "sass-loader": "^12.1.0", "typescript": "~4.2.0" },