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

There seems to be an issue with Material-UI and TypeScript where a parameter of type 'string' does not have an index signature in the type 'ClassNameMap<"container" | "navBar" | "section0">'

Using external URLs with added tracking parameters in Ionic 2

Unable to associate a model with an additional attribute in objection because of a TypeScript issue

Using conditional styles with Angular 2

The expandable column headers in Primeng are mysteriously missing

Unleash the potential of a never-ending expansion for grid cells on Canvas

What is the correct way to define an abstract method within a class to ensure that an IDE detects and notifies if the abstract method is not implemented

The Angular application is not able to initiate the POST request

The resend email feature isn't functioning properly on the production environment with next js, however, it works seamlessly in the development environment

Error: Failed to execute close function in inappbrowser for Ionic application

"Although TypeOrm successfully generates the database, there seems to be a connectivity issue

Having trouble locating the name WebGLObject in my TypeScript code

How can you display the value of a date type in a TextField?

Django-oauth2 encountered a 500 error due to the presence of unauthorized URL query parameters in the request

Converting custom JSON data into Highcharts Angular Series data: A simple guide

Each styled component will yield the respective type definitions using (@types/styled-components)

Encountering a problem with Vue StripeCheckout while navigating to a different component

Encountering a issue while attempting to sign up for a function within the ngOnInit lifecycle

Unit Testing in Vue.JS: The original function remains active even after using sinon.stub()

Implementing a ReactJS component with a TypeScript interface for displaying an Alert box message using Material