Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

• Android

Please, provide the following version numbers that your issue occurs with:

• CLI: tns v5.0.1
• Cross-platform modules: "version": "5.0.2"
• Runtime(s):

"tns-ios": {
    "version": "5.0.0"
},
"tns-android": {
    "version": "5.0.0"
}

• Plugin(s):

"dependencies": {
    "@vue/devtools": "5.0.0-beta.3",
    "axios": "^0.18.0",
    "nativescript-background-http": "^3.3.1",
    "nativescript-checkbox": "^3.0.3",
    "nativescript-loading-indicator": "^2.4.0",
    "nativescript-mediafilepicker": "^2.0.14",
    "nativescript-modal-datetimepicker": "^1.1.10",
    "nativescript-socket.io": "^0.9.0",
    "nativescript-theme-core": "^1.0.4",
    "nativescript-toast": "^1.4.6",
    "nativescript-vue": "^2.0.0",
    "nativescript-vue-devtools": "^1.0.0",
    "net": "^1.0.2",
    "request": "^2.88.0",
    "tls": "0.0.1",
    "tns-core-modules": "^5.0.2",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.2",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "lazy": "1.0.11",
    "nativescript-dev-webpack": "next",
    "nativescript-vue-template-compiler": "^2.0.0",
    "nativescript-worker-loader": "~0.9.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.1.0",
    "terser-webpack-plugin": "^1.1.0",
    "vue-loader": "^15.2.6",
    "webpack": "^4.16.4",
    "webpack-bundle-analyzer": "~2.13.1",
    "webpack-cli": "^3.1.0"
  }

Please, tell us how to recreate the issue in as much detail as possible.

1. Install this plugin tns plugin add nativescript-modal-datetimepicker
2. Configure style inside resource folder: (As instructed in official documentation)

<!-- Default style for DatePicker - in spinner mode -->
<style name="SpinnerDatePicker" parent="android:Widget.Material.Light.DatePicker">
    <item name="android:datePickerMode">calendar</item>
</style>
 
<!-- Default style for TimePicker - in spinner mode -->
<style name="SpinnerTimePicker" parent="android:Widget.Material.Light.TimePicker">
    <item name="android:timePickerMode">clock</item>
</style>

2. In your NativeScript-Vue component import and initialise dependency:

const ModalPicker = require("nativescript-modal-datetimepicker").ModalDatetimepicker
const picker = new ModalPicker()

3. on Click any method, run this code:

     picker.pickDate({
        title: "Select Your Birthday",
        theme: "light",
        maxDate: new Date()
      }).then(result => {
        // Note the month is 1-12 (unlike js which is 0-11)
        console.log(
          "Date is: " + result.day + "-" + result.month + "-" + result.year
        )
        var jsdate = new Date(result.year, result.month - 1, result.day);
      }).catch(error => {
        console.log("Error: " + error);
      })

Is there any code involved?

Entire component code is-

<template>
  <StackLayout
    class="field-item">
    <Label class="label"
      v-if="field.title"
      :text="field.title" />
    <TextField :text="date"
      @tap="selectDate"
      class="select"
      :editable="false"
      :hint="field.title" />
  </StackLayout>
</template>

<script>
const ModalPicker = require("nativescript-modal-datetimepicker").ModalDatetimepicker
const picker = new ModalPicker()

export default {
  name: 'date',
  props: ['field'],
  data () {
    return {
        field: {
            title: 'Date of Birth'
        }
    }
  }
  methods: {
    selectDate: function () {
      picker.pickDate({
        title: "Select Your Birthday",
        theme: "light",
        maxDate: new Date()
      }).then(result => {
        // Note the month is 1-12 (unlike js which is 0-11)
        console.log(
          "Date is: " + result.day + "-" + result.month + "-" + result.year
        )
        var jsdate = new Date(result.year, result.month - 1, result.day);
      }).catch(error => {
        console.log("Error: " + error);
      })
    }
  },
  }
}
</script>

Final Result:

Getting the following error on iOS and datepicker is not working

CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:1486:24: ERROR TypeError: _co.pickDate is not a function. (In '_co.pickDate()', '_co.pickDate' is undefined)

Is it possible to configure the format "Date + Time" together ? See attach.

If no, is planned this extension?

hello, tanks for the plugin, i use the 24h time format, my problem is that for one digit times the TextField associated to the dtimepicker dusplays just one digit, i.e. for time 2 it displays 2 and not 02, i've tried with a mask plugin but i have no good results, how can i fix it? manually workaround?

than you

I have error when i use timePicker

An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException: 
Calling js method onTouch failed

TypeError: Cannot read property 'is24HourView' of undefined
File: "file:///data/data/org.nativescript.mads/files/app/tns_modules/tns-core-modules/ui/gestures/gestures.js, line: 229, column: 40

StackTrace: 
	Frame: function:'ModalDatetimepicker.pickTime', file:'file:///data/data/org.nativescript.mads/files/app/tns_modules/nativescript-modal-datetimepicker/modal-datetimepicker.js', line: 48, column: 39
	Frame: function:'exports.selectStartTime', file:'file:///data/data/org.nativescript.mads/files/app/views/sales/addplacement.js', line: 129, column: 11
	Frame: function:'_executeCallback', file:'file:///data/data/org.nativescript.mads/files/app/tns_modules/tns-core-modules/ui/gestures/gestures.js', line: 283, column: 27
	Frame: function:'TapAndDoubleTapGestureListenerImpl.onSingleTapUp', file:'file:///data/data/org.nativescript.mads/files/app/tns_modules/tns-core-modules/ui/gestures/gestures.js', `l

Make sure to check the demo app(s) for sample usage

✅

Make sure to check the existing issues in this repository

✅

If the demo apps cannot help and there is no issue for your problem, tell us about it

On android tablets, the last row of the calendar view is cut off.

Which platform(s) does your issue occur on?

• Android
• Android version: 8.1.0
• Android emulator & device: Nexus 9 API 27

Please, provide the following version numbers that your issue occurs with:

• CLI: 5.0.2
• Cross-platform modules: 5.2.2
• Runtime(s):
  • iOS: 5.1.0
  • Android: 5.1.0

Please, tell us how to recreate the issue in as much detail as possible.

Open the date picker on an android tablet...

Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

• iOS/Android/Both
• iOS/Android versions
• emulator or device. What type of device?

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

Hello there

When I select the date to March 30, 1983, It will change to March 31, 1983 automatically. also when I select March 31, 1983 it will change to April 1, 1983.

Which platform(s) does your issue occur on?

• iPhone 6s iOS 12.3.1

Please, provide the following version numbers that your issue occurs with:

• CLI: 5.4.0
• Cross-platform modules:"6.0.0-next-2019-05-31-141709-01"
• Runtime(s): ```
  "tns-android": {
  "version": "5.4.0"
  },
  "tns-ios": {
  "version": "5.4.2"
  }

- Plugin(s): ```
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/http": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "moment": "^2.24.0",
    "nativescript-angular": "^7.2.1",
    "nativescript-camera": "^4.1.1",
    "nativescript-checkbox": "^3.0.3",
    "nativescript-cognito": "^1.1.2-alpha",
    "nativescript-drop-down": "^4.0.1",
    "nativescript-facebook": "^2.3.1",
    "nativescript-gif": "^4.0.2",
    "nativescript-grid-view": "^5.0.0",
    "nativescript-image": "^2.1.3",
    "nativescript-imagepicker": "^6.0.6",
    "nativescript-iqkeyboardmanager": "^1.3.0",
    "nativescript-localstorage": "^2.0.0",
    "nativescript-masked-text-field": "^4.0.1",
    "nativescript-modal-datetimepicker": "^1.2.0",
    "nativescript-ngx-shadow": "^6.4.0",
    "nativescript-nsjumioplugin": "^1.0.4",
    "nativescript-onesignal": "^1.0.8",
    "nativescript-phone": "^1.4.0",
    "nativescript-plugin-firebase": "^8.3.2",
    "nativescript-range-seek-bar": "^1.0.3",
    "nativescript-ripple": "^2.1.0",
    "nativescript-snackbar": "^4.1.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-autocomplete": "^3.11.0",
    "nativescript-ui-calendar": "^3.10.0",
    "nativescript-ui-listview": "^5.1.1",
    "nativescript-urlhandler": "^1.3.0",
    "reflect-metadata": "~0.1.13",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.4.0",
    "tns-core-modules": "^6.0.0-next-2019-05-22-144539-02",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~7.2.0",
    "@nativescript/schematics": "~0.5.0",
    "@ngtools/webpack": "~7.2.0",
    "@types/node": "^10.12.19",
    "babel-traverse": "^6.26.0",
    "babel-types": "^6.26.0",
    "babylon": "6.18.0",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "^1.6.0",
    "nativescript-dev-typescript": "^0.8.0",
    "nativescript-dev-webpack": "^0.22.0-next-2019-05-10-134032-02",
    "node-sass": "^4.11.0",
    "tns-platform-declarations": "^5.1.2",
    "typescript": "~3.1.1"
  },
  "scripts": {
    "start": "tns run android --syncAllFiles --env.dev --env.hmr"
  }

Is there any code involved?

    const maxDate = new Date();
    maxDate.setFullYear( maxDate.getFullYear() - 21 );

    const picker = new ModalDatetimepicker();
    picker.pickDate({
      maxDate,
      startingDate: this.app.date_of_birth,
      theme: "light",
      title: "Select your Birthday",
    }).then( (result) => {
      if (result) {
        console.log("result@pickDate", result);
        this.app.date_of_birth = new Date(result.year, result.month - 1, result.day);
      }
    }).catch( (error) => {
      console.log(error);
    });


        <TextField class="input input-field" automationText="InputTextDateOfBirth" text="{{ app.date_of_birth | date: 'MM/dd/yyyy' }}"
          (tap)="openBirthdayPicker($event)" editable="false"></TextField>

This is Sexy. Thanks @davecoffin
🎉

I have a use case where I need to programmatically close the dialog after it has been opened if a certain event happens before choosing time. Currently, I can see that a close method is exposed for iOS, but not Android. I think this might be a useful thing to have.

Also, any ideas how I can work around it in the meantime?

Which platform(s) does your issue occur on?

• iOS

Please, tell us how to recreate the issue in as much detail as possible.

Install the plugin and run on ios.

Error thrown inside the debugger

[Graphics] UIColor created with component values far outside the expected range, Set a breakpoint on UIColorBreakForOutOfRangeColorComponents to debug. This message will only be logged once.

Findings

Every parameter passed to UIColor must be between 0 and 1 and not 0 to 255

Is there any code involved?

I was able to resolve the issue by mapping the previous values between 0 and 255 to between 0 and 1 but am unable to make the pull request due to permissions.
The fix that worked for me was changing the following in src/modal-datetimepicker.ios.ts
Line 239

UIColor.colorWithRedGreenBlueAlpha(0, 153, 255, 1),

to

UIColor.colorWithRedGreenBlueAlpha(0, .6, 1, 1),

It would be nice to have an option like timeFormat or something to switch between 12 and 24 hour formats.

Hi, how do I style the Android modal picker(s)? I'd like to change the colours. Please advise.

Hi, i hope someone can clarify this for me. i use this plugin and return the value of the result for the date picker. so the result is {"day":13,"month":4,"year":2019}. the month is returning only one digit. is it possible if i want the month format to be 04 instead of 4?

If a soft keyboard is opened on iOS before the datepicker gets triggered, the keyboard hides the datepicker. In Android the keyboard is automatically hidden.

In some cases the users cannot even see that the datepicker is hidden behind the keyboard.
Especially when the title is not set or visible due to the device theme config.

Is it possible to implement that the softkeyboard gets hidden in the plugin?

Same as #62 but no answer found...
So I try :)

In the documentation the only options available are:

export interface PickerOptions {
  title?: string; // iOS ONLY: The title to display above the picker, default hidden.
  theme?: string; // iOS ONLY: avalible options: none, extralight, light, regular, dark, extradark and prominent.
  maxDate?: Date;
  minDate?: Date;
  startingHour?: number; // Ignored on pickDate()
  startingMinute?: number; // Ignored on pickDate()
  startingDate?: Date; // Ignored on pickTime()
  datePickerMode?: string; // Android ONLY: set this to "spinner" to see spinner for DatePicker, other option is "calendar" (which is the default)
}

I think it's good to add an initialDate and initialTime or defaultDate and defaultTime to set the initial value of the pickers.

It would be awesome if there were a way to limit the time range on the slider similar to the minDate and maxDate

Which platform(s) does your issue occur on?

• iOS

Please, provide the following version numbers that your issue occurs with:

• CLI: 6.0.2

Please, tell us how to recreate the issue in as much detail as possible.

I'd like to be able to make my own theme, for instance I'd like to change the font of the title text on iOS as it doesn't match the font of my app.

Is there a way to do it ?
Thanks

nativescript-modal-datetimepicker displays week days and months in English. Is there any way to force using another language ? French for example.

Hi,
Is is possible to set default date / time while show the picker ?

Which platform(s) does your issue occur on?

iOS emulator version 9.3
iOS device version 9.2.1
iOS device model me432b/a (iPhone 5s)

Please, provide the following version numbers that your issue occurs with:

It's a NativeScript Angular 5 project

tns --version
3.4.3
tns-ios
3.4.1

Packages Used

"nativescript-modal-datetimepicker": "^1.1.2",
"tns-core-modules": "^3.4.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"moment": "^2.18.1",

Steps to reproduce the bug

Tap on a TextField to fire the modal. It works like charm for iOS > 9.x, but on 9.x the error -[UILabel setAdjustsFontForContentSizeCategory:]: unrecognized selector sent to instance 0x7fb1b3ee18e0 is printed out on the console.

Is there any code involved?

<TextField (ngModelChange)="onInputChange()" editable="false" [text]="personalInfo.dateOfBirth | date:'d MMMM yyyy'" (tap)="openDatePicker()"></TextField>

    public openDatePicker(): void {
        const picker = new ModalPicker.ModalDatetimepicker();
        picker.pickDate({
            theme: 'dark',
            maxDate: new Date(),
            is24HourView: false
        }).then((result) => {
            this.personalInfo.dateOfBirth = moment(result).toDate();
        }).catch((error) => {
            this.handleError(error);
        })
    }

I'm getting the following error when calling the .pickDate()

Error: TypeError: application.systemAppearance is not a function. (In 'application.systemAppearance()', 'application.systemAppearance' is undefined)
Can't end BackgroundTask: no background task exists with identifier 2 (0x2), or it may have already been ended. Break in UIApplicationEndBackgroundTaskError() to debug.

Which platform(s) does your issue occur on?

• iOS

Please, provide the following version numbers that your issue occurs with:

{
"nativescript": {
"tns-android": {
"version": "6.1.2"
},
"tns-ios": {
"version": "6.1.1"
}
},
"dependencies": {
"@angular/animations": "~8.0.0",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/http": "8.0.0-beta.10",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"@nstudio/nativescript-checkbox": "^1.0.0",
"@nstudio/nativescript-loading-indicator": "^1.0.0",
"@proplugins/nativescript-cfalert-dialog": "^2.0.1",
"@proplugins/nativescript-drop-down": "^7.1.0",
"@proplugins/nativescript-keyboardshowing": "^2.1.0",
"base-64": "^0.1.0",
"moment": "^2.19.1",
"nativescript-angular": "8.0.2",
"nativescript-background-http": "^3.3.0",
"nativescript-barcodescanner": "^3.1.3",
"nativescript-bitmap-factory": "^1.8.1",
"nativescript-bluetooth": "^2.0.0-beta.27",
"nativescript-blur": "^2.0.0",
"nativescript-directions": "^1.1.2",
"nativescript-drop-down": "^3.2.5",
"nativescript-fancyalert": "^3.0.6",
"nativescript-feedback": "^1.2.0",
"nativescript-fingerprint-auth": "^6.2.0",
"nativescript-geolocation": "^5.1.0",
"nativescript-google-maps-sdk": "^2.8.1",
"nativescript-imagecropper": "^1.0.4",
"nativescript-imagepicker": "^7.0.0",
"nativescript-iqkeyboardmanager": "^1.5.1",
"nativescript-local-notifications": "^4.0.1",
"nativescript-location": "^0.1.3",
"nativescript-modal-datetimepicker": "^1.2.2",
"nativescript-ng-ripple": "^2.0.1",
"nativescript-ngx-fonticon": "^4.2.0",
"nativescript-oauth": "^2.0.1",
"nativescript-permissions": "^1.3.7",
"nativescript-secure-storage": "^2.3.0",
"nativescript-ssl-pinning": "^1.1.4",
"nativescript-theme-core": "^1.0.4",
"nativescript-ui-listview": "^8.0.1",
"nativescript-ui-sidedrawer": "^8.0.1",
"nativescript-websockets": "^1.3.4",
"reflect-metadata": "~0.1.8",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.2",
"tns-core-modules": "~6.1.0",
"zone.js": "^0.9.1"
},
"devDependencies": {
"@angular/compiler-cli": "8.0.0",
"@ngtools/webpack": "8.0.0",
"nativescript-dev-webpack": "~1.2.0",
"tns-platform-declarations": "^6.0.1",
"typescript": "~3.4.5"
}
}

Is there any code involved?

import * as ModalPicker from 'nativescript-modal-datetimepicker';
...
var picker = new ModalPicker.ModalDatetimepicker();
		picker
		.pickDate({
		  title: "Select Your Birthday",
		  theme: "dark",
		  
		  maxDate: maxDate,
		  minDate: minDate,
		  doneLabelColor: new Color('#FFFFFF')
		})
		.then(result => {
		 ...
		})
		.catch(error => {
		  ...
		});

Hi,

There is way to set disabled dates for datepicker and disabled time for the timepicker ?

Thanks

There's a simple issue that breaks compatibility with iOS prior to v10, due to the use of:

https://developer.apple.com/documentation/uikit/uicontentsizecategoryadjusting/1771731-adjustsfontforcontentsizecategor

which is iOS 10.0+ only.

My suggestion is to check for iOS version and only use that attribute if version is 10+.
Something in the line of:

  import * as platformModule from "tns-core-modules/platform";

  var sdkVer=  parseFloat(platformModule.device.sdkVersion);
  if (sdkVer >= 10 ) {
          titleLabel.adjustsFontForContentSizeCategory = true;
  }

or similar.
Nativescript mentions graceful degradation:
https://docs.nativescript.org/runtimes/ios/Requirements

but I could not find an elegant way to detect if a given attribute exists or not, instead of checking for the OS version.

Update:
The "more elegant" way may be using respondsToSelector :

if (titleLabel.respondsToSelector(“adjustsFontForContentSizeCategory”)) {
               titleLabel.adjustsFontForContentSizeCategory = true;
} 

Choosing one way or the other, may be a matter of performance.

I have a situation where I need the month values and day/year number values localized. Is this achievable with this plugin?

I downloaded and have played around with the demo, but found that even when changing the OS language, the datepicker is still using english resource strings.

I'm using tns 3.4.0 across the board right now.

Is this plugin compatible with the latest angular versions?

Thanks!

starting hour and starting minute default to current hour/minute when set to zero.

For example, when I pass in the equivalent of 2:00, I get hour=2 and minute=current minute.

On the android side, that can be fixed by changing these statements:

        var hour = options.startingHour
            ? +options.startingHour
            : now.get(Calendar.HOUR_OF_DAY);
        var minute = options.startingMinute
            ? +options.startingMinute
            : now.get(Calendar.MINUTE);

to:

        var hour = (options.startingHour!=null && options.startingHour>=0)
            ? +options.startingHour
            : now.get(Calendar.HOUR_OF_DAY);
        var minute = (options.startingMinute!=null && options.startingMinute>=0)
            ? +options.startingMinute
            : now.get(Calendar.MINUTE);

iOS is very similar

Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

Android 8.0 (OnePlus3 - OxygenOS 5.0.2

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)

nativescript - 3.4.3 - Up to date
tns-core-modules - 3.4.1 - Up to date
tns-android - 3.4.2 - Up to date
tns-ios - 3.4.1 - Not installed

Plugins:
nativescript-modal-datetimepicker - v1.1.1

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

1. Simply create a new javascript project
2. Add nativescript-modal-datetimepicker plugin
3. Add code to view picker on button click

You will see that the header is offset to the left showing white background on right side. Refer the following screenshot,

I could not find any way to rectify this issue, hence reporting it to you. Also, please please provide code to style the datepicker/timepicker using styles.xml or even programmatically.

I tried adding following code to styles.xml inside values-21 folder, but no effect,

<style name="SpinnerDatePicker" parent="android:Widget.Material.Light.DatePicker">
        <item name="android:datePickerMode">calendar</item>
        <item name="android:background">@color/android:white</item>
        <item name="android:textColorPrimaryInverse">@color/ns_accent</item>
        <item name="android:textColorPrimary">@color/ns_accent</item>
        <item name="android:textColorSecondary">@color/ns_accent</item>
        <item name="android:textColorSecondaryInverse">@color/ns_accent</item>
        <item name="android:textColorTertiary">@color/ns_accent</item>
        <item name="android:headerBackground">@color/android:white</item>
        <item name="android:yearListSelectorColor">#0000ff</item>
        <item name="android:dayOfWeekBackground">#ff5555</item>
    </style>

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

I would like to know how to detect the dialog is closed caused by CANCEL button or Android back button!

It is because I have allocated some resources before open the dialog. But, cannot release them if user tap CANCEL.

Thank you very much!

Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

• Android
• Android Version 7.0
• device

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) 3.3.0
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project) 3.3.0
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project) 3.3.1
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)
  "dependencies": {
  "@angular/animations": "4.4.6",
  "@angular/common": "4.4.6",
  "@angular/compiler": "4.4.6",
  "@angular/core": "4.4.6",
  "@angular/forms": "4.4.6",
  "@angular/http": "4.4.6",
  "@angular/platform-browser": "4.4.6",
  "@angular/router": "4.4.6",
  "moment": "^2.19.3",
  "nativescript-angular": "4.4.1",
  "nativescript-cardview": "^2.0.4",
  "nativescript-fancyalert": "^1.1.2",
  "nativescript-loading-indicator": "^2.4.0",
  "nativescript-material-icons": "^1.0.3",
  "nativescript-modal-datetimepicker": "^1.0.3",
  "nativescript-ngx-fonticon": "^4.0.0",
  "nativescript-plugin-firebase": "5.0.2",
  "nativescript-ripple": "^2.0.0",
  "nativescript-theme-core": "1.0.4",
  "reflect-metadata": "0.1.10",
  "rxjs": "5.5.2",
  "tns-core-modules": "3.3.0",
  "zone.js": "0.8.18"
  },
  "devDependencies": {
  "babel-traverse": "6.4.5",
  "babel-types": "6.4.5",
  "babylon": "6.4.5",
  "lazy": "1.0.11",
  "nativescript-dev-sass": "^1.3.5",
  "nativescript-dev-typescript": "0.5.1",
  "typescript": "2.4.2"
  },

Please, tell us how to recreate the issue in as much detail as possible.

Just launch the timePickerDialog and the shown time is not set to the current time

Is there any code involved?

Hello there
I'd like to remove cancel button. is there a way to that?
I have two datepicker on inside of together, when user close both modals by cancel button, my app will be freezed for some seconds so I want to remove the cancel button.
thanks

Is there a way to change the time's minute interval?

When I choose a date it doesn't appear in the textfield

In my file prenotaritiro.component.html I have
<TextField hint="Data del ritiro" [(ngModel)]="data" (tap)="pickDate()" editable="false"></TextField>

And in my prenotaritiro.component.ts I have

pickDate() {
    const picker = new ModalPicker.ModalDatetimepicker();
    picker.pickDate({
      title: 'Data del ritiro',
      theme: 'dark',
      is24HourView: false,
      minDate: new Date()
    }).then((result) => {
      console.log(result);
      this.data = result['year'] + '-' + result['month'] + '-' + result['day'];
    }).catch((error) => {
      console.log('Error: ' + error);
    });
  }

Where am I wrong?

Which platform(s) does your issue occur on?

• iOS and Android
• android emulator and device (iPhone X)
• latest release

Steps to Reproduce
Step 1: Inside options parameter of pickTime() method, set the startingMinute to 0 and startingHour to 11 in order to display 11:00
Expected Behavior: Spinner shows minute 00.
Result: Spinner shows the current minute instead of 00. Displayed hour is correct. (eg. 11:06)
Workaround: Set startingMinute to 60 in order to display it as 00.

Which platform(s) does your issue occur on?

iOS

Please, provide the following version numbers that your issue occurs with:

1.2.1 of Datepicker, 13.1 for iOS.

Please, tell us how to recreate the issue in as much detail as possible.

Open up a date picker, the picker is there as I can scroll the dates and feel the haptic feedback, however nothing is rendered inside the modal it is completely blank

Which platform(s) does your issue occur on?

• Android
• Android 6.0
• Moto E2

Please, provide the following version numbers that your issue occurs with:

• CLI: 4.1.2
• Cross-platform modules: 4.1.1
• Runtime(s): 4.1.3
• Plugin(s):
  "dependencies": { "@angular/animations": "~6.0.0", "@angular/common": "~6.0.0", "@angular/compiler": "~6.0.0", "@angular/core": "~6.0.0", "@angular/forms": "~6.0.0", "@angular/http": "~6.0.0", "@angular/platform-browser": "~6.0.0", "@angular/platform-browser-dynamic": "~6.0.0", "@angular/router": "~6.0.0", "nativescript-angular": "~6.0.0", "nativescript-modal-datetimepicker": "^1.1.3", "nativescript-theme-core": "~1.0.4", "reflect-metadata": "~0.1.8", "rxjs": "~6.1.0", "tns-core-modules": "~4.1.0", "zone.js": "^0.8.26" }, "devDependencies": { "babel-traverse": "6.26.0", "babel-types": "6.26.0", "babylon": "6.18.0", "lazy": "1.0.11", "nativescript-dev-typescript": "~0.7.0", "typescript": "~2.7.2" }

Please, tell us how to recreate the issue in as much detail as possible.

Create a new project and install this plugin.
Execute: tns run android

Is there any code involved?

Test.zip

Make sure to check the demo app(s) for sample usage

Yes

Make sure to check the existing issues in this repository

Yes

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.
If I select minDate (10 years ago) and maxDate (today's date) the Picker crashes with no error. Example:
CONSOLE LOG: Thu Sep 30 2010 09:58:27 GMT-0400 (EDT) -> minDate
CONSOLE LOG: Wed Sep 30 2020 09:58:27 GMT-0400 (EDT) -> maxDate

Which platform(s) does your issue occur on?

• iOS (Haven't tested on Android)
• emulator

NS 7.0.8, Angular 10.1.0, @nativescript/ios 7.0.0

Plugin Version: 2.0.1

Which platform(s) does your issue occur on?

• Android - 8
• emulator or device. What type of device? Emulator - Google Pixel

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) 6.7.8
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)
  "tns-core-modules": "6.5.0",
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
  "tns-android": {
  "version": "6.5.3"
  }
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)
  dependencies
  "@angular/animations": "9.1.0",
  "@angular/common": "9.1.0",
  "@angular/compiler": "9.1.0",
  "@angular/core": "9.1.0",
  "@angular/forms": "9.1.0",
  "@angular/platform-browser": "9.1.0",
  "@angular/platform-browser-dynamic": "9.1.0",
  "@angular/router": "9.1.0",
  "@nativescript/angular": "~9.0.0",
  "@nativescript/core": "~6.5.5",
  "@nativescript/schematics": "9.0.0",
  "@nativescript/theme": "~2.2.1",
  "nativescript-angular": "9.0.0-next-2019-11-12-155500-01",
  "tns-core-modules": "6.5.0",
  devDependencies
  "@angular-devkit/build-angular": "0.901.0",
  "@angular/cli": "9.1.0",
  "@angular/compiler-cli": "9.1.0",
  "@angular/language-service": "9.1.0",
  "@nativescript/schematics": "~2.0.0",
  "@nativescript/tslint-rules": "~0.0.5",
  "@ngtools/webpack": "9.1.0",

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

Date and Time picker working are working fine as per the guideline #8 .
But 'ok' and 'cancel' button color is not set. How to set color and change text.

@davecoffin @pedromorgan @Logikgate @KevinBeckers @sebj54

This plugin is freakin awesome )))
please keep the support and care for it.. thanks a million!

I'm using this plugin on other pages as well but on one particular page this is appearing like this?
Any Help! Thanks!

If the demo apps cannot help and there is no issue for your problem, tell us about it

The plugin worked fine on NS6. But after updating to NS7 the plugin's UI doesn't fully load and the app crashes when the "Cancel" or "Done" buttons are tapped.

Which platform(s) does your issue occur on?

• iOS 14
• emulator: iPhone 8

Please, provide the following version numbers that your issue occurs with:

• CLI: 7.0.8
• Cross-platform modules: 7.0.3
• Runtime(s): @nativescript/ios is 7.0.0
• Plugin(s):

  "dependencies": {
    "@nativescript/core": "~7.0.0",
    "@nativescript/theme": "~2.3.0",
    "nativescript-modal-datetimepicker": "^1.2.2",
    "nativescript-vue": "~2.8.0"
  },
  "devDependencies": {
    "@babel/core": "~7.1.0",
    "@babel/preset-env": "~7.1.0",
    "@nativescript/ios": "7.0.0",
    "@nativescript/webpack": "~3.0.0",
    "babel-loader": "~8.0.0",
    "nativescript-vue-template-compiler": "~2.8.0",
    "node-sass": "^4.7.1",
    "vue-loader": "~15.9.3"
  },

Please, tell us how to recreate the issue in as much detail as possible.

Add the component to a page per the instructions and run the app. When attempting to load the plugin the screen looks like the following. Clicking either button crashes the app.

Is there any code involved?

Download a sample project

I have installed the new release 1.2.0 and datePickerMode = 'calendar' don't works, while in 1.1.10 it worked fine.
Why?

If i modify the default value in "calendar" (spinner"
-> App_Resources/Android/values-21/styles.xml) then show calendar.

Hi Dave,
Could you add an installation & example doc for the Angular NS?
Thx!

Which platform(s) does your issue occur on?

-Android

Please, provide the following version numbers that your issue occurs with:

• CLI: 4.1.0
• Cross-platform modules: 4.1.0
• Runtime(s): 4.1.2
• Plugin(s): "nativescript-modal-datetimepicker": "1.1.3",

Please, tell us how to recreate the issue in as much detail as possible.

This plugin is handy but setting style doesn't work for me. I am using android 5.1.0. I need to change text size for calendar. I tried with this https://android.googlesource.com/platform/frameworks/base/+/lollipop-release/core/res/res/values/styles_material.xml. No luck. And change datePickerMode to spinner doesn't work for me either.

Is there any code involved?

My app\App_Resources\Android\values-v21\style.xml file.

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Application theme -->
    <style name="AppTheme" parent="AppThemeBase">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
        <item name="android:timePickerStyle">@style/SpinnerTimePicker</item>
    </style>

    <!-- Default style for DatePicker - in spinner mode -->
    <style name="SpinnerDatePicker" parent="android:Widget.Material.Light.DatePicker">
        <item name="android:datePickerMode">calendar</item>
	    <item name="android:dayOfWeekTextAppearance">@style/TextAppearance.Material.DatePicker.DayOfWeekLabel</item>
       
    </style>
	
	<style name="TextAppearance.Material.DatePicker.DayOfWeekLabel" parent="android:TextAppearance.Material">
        <item name="android:textSize">24px</item>
    </style>
</resources>

Cheers

Hi @davecoffin , I follow configuration below and change to spinner. but still show in calendar mode. Isn't i set wrong configuration

App_Resources/Android/values-21/styles.xml

<!-- Default style for DatePicker - in spinner mode -->
<style name="SpinnerDatePicker" parent="android:Widget.Material.Light.DatePicker">
    <item name="android:datePickerMode">calendar</item>
</style>
 
<!-- Default style for TimePicker - in spinner mode -->
<style name="SpinnerTimePicker" parent="android:Widget.Material.Light.TimePicker">
    <item name="android:timePickerMode">clock</item>
</style>

{
	"description": "NativeScript Application",
	"license": "SEE LICENSE IN <your-license-filename>",
	"readme": "NativeScript Application",
	"repository": "<fill-your-repository-here>",
	"nativescript": { 
		"tns-android": {
			"version": "4.0.1"
		},
		"tns-ios": {
			"version": "4.0.1"
		}
	},
	"dependencies": {
		"nativescript-drop-down": "^3.2.4",
		"nativescript-iqkeyboardmanager": "^1.3.0",
		"nativescript-loading-indicator": "^2.4.0",
		"nativescript-localize": "^3.0.2",
		"nativescript-masked-text-field": "^2.0.2",
		"nativescript-modal-datetimepicker": "^1.1.3",
		"nativescript-pdf-view": "^2.0.1",
		"nativescript-theme-core": "^1.0.4",
		"nativescript-ui-listview": "^3.5.5",
		"tns-core-modules": "^4.0.0"
	},
	"devDependencies": {
		"babel-traverse": "6.26.0",
		"babel-types": "6.26.0",
		"babylon": "6.18.0",
		"lazy": "1.0.11"
	}
}

Hi!
How to chantge basic colors?
Thanks

Make sure to check the demo app(s) for sample usage

None

Make sure to check the existing issues in this repository

The issue does not seem to be present at this time.

If the demo apps cannot help and there is no issue for your problem, tell us about it

On IOS 9.3 and 10.3.1 the time is 2 hours of minus, for example, I set the startingHour to 18 hours then it displays 16 in 24-hour time format and 4 pm in 12-hour time format on the IOS timepicker but startingMinute is not affected.
And the return value is also of, for example still set the startingHour to 18 hours it displays 2 hours less so 16(24-hour format) and the return value is 18 hours

Which platform(s) does your issue occur on?

• iOS
• iOS 9.3 and 10.3.1
• emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: 5.3.4
• Cross-platform modules: 5.3.1
• Runtime(s): 5.3.1
• Plugin(s):

"dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/http": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.11.6",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.25",
    "nativescript-angular": "~7.2.1",
    "nativescript-barcodescanner": "^3.1.2",
    "nativescript-feedback": "^1.3.9",
    "nativescript-modal-datetimepicker": "^1.2.0",
    "nativescript-oauth2": "^1.4.2",
    "nativescript-pulltorefresh": "^2.2.1",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-dataform": "^4.0.0",
    "nativescript-ui-sidedrawer": "~5.1.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~6.3.0",
    "tns-core-modules": "~5.3.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~7.2.0",
    "@nativescript/schematics": "~0.5.0",
    "@ngtools/webpack": "~7.2.0",
    "codelyzer": "~4.5.0",
    "nativescript-dev-sass": "^1.7.0",
    "nativescript-dev-typescript": "~0.8.0",
    "nativescript-dev-webpack": "^0.21.2",
    "tslint": "~5.11.0"
  }

Please, tell us how to recreate the issue in as much detail as possible.

Set startingHour to 18 hours and see

Is there any code involved?

Nope not really tested on a new project still 2 hours of

Make sure to check the demo app(s) for sample usage

Yes

Make sure to check the existing issues in this repository

yes

If the demo apps cannot help and there is no issue for your problem, tell us about it

TimePicker return incorrect selection on iOS, on Android working fine but on iOS the selection don't equal the result.

Which platform(s) does your issue occur on?

• iOS
• iOS 10.3
• emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: 4.2.3
• Cross-platform modules: 4.2
• Runtime(s): 4.2
• Plugin(s):
  "calendar-base": "^0.3.0",
  "is_js": "^0.9.0",
  "moment": "2.22.2",
  "nativescript-animated-circle": "^1.1.0",
  "nativescript-audio": "5.0.0",
  "nativescript-checkbox": "^3.0.3",
  "nativescript-facebook": "^2.2.3",
  "nativescript-geolocation": "^4.3.0",
  "nativescript-gif": "^4.0.1",
  "nativescript-google-maps-sdk": "^2.6.1",
  "nativescript-google-maps-utils": "^0.1.3",
  "nativescript-imagepicker": "6.0.3",
  "nativescript-loading-indicator": "^2.4.0",
  "nativescript-local-notifications": "^3.0.1",
  "nativescript-modal-datetimepicker": "1.1.4",
  "nativescript-pedometer": "^2.0.2",
  "nativescript-permissions": "^1.2.3",
  "nativescript-plugin-firebase": "6.5.0",
  "nativescript-screen-orientation": "^2.0.0",
  "nativescript-screenshot": "0.0.2",
  "nativescript-social-share": "^1.5.1",
  "nativescript-theme-core": "~1.0.4",
  "nativescript-ui-calendar": "^3.8.0",
  "nativescript-ui-listview": "^3.6.0",
  "tns-core-modules": "~4.2.0"

Please, tell us how to recreate the issue in as much detail as possible.

Nothing only run and get the picker for example if i select 03:00 PM the return me 09:00 AM in 24 hours format

Is there any code involved?

let pickerOptions = {
is24HourView: false
};
Picker.pickTime(pickerOptions).then((result) => { console.dir(result); });