Hi!
Firstly, the addition of ion-datetime is awesome - good work!
I may have missed this in the docs and apologies if so - how do I set the default date on selecting the control to todays date? When I open it it’s 01-01-2016. I’m setting ngModel to a field value (empty currently) - but I can set this field to any date and it will show up as that on loading (which is great). However is there an equivalent in Ionic 2 of DateTime.Now, e.g. [(ngModel)]=“DateTime.Now”?
Thanks!
Frank.
So i had this problem too. finally solved it.
Just take a closer look at the docs
ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ
Ionic uses the ISO 8601 datetime format for its value. The value is simply a string, rather than using JavaScript’s Date object. Additionally, when using the ISO datetime format, it makes it easier to serialize and pass within JSON objects, and sending databases a standardized format which it can be easily parsed if need be.
So all you need to do is parse in the ISO string date format instead of the date object itself
like so
myDate: String = new Date().toISOString();
and use it in the HTML like so
<ion-datetime displayFormat="MMM DD, h:mm A" [(ngModel)]="myDate"></ion-datetime>
Hi raymondativie. Done as you said in your post and it works. Awesome - thanks for the reply! 
The above solutions means you are forcing a value into the field, what if you have an optional date field on a form which you want left blank, but if the user opens the date picker to provide a date, how do you then default date (like today)?
I have not found a solution to having an optional date field, any ideas? Seems like we need an additional parameter to use as a default value if the field is empty.
I tried using min and max, but then the picker opens with a default date of the year of the max value, which also does not seem to make sense.
I can go back to using the native date picker which provides this ability, but be nice to use the ionic one for consistency.
Any suggestions appreciated.
+1
I am running into this same issue. I need to be able to specify a default picker value to be used when my FormControl does not have a value. Is there any way to do this, or is there such a feature in the works? Having the picker default to the minimum date when the bound control does not have a value is not acceptable.
It does not seem like I should have to try to capture the click of the ion-datetime in order to temporarily dirty my model to provide a pretty value for the picker, and then try to un-dirty my model if a value is not chosen.
Hi, is there any way to set the default time when selecting the control to the current time?
P.S. I tried your solution for the default date and it works! Thanks.
Hi Vexer,
Apologies for the late reply.
You can use the same methodology as kindly described by raymondativie:
myDate: String = new Date().toISOString();
And in your ion-datetime do this instead:
<ion-datetime displayFormat="HH:mm" pickerFormat="HH:mm" [(ngModel)]="myDate"></ion-datetime>
Cheers,
Frank.
@sdrew @JarrodKoch this is probably a hack but you can set the default value of the picker with:
this.dateTime.setValue(new Date().toISOString());
Where dateTime is the reference to the ion-datetime via:
@ViewChild('dateTime') dateTime;
Here is a full example:
export class MyDateForm {
@ViewChild('dateTime') dateTime;
form: FormGroup
myDate: FormControl = new FormControl('', Validators.required)
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
myDate: this.myDate
});
setTimeout(_ => {
this.dateTime.setValue(new Date().toISOString());
});
}
}
with the template:
<ion-datetime
#dateTime
displayFormat="MMM DD, YYYY HH:mm"
formControlName="myDate"></ion-datetime>I noticed the method sets the default date and time to GMT. Is there a way to default it to the date and time of the user’s device? Thanks!
Same question as sclrax:
new Date().toISOString()
sets it to gmt time (-2 hours from my device, e.g.). Is there a way to set this to the users device time?
your idea is working fine,
but when i try to do currentdate it shows me current date of usa and not of my country, for example:
Now in my country the date is 10\06\2016
and in other countries is 10\05\2016 so its not shows my real current date,
do you know how to solve it?
I have the same problem. My date is always showed with a day less. I tried moment (http://momentjs.com/guides/), pipe “date: “dd/MM/yyyy””, but didn´t work. It is funny, because, the value in data base is correct, but when I try to format the date, a date with a less day is showed.
yes, i still didn’t solve this issue. i don’t know what to do…
I solve this:
In a .ts file:
getDate(datepar){
var dateParts = datepar.split("-");
var date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
return date;
}
In the .html
<p>{{getDate(datepar)}}</p>
You can see more details about the this problem here http://stackoverflow.com/questions/7556591/javascript-date-object-always-one-day-off
Good luck!
thank u,
what is datepar in your project? date selected?
datepar = date parameter… Just used for the example.
To get the ISO string and set the timezone, you can use this function (taken from this Stack Overflow post)
var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
var localISOTime = (new Date(Date.now() - tzoffset)).toISOString().slice(0,-1);Anyone know how to get the hour and minute separately?
I have this:
<ion-datetime
PickerFormat = "HH: mm"
[(NgModel)] = "time"
CancelText = "Cancel"
DoneText = "OK">
</ion-datetime>
Which saves a string in my variable time when selecting a schedule. I need to get hours and minutes apart. Can not it be that instead of saving a string, I keep a Date object or something like that?
+1. Would like to have a property to set default picker date when it slides up or at least to be the current date\time.
I also have trouble as @sdrew, I’m using reactive forms and have optional dates and don’t want to make them required.
I want to customize date in ionic 2.
I want to add 3 days in today’s date
For Example if today is 5 August it should display 8 august.
How i can customize it ?