DateTime - default to todays date

Hi raymondativie. Done as you said in your post and it works. Awesome - thanks for the reply! :slight_smile:

1 Like

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.



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>




@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 ={
      myDate: this.myDate

    setTimeout(_ => {
      this.dateTime.setValue(new Date().toISOString());

with the template:

    displayFormat="MMM DD, YYYY HH:mm"

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?

1 Like

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 (, 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:


     var dateParts = datepar.split("-");
     var date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
     return date;

In the .html

You can see more details about the this problem here

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( - tzoffset)).toISOString().slice(0,-1);

Anyone know how to get the hour and minute separately?
I have this:

    PickerFormat = "HH: mm"
    [(NgModel)] = "time"
    CancelText = "Cancel"
    DoneText = "OK">

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 ?


1 Like

@rapropos this date-fns not working on my side after installing “npm install date-fns --save”.

I am using typescript in ionic 2.

Do you know why it is not adopting this library ?