Limit the outcomes of the Ionic timepicker

Currently, I am utilizing the ionic datetime feature. However, instead of receiving just the hours, minutes, and seconds, the result I am getting looks like this 2020-10-05T00:00:27.634+07:00. What I actually require from this output is only 00:00:27.

Is there a way to limit the output to my desired format?

Code

<ion-datetime display-format="HH:mm:ss" picker-format="HH:mm:ss" formControlName="quiz_time"></ion-datetime>

Note: The tag <ion-datetime> is Ionic's default, and I have not made any additional modifications in the component for it to work. Therefore, what I specifically need assistance with is incorporating some functionality into my component to restrict the results of this input field. That's the support I'm seeking.

component

Transmission of data to the backend

quizCreate() {
    const sems = this.quizData.value;
    this.quizService.quizCreate(
        sems.quiz_time, // my input (2020-10-05T00:00:27.634+07:00)
    ).subscribe(
      (data: any) => {
        console.log(data.message);
      },
      error => {
        //
      },
      () => {
        //
      }
    );
}

Any suggestions or solutions?

javascriptangulartypescriptionic-framework

Answer №1

Issue Resolved

Below is the final code snippet that successfully resolved the problem I was facing:

createQuiz() {
    const semester = this.quizData.value;

        // Converting incoming time
    const d = new Date(Date.parse(semester.quiz_time)); // Input: 2020-10-05T00:00:27.634+07:00
        // Adding leading zeros to seconds
    const hours = ("0" + d.getHours()).slice(-2);
    const minutes = ("0" + d.getMinutes()).slice(-2);
    const seconds = ("0" + d.getSeconds()).slice(-2);
        // Concatenating time
    const quizTime = hours + ":" + minutes + ":" + seconds;

    this.quizService.createQuiz(
        semester.quiz_time = quizTime, // Sending concatenated time (00:00:27)
    ).subscribe(
      (data: any) => {
        console.log(data.message);
      },
      error => {
        //
      },
      () => {
        //
      }
    );
}

Hopefully, this solution will be beneficial for others encountering a similar issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps should I follow to create a large Angular single page application using ASP.NET MVC?

After gaining some experience with AngularJS on a small project, I am now ready to tackle a larger application. My plan is to create a single-page application using asp.net, making WebAPI calls and loading AngularJS views. However, I am unsure about how ...

javascript.netasp.net-mvcangularjsasp.net-web-api

What is the method to retrieve the data type of the initial element within an array?

Within my array, there are different types of items: const x = ['y', 2, true]; I am trying to determine the type of the first element (which is a string in this case because 'y' is a string). I experimented with 3 approaches: I rec ...

typescript

Filtering a Two-Dimensional Array Using JavaScript

I am working with a basic 2D array that contains x, y coordinates as shown below: var c = [ [1,10], [2,11], [3,12], [4,13], [5,15] ]; I want to know how I can extract pairs from the array that meet specific conditi ...

javascriptarraysloopsfilter

NodeJS produces identical outcomes for distinct requests

RESOLVED THANKS TO @Patrick Evans I am currently working on a personal web project and could use some assistance. In my website, users are prompted to upload a photo of their face. When the user clicks the "upload" button, the photo is sent with a request ...

javascriptnode.jsapiexpressunirest

Retrieving a PHP script from within a DIV element

I am seeking assistance to successfully load a PHP file from a DIV call. Below is the code I have used: <html> <head> </head> <body> <script class="code" type="text/javascript"> $("#LoadPHP").load("fb_marketing ...

phpjavascripthtml

Express is encountering a non-executable MIME type of 'text/html' with Webpack

My express application setup is as follows: const express = require("express"); const app = express(); const server = require("http").Server(app); const path = require("path"); const port = process.env.PORT || 5000; app.use(& ...

javascriptnode.jsexpresswebpack

A method in JavaScript to fetch a single variable using the GET request

Although I am new to writing JavaScript, I am currently working on an iOS application that will make use of JavaScriptCore's framework to interpret a piece of javascript code in order to obtain a specific variable. My goal is to establish a GET reques ...

javascriptjqueryjsonajaxjavascriptcore

Having trouble with jQuery UI draggable when using jQueryUI version 1.12.1?

Currently, I am diving into the world of jQuery UI. However, I am facing an issue with dragging the boxes that I have created using a combination of HTML and CSS. My setup includes HTML5 and CSS3 alongside jQuery version 1.12.1. Any suggestions or help wou ...

javascriptjqueryhtmlcssjquery-ui

Custom-designed foundation UI element with a parameter triggers TypeScript issue

When running this tsx code: import React from "react"; import BaseButton from "@mui/base/Button"; import styled from "@emotion/styled"; export const enum BUTTON_TYPE { MAIN = "main", LINK = "link", } ...

reactjstypescriptmaterial-uibase-ui

Is there an issue with my JavaScript append method?

Within the following method, an object named o gets appended to a list of objects called qs. The section that is commented out seems to be causing issues, while the uncommented section is functional. What could possibly be wrong with the commented part? on ...

javascriptreactjslodash

A guide to simulating components using providers in Angular 4 - Achieving successful unit testing

I am struggling with mocking a component that uses providers in Angular 4. Below is the code snippet I am working on: import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; i ...

angularunit-testingjasminemocking

The dirtyFields feature in React Hook Form is not accurately capturing all the fields that are dirty or incomplete,

I am facing an issue with one field in my form, endTimeMins, as it is not registering in the formState. I have a total of four fields, and all of them are properly recognized as dirty except for the endTimeMins field. It is worth mentioning that I am utili ...

javascriptreactjsmaterial-uireact-hook-form

The jQuery function for AJAX does not properly validate the boolean value provided by the controller

I have a controller action that returns a boolean result to jQuery. [HttpGet] public ActionResult IsVoucherValid(string voucherCode) { bool result = false; var voucher = new VoucherCode(voucherCode); if(voucher.Status==0) ...

javascriptjqueryajaxasp.net-mvc-4

Adding double quotes to arrays in D3.js after using the .map method

Here is the code snippet I am working with: d3.csv("static/data/river.csv", function(data) { var latlongs = data.map(function(d) { return [d.Lat,d.Lng]; }) var lineArray1 = latlongs; console.log(lineArray1); When I view the outpu ...

javascriptarraysd3.js

Exploring the world of typed props in Vue.js 3 using TypeScript

Currently, I am attempting to add type hints to my props within a Vue 3 component using the composition API. This is my approach: <script lang="ts"> import FlashInterface from '@/interfaces/FlashInterface'; import { ref } from &a ...

typescriptvue.jsvuexvuejs3vue-composition-api

Error: It seems that the window object is not defined when trying to run Firebase analytics

Encountering the error ReferenceError: window is not defined when attempting to set up Firebase analytics in my Next.js project. Below is the code snippet causing the issue: const app = initializeApp(firebaseConfig); const auth = getAuth(app); let analyti ...

javascriptfirebasenext.jsgoogle-analytics

Tips for creating a website with an integrated, easy-to-use editing tool

Recently, I designed a website for a friend who isn't well-versed in HTML/CSS/JavaScript. He specifically requested that the site be custom made instead of using a web creator. Now, he needs to have the ability to make changes to the site without nee ...

javascripthtmlcsseditor

What is the best way to verify the presence of a route in Angular with Jasmine testing framework?

I'm currently in the process of developing a test to verify the presence of a specific route within my Angular application using Jasmine: import { routes } from './app-routing.module'; import { UsersComponent } from './users/users.comp ...

angularunit-testingjasmineintegration-testingangular2-routing

Leveraging a unique JavaScript function in AngularJS from a separate controller or directive

I am currently working on a JavaScript file named 'linechart.js' which functions as a library. Inside this file, there is an object that contains a function responsible for generating a line chart using D3 when provided with some data. The code s ...

javascriptangularjsd3.jsangular-directive

Is it possible to apply fog to a specific area in Three.js instead of being dependent on the distance from

Picture this: a vast THREE.PlaneGeometry representing the floor with a camera placed at an arbitrary spot within the scene. By manually adjusting the near and far values of the fog, I can effectively conceal the outer edges of the plane to create the illu ...

javascriptthree.js