Ionic-framework: Respect time limits in ion-datetime

[oudzy]

https://guides.github.com/features/mastering-markdown/

Short description:

ion-datetime ignoring the time part inside the min and max attributes.

What to expect:

Respect the time limits provided in the min and max attributes.

Steps to reproduce:

1. add ion-datetime to an Ionic 2 app;
2. add min and max attributes with time;
3. when using the ion-datetime try to select a date out of the min and max range;
4. ion-datetime will set limits to the date but not the time.

<ion-item>
   <ion-label>dateTime input with min and max attrs</ion-label>
   <ion-datetime 
        displayFormat="MMM DD, YYYY HH:mm"
        min="2016-06-10T15:30"
        max="2017-06-10T13:30"
        [(ngModel)]="dateObj"></ion-datetime>
</ion-item> 

Ionic Version: Ionic 2 beta 8

http://plnkr.co/edit/MzqRRCy0K7TEQTWmd7I9?p=preview

[evgeniynet]

ion-datetime also doesn't even showed in IE 11

[jgw96]

Hello @oudzy ! Thanks for opening an issue with us! To bind a component to a property (like min and max) in angular 2 you use this syntax [max]. You can read more about that here on the Angular docs. Also @evgeniynet we do not support any version of Internet Explorer with Ionic 2, although we do support Edge and Windows 10 universal apps fully! Thanks everyone for using Ionic!

[oudzy]

@jgw96 Thanks for your response but i meant a different issue, binding is fine, and i have updated the pluker example to bind the values instead of the direct assignment which is already works, but the problem as described above, the component ignore the time part.

Please take a look at the updated example and try to enter an unvalid value like 30/10/2017 23:00
http://plnkr.co/edit/MzqRRCy0K7TEQTWmd7I9?p=preview

[evgeniynet]

I confirm, problem with time exists 

За час рушится Вавилон!

Четверг, 16 июня 2016 г., 18:10 +0300 от [email protected] [email protected]:

@jgw96 Thanks for your response but i meant a different issue, binding is fine, and i have updated the pluker example to bind the values instead of the direct assignment which is already works, but the problem as described above, the component ignore the time part.
Please take a look at the updated example and try to enter an unvalid value like 30/10/2017 23:00
http://plnkr.co/edit/MzqRRCy0K7TEQTWmd7I9?p=preview
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub , or mute the thread .

[jgw96]

Sorry about that @oudzy ! I read the issue wrong. Looking at this issue again.

[ghislaindj]

Hi !
It seems that the component doesn't fully ignore the min date : at first it ignores it, but as soon as you've touched it, the component seems to work fine and respect the min property.

[oudzy]

@ghislaindj That's wright but only the min and max date, not the time, the time part of input is not limited even when the component been touched.

[JustinPierce]

Confirming that this is still an issue in beta 11. It definitely makes it trickier to set up a valid date range with two DateTime components.

[patrickbussmann]

Hmm is it planned to restrict the picker to time? @oudzy?
And I think this could be referenced here because the date is ignored if its in another timezone. #8009

[wshaheer]

The problem still exists for me. I'm on Ionic version 2.0.0-rc.3 and ionic-cli version 2.1.13. I'm using momentJS to set the min time and have an interval timer that's continuously updating it every second.

[javasol]

Would love to see this feature added (or is it a bug?). I currently have to react to users input and alert them they can't input future time, would love to be able to just restrict max current time in ion-datetime

[danielehrhardt]

Same Problem here

[jayeshanandani]

This issue persists in RC-4 also. Can we have some update please?

[marticrespi]

Any news about it?

I have this in my html file

<ion-datetime cancelText="Cancelar" doneText="Aceptar" 
(ionChange)="onAccept($event)" displayFormat="DD MMMM YYYY" 
monthNames="Enero, Febrero, Marzo, Abril, Mayo, Junio, Julio, Agosto, Septiembre, Octubre, Noviembre, Diciembre"
[min]="todayStr"
[max]="maxDateStr"
[(ngModel)]="todayStr">
</ion-datetime>

And in my ts file

this.today = new Date();
this.today.setHours(0,0,0);
this.todayStr  = this.today.toISOString().substring(0,10);
this.maxDate = this.today;
this.maxDate.setFullYear(this.today.getFullYear()+1);
this.maxDateStr = this.maxDate.toISOString().substring(0,10);

When I push the page its shows me well today in the calendar, but when I select a date in the future, I can't select today again. Seems bind the selected date as min Date.

EDIT: I'm on RC5.

[Iyashu5040]

I have a simple
<ion-datetime displayFormat="HH:mm" min="01:00" max="13:00"></ion-datetime>
yet the min and max values are ignored and I can select any time in the picker.

Ionic Info:
Cordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed

[byzg]

hi guys. you can try to use dependent columns of date/time picker

[pdvorchik]

@manucorporat I'm still seeing issues with restricting times -- it now doesn't show the time column at all. Can this be updated?

Thanks

Screenshot:

[rahulppawar]

If Issue , Respect time limits in ion-datetime #6850 is fixed then also it is not working on my side.

am I using older version ? please help !!!!
Following is my info,

cli-packages-
@ionic/cli-plugin-proxy : 1.5.8
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : not installed
local packages:
@ionic/app-scripts : 3.1.10
Cordova Platforms : android 7.0.0
Ionic Framework : ionic-angular 2.0.0
System:
Android SDK Tools : 26.1.1
Node : v8.11.1
npm : 6.0.0
OS : Windows 7

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.