CODEWITHSUNDEEP
javascriptangulartypescriptangular-materialangular5
ian dsouza
ian dsouza

Reputation: 187

How to I get current time from angular material Date picker?

I am using angular material datepicker https://material.angular.io/components/select/overview

but this returns only the date and not the current time : Mon May 28 2018 00:00:00 GMT+0530 (IST)

Is there any way I can get the current time also from this?

Upvotes: 2

Views: 11913

Answers (5)

Jonathan G
Jonathan G

Reputation: 119

This works for me

In my case is select any date, but the hour time is ever local

public selectDate(event: MatDatepickerInputEvent<Date>) : void
  {
      if(event.value)
      {
        const dtPicker = new Date(event.value);

        dtPicker.setHours(new Date().getHours());
        dtPicker.setMinutes(new Date().getMinutes());
        dtPicker.setSeconds(new Date().getSeconds());

        this.dtInputValue = dtPicker;
      }
  }

Upvotes: 0

segito10
segito10

Reputation: 388

You can use the ngModelChange to parse the date before setting it to your model, I recommend you momentJS for easy date manipulations.

in the HTML

 <input [ngModel]="date" (ngModelChange)="onDataChange($event)"  matInput [matDatepicker]="picker" placeholder="Choose a date">

In your Component.ts

  onDataChange(newdate) {
    const _ = moment();
    const date = moment(newdate).add({hours: _.hour(), minutes:_.minute() , seconds:_.second()})
    this.date = date.toDate();
    console.log({hours: _.hour(), minutes:_.minute() , seconds:_.second()})
  }

you can find the full solution here https://stackblitz.com/edit/angular-ecq2lc

Upvotes: 4

Gautham Srinivasan
Gautham Srinivasan

Reputation: 308

        For Example currenttime = Mon May 28 2018 00:00:00 GMT+0530 (IST)

    Currenttime is an example if  u using current date means just use new Date()  

    //Sample function calling Method 
            Exacttime(){
            this.functionName = this.diffhours(new(currenttime))
            }

            diffhours(currenttime){
               var diff = new Date(currenttime);
                diff .getHours(); // => 9
                diff .getMinutes(); // =>  30
                diff .getSeconds(); // => 51

}

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86790

The angular material is not providing Time right now you need to manually get time from timeStamp, Try this - 

function getTimeFromDate(timestamp) {
  let date = new Date(timestamp * 1000);
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();
  return hours+":"+minutes+":"+seconds
}

let timeStamp = new Date("Mon May 28 2018 00:00:00 GMT+0530 (IST)")
console.log(getTimeFromDate(timeStamp));

Upvotes: 0

Християн Христов
Християн Христов

Reputation: 3588

Right now the material date picker provides just the current date (without the current time), but there is an open issue in the official repo, so we might see a time picker in the near future.

Upvotes: 0

Related Questions