Form Date Picker

Yeah that was perfect thanks!

Have you got a solution for the darkened datepicker in iOS7? I think the document behind the datepicker is black and the transparency of the datepicker is making it look dark…

Hey @gregorypratt I’m not seeing that on my end, do you have a screenshot or sample code? Thanks. - this might help explain! I suspect it might be out of your control though!

Actually this might solve my problem:

1 Like

ah, I see. You could also just try setting body and such background colors:

body, html { background-color: #fff; width: 100%; height: 100%; }

using the date input type doesn’t appear to work in Android. At least 4.3-.


I’'am also facing same issue. Any body got the solution for this issue
using the date input type doesn’t appear to work in Android. At least 4.3

The ios-behaviour (to show a datepicker for input type =“date”) is a standard ios-webstackbehaviour and its independent from ionic. Android doesn’t have such a implementation out of box. So you have to use a Plugin to get things work like you would expect it on ios. I use this one, but there are couple of other DatePickers out there:

I had also faced same problem in android. But now i get rid of it using angular-datepicker.
I have created demo app in github that use angularjs datepicker. take a look at it…it may help you…

Lomas Joshi


Hi Lomas,

It looks great. Any plan to include time picker?

What’s the story with Android <input type="date"> ? I’m also on Android 4.3 and this is how it looks for me:

The date picker input type defaults to a regular text input, plus the label disappears – no idea why? Seems OK in Android simulators e.g. Nexus 5, but this is on a real device and it looks horrible and doesn’t work correctly.

Ah, the joys of platform woes…

Does anyone know why <input type="date"> doesn’t work on Android 4.3, and is there a workaround?


  • Why did my label disappear
  • Why is the <input type="range"> all screwy with the layout – whereas on Nexus 5 simulator it looks good?

Here’s the bit of markup for this page, some of the inline styles were workarounds for issues on iOS

<div class="list">
     <label class="item item-input item-select item-stacked-label filter-select-label" style="padding-top: 10px; padding-bottom: 10px;">
        <span class="input-label filter-select-span">Location</span>
          ng-options='location as + ", " + for location in locations | orderBy:"name" track by location.location_key'>
      <label class="item item-input filter-date-label" style="padding-right: 25px;">
        <span class="input-label filter-date-span">Date</span>
        <input class="filter-date" type="date" ng-model='range.endDate'>
      <label class="item item-input filter-range-label">
        <span class="input-label filter-range-span">Days:<sup class='asterisk'>*</sup> {{days}}</span>
        <input class="filter-range" type="range" name="days" min="0" max="30" value="7" ng-model="days" style='margin-right: 30px;'>

      <p class="padding small">
        <span class="small"><em class='asterisk'>*</em>How many days prior to the date you have chosen show in the chart.</span>

I guess the more apt question here is: does ionic have .platform-specific css classes that I can use when on a particular platform, b/c it looks like I’m going to be spending a good deal of time tweaking this css for the different platforms and devices…ugh.


The reason for this is that android 4.3 doesn’t support input type=“date” fields. Using a separate plugin or angular directive seems like a solution but I’ve yet to try that.



I just started to develop an iOS likewise date-slider for Ionic!

Looks like this:

Free to use. Find the repo here:

Hi @seanhill, I have created both time picker and date picker for ionic frame works.
This may help you. Please have a look at the below links.

ionic-timepicker demo

ionic-timepicker Bower component

ionic-datepicker demo

ionic-datepicker Bower component


Native datepicker / timepicker allways opens with current date/time . it is possible to make it open with ng-model value?

I have forked Rajesh’s datepicker and modified it to with a dropdown for month and year

i cant click the month and year to change it

Sorry, I forgot to commit the template.js file in src. Please check it out and add a script reference to it. Don’t use the files in the dist folder as I haven’t had time to minify them and update those files, use the ones in the src folder.

Thanks @Victor, inspired from your feature, I have implemented the dropdown feature for both month and year in my new version of ionic-datepicker v0.3.0 bower component.

1 Like