Form Date Picker

ionic-v1
14

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

image
screen.png800×1280 49.2 KB

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?

Also,

  • 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>
        <select
          class="filter-select"
          ng-model='location',
          ng-options='location as location.name + ", " + location.city for location in locations | orderBy:"name" track by location.location_key'>
        </select>
      </label>
      <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>
      <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;'>
      </label>

      <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>
      </p>
    </div>

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.

2 Likes