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);
});
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);
}`
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" },