Skip to content

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

Open
@sinhapallav

Description

@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" },

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions