Problem with date picker when viewing in a desktop browser

ionic-v1
1

Hello,

I am new here. I inherited a IONIC project that uses Angular and I am just starting to learn about both. This project was first developped targetting devices (IOS, Android…) but it was decided that it must also work on desktop web browsers…

I have a problem with date pickers, here is the HTML located in a template :

<div class="col col-80 label-date">
	<input 
		name="datefrom" type="date" 
		ng-model="startdate" 
		ng-style="{'width':'123px'}">
</div>

It works great when openned in browsers on devices, using the HTML5 built-in datepicker but on a desktop’s Chrome, the default HTML5 datepicker is supposed to be a text box, with the ability to click on the three parts of the date, click up and down buttons to change either parts of the date and a downward black arrow that should show a calendar when clicked.

In a test page openned in Chrome, this HTML works:

<input type="date" />

I tried adding the same as above in our IONIC app and as with the first HTML, in Chrome, the downward arrow doesn’t work !!!

I have noticed that in ionic.css file, the INPUT[type=date] tag is modified but as I am not an expert on CSS… I am wondering if it could be something done on the IONIC part of the application that breaks the HTML5 default datepicker in Chrome (and IE for that matter…).

Is it IONIC that causes that for a good reason ? Is it a bug or is it suppose to work and it would be only in my app that it is wrong ?

Thanks for any help on this subject, best regards,
Claude

2

What version of Ionic are you using? You can run ionic info from the command line to find this information. Here is a codepen example using input date: http://codepen.io/mhartington/pen/laeLn

Also, many browsers don’t support it: http://caniuse.com/#feat=input-datetime

3

Hi @ClaudeVernier, I have created both time picker and date picker for ionic frame works.
No additional dependencies like jQuery is not required. Hope this might help you. Please have a look at the below links.

ionic-timepicker demo

ionic-timepicker Bower component

ionic-datepicker demo

ionic-datepicker Bower component

4

I have the same issue: the down arrow does not work in Chrome–Ionic 1.0.0-rc.4.

1 Like
5

Same for me. doesn’t work for Chrome.
Idea is for dektop browsers should be one type of datepicker for mobile other (native)

I don’t know if it’s issue. But problem is here:
function tapClickGateKeeper(e) {
…
if (!ionic.tap.isLabelWithTextInput(e.target)) {
// labels clicks from native should not preventDefault othersize keyboard will not show on input focus
e.preventDefault(); // YOU CAN COMMIT IT AND DATE_INPUT WILL WORK
}
return false;
}
}

Do we have any other solutions ?