[Solved] Android datepicker style

ionic-v1
1

Hello.

I am using exactly the same datepicker plugin on 2 different projects.

On one of them, datepicker looks like new lollipop style calendar. On another project it looks like ugly old android datepicker.

Where is it controlled?

Thanks

1 Like
2

Ok found it. Had to remove this from my Manifest file in android platform

android:theme="@android:style/Theme.Black.NoTitleBar"
1 Like
3

Just changing this made the ionic clock plugin look like the new style clock time picker where you slide the clock hands to choose the hours and minutes?

4

I have removed the same,but still the old date picker…Do I need to update anything?

5

The Cordova Date/Time picker plugin accepts the option ‘androidTheme’.

Android Material Theme example:

image
Screenshot_20160728-141239.png868×1482 39 KB

image
Screenshot_20160728-141246.png871×1096 36.5 KB

Solution A
The value of the ‘androidTheme’ property is expected to be the resource ID of the theme against which to inflate.
Set it to ‘16974373’ which is the ID for the material design theme.

Code example:

module.controller('MyCtrl', function($scope, $cordovaDatePicker) {

  var options = {
    date: new Date(),
    mode: 'date', // or 'time'
    minDate: new Date() - 10000,
    allowOldDates: true,
    allowFutureDates: false,
    doneButtonLabel: 'DONE',
    doneButtonColor: '#F2F3F4',
    cancelButtonLabel: 'CANCEL',
    cancelButtonColor: '#000000',
    androidTheme: '16974373' // ID for the material design theme
  };

  document.addEventListener("deviceready", function () {

    $cordovaDatePicker.show(options).then(function(date){
        alert(date);
    });

  }, false);
});

Solution B
Or set the value of the ‘androidTheme’ property to 0 if you want to use the default parent theme specified in your AndroidManifest.xml, for example:

android:theme="@android:style/Theme.Material"
1 Like