Struggling to extract the hours and minutes from a date in IONIC: encountering an error stating that getHours is not a recognized

Question

Struggling to extract the hours and minutes from a date in IONIC: encountering an error stating that getHours is not a recognized

I encountered an issue while trying to extract the hours and minutes from a date in Ionic.

Below is the code snippet from my .html file :

  <ion-datetime displayFormat="HH:mm" [(ngModel)]='timeEntered1' picker-format="h:mm"></ion-datetime>
  <ion-button (click)="getTime()"></ion-button>

Next, in my .ts file, I implemented the following logic:

timeEntered1 = new Date();

constructor() {}

getTime() {
  console.log(this.timeEntered1.getHours());
}

The error message displayed is as follows:

this.timeEntered1.getHours is not a function

angular typescript ionic4

Answer 1

Answer №1

In order to achieve this, make sure to incorporate the <button> element into your code.

 <ion-datetime displayFormat="HH:mm" [(ngModel)]='timeEntered1' picker-format="h:mm"></ion-datetime>
    <button ion-button (click)="getTime()"></button>

For a demonstration, check out this link: https://stackblitz.com/edit/ionic-jkhwaw

Answer 2

In order to achieve this, make sure to incorporate the <button> element into your code.

 <ion-datetime displayFormat="HH:mm" [(ngModel)]='timeEntered1' picker-format="h:mm"></ion-datetime>
    <button ion-button (click)="getTime()"></button>

For a demonstration, check out this link: https://stackblitz.com/edit/ionic-jkhwaw

Answer 3

Answer №2

When you select a time like 2:03 in this scenario, Ionic provides the following output:

{
    "hour": {
        "text": "2",
        "value": 2,
        "columnIndex": 0
    },
    "minute": {
        "text": "03",
        "value": 3,
        "columnIndex": 1
    }
}

This means that you no longer need to use getHours() since the values are already stored in your model. You can simply do the following:

timeEntered1 = <any>{};

getTime() {
  // This will display 2 and 3
  console.log(this.timeEntered1.hour.value, this.timeEntered1.minute.value);
}

Answer 4

When you select a time like 2:03 in this scenario, Ionic provides the following output:

{
    "hour": {
        "text": "2",
        "value": 2,
        "columnIndex": 0
    },
    "minute": {
        "text": "03",
        "value": 3,
        "columnIndex": 1
    }
}

This means that you no longer need to use getHours() since the values are already stored in your model. You can simply do the following:

timeEntered1 = <any>{};

getTime() {
  // This will display 2 and 3
  console.log(this.timeEntered1.hour.value, this.timeEntered1.minute.value);
}

Struggling to extract the hours and minutes from a date in IONIC: encountering an error stating that getHours is not a recognized

Answer №1

Answer №2

Similar questions

In Angular/Typescript, dynamically add a class to a `td` element when it is clicked. Toggle the class on and off

Refill ag-grid with fresh data

What is the best way to define a named, optional parameter in TypeScript-React that can accept an object with optional fields and default values?

Tips for customizing Material UI CSS default properties in React

Can a constructor function be utilized as a parameter type in another function within TypeScript?

Changing a string to HTML within an Angular 2 application

Include a hash in the URL when the current location is entered into the view by scrolling

Transferring AgGrid context in a functional React component

When trying to run "ng s -o/ng s/ng build" commands in Angular Cli, there is an issue where no output is displayed

Is it possible to insert a button into a specific column of an ngx-datatable within an Angular 8 application?

Creating a dynamic text design using Bootstrap or CSS: What's the best approach?

A comprehensive guide to using Reactive Forms in Angular

What other options exist besides RxJS operators?

Tips for utilizing and incorporating an icon into a specific cell within ag-grid to signify that the cell can be edited

The specified file cannot be found within the Node file system

Declarations for TypeScript in NPM packages

determine the values of objects based on their corresponding keys

An error has occurred: Type 'x' is not compatible with type 'x' (during Vercel deployment)

How can I rectify the issue in TypeScript where the error "not all code paths return a value" occurs?

The Angular application integrated with Keycloak experiences an endless loading loop when the page is refreshed or after the user logs in