Form Date Picker

Is there any support for a datepicker yet? Thanks.

Nothing yet, but you can use the built in <input type="date"> which will open in a native date picker. Does that help?

1 Like

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.

http://i.imgur.com/D26HJDp.png - this might help explain! I suspect it might be out of your control though!

Actually this might solve my problem: https://build.phonegap.com/plugins/332

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-.

4 Likes

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:

Hello,
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…
https://github.com/joshilomas/DatePicker-IonicApp

Regards,
Lomas Joshi

3 Likes

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?

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

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.

http://caniuse.com/#feat=input-datetime

image

2 Likes

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

Looks like this:
https://xorox.io/wp-content/uploads/2015/04/ionic-ios-dateslider-400x280.jpg

Free to use. Find the repo here: https://github.com/xorox/ionic-ios-date-slider

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

3 Likes

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