The html-duration-picker is not being displayed in the proper format

I've been working on integrating an external library that allows for inputting document length.

Specifically, I'm using the html-duration-picker library, but it seems like the input functionality is not quite right for durations.

Could it be that I forgot to import something or is there a glitch with the library itself?

If anyone could provide some assistance, I'd greatly appreciate it.

Thank you

Check out the Library here

View DEMO here

HTML Code Examples:

<h2>Result:</h2>
Regular Input box <br><code>&#x3C;input type="text"&#x3E;</code> <br>
<input type="text">
<br><br>
Duration Input box <br><code>&#x3C;input class="html-duration-picker"&#x3E;</code> <br>
<input type="text" class="html-duration-picker">
<br><br>
Hide Seconds <br><code>&#x3C;input class="html-duration-picker" data-hide-seconds&#x3E;</code> <br>
<input type="text" class="html-duration-picker" data-hide-seconds>
<br>
javascriptangulartypescript

Answer №1

It seems you missed initializing it (I found this in the documentation of the library provided):

import { Component, VERSION } from '@angular/core';
import * as HtmlDurationPicker from 'html-duration-picker';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  ngAfterViewInit() {
    HtmlDurationPicker.init();
  }
}

UPDATE:

You can check out the revised stackblitz example here: https://stackblitz.com/edit/angular-ivy-ykqpss?file=src%2Fapp%2Fapp.component.ts

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

Manipulating prop values through dropdown selection

I'm currently working on implementing filtering based on a prop value that changes according to the dropdown selection. Here's my progress so far: template(v-for="field in tableFields") th(:id="field.name") select(@change="filterScope(sc ...

javascriptvue.jsvuejs2vuexvue-router

Executing TipTap commands from a script tag in Vue 3: A step-by-step guide

One of the components I'm working with includes the following: <button @click="$refs.image.click(); editor.chain().focus().setImage({ src: state.image }).run()"></button> <input type="file" ref="image" sty ...

javascriptvue.jsvuejs3rich-text-editortiptap

Retrieving the result of a callback function within a nested function

I'm struggling with a function that needs to return a value. The value is located inside a callback function within the downloadOrders function. The problem I'm encountering is that "go" (logged in the post request) appears before "close" (logged ...

javascriptnode.jsasynchronouscallbackasync-await

Replace the ngOnDestroy method

Is there a way to complete an observable when the ngOnDestroy is triggered? I'd prefer not to create new child components when dealing with just one component instance. I attempted to override ngOnDestroy by modifying the function in the component&apo ...

javascriptangular

The error message states: "There is no property named 'controls' on the type 'AbstractControl<any, any>'"

I have encountered an issue with my reactive form on Angular versions above 13. Despite using FormGroup and FormArray with proper typecasting, I am still facing errors. How can I resolve this? Working code in Angular 11: here Error shown in Angular 15: h ...

angularangular-reactive-forms

Preloading not working in Bootstrap Ajax Tabs

I've encountered an issue with Bootstrap Tabs and Jquery in my Asp.net MVC5 web app. Tab 1 (30days) is not loading on page load despite my efforts to troubleshoot the code multiple times. Could someone please review and identify where I may be going w ...

javascriptjqueryajaxasp.net-mvctwitter-bootstrap

Retrieving Child Route Parameters in Angular 7

Fetching the parameter 'id' only from the corresponding page component seems to be a challenge. The params id cannot be accessed from other individual components such as the header component. //The code snippet below works only in the correspond ...

angularangular6angular7router

Discovering subtype relationships in JSON with TypeScript

Consider the scenario where there are parent and child typescript objects: class Parent { private parentField: string; } class Child extends Parent { private childField: string; } Suppose you receive a list of JSON objects for both types via a R ...

jsontypescriptpolymorphism

Tips for sorting through JSON Data to isolate a particular day

I developed a Food-App that displays a different menu every day. I retrieve the local JSON Data using Axios and attempt to filter the mapped menu with .filter. My issue lies in not being able to filter specific days. I attempted to restructure the JSON Da ...

javascriptjsonreactjsaxios

Interested in accessing JSON data from another domain? CORS has got you covered

Over at localhost:8080/abc/v1/doc, I get some json data when accessed directly from the browser's address bar. Here are the response headers: Response Headers Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, OPTIONS Cont ...

javascriptajaxrestcross-domain

Check Image Dimensions prior to Image Loading

I've been working with JQuery Masonry and would like to incorporate Lazy Load using a WordPress plugin to load images only when they come into view. The issue I'm facing is that when Lazy Load is used, the masonry elements don't recognize t ...

javascriptjquerylazy-loadingjquery-masonryimage-size

I am experiencing an issue where the custom form validation directive in AngularJS is not functioning properly within my modal

To enhance the validation of my input boxes, I created a custom directive called nx-validate. This directive is designed to be added to a bootstrap div.form-group, which will then check if the <input/> field is $dirty or $invalid, and apply the appro ...

javascriptangularjshtmltwitter-bootstrapangularjs-directive

Typing in Angular's decimal pipe results in inaccurate rounding up

Utilizing the decimal pipe from Angular, here is an example: <input pInputText type="number" [ngModel]="factor | number: '.2'" (ngModelChange)="factor=$event"> Upon loading my page, it correctly displays factor as 50.00 which is set in my ...

angular

Encountering NullInjectorError while testing Angular unit tests: DatePipe provider is missing

I have been working on implementing unit tests for a service that has dependencies injected from two other services. One of the injected services utilizes the Angular DatePipe, so I am utilizing the Angular TestBed to automate the process. However, when ru ...

angular

Creating sitemaps for multi domain websites using NextJS

We are implementing a next-sitemap package to generate sitemaps for our Next.js pages located in the /pages directory. For pages that come from the CMS, we use server-sitemap.xml with SSR. Despite having 6 different domains, we manage them within a single ...

javascripthtmlreactjsnext.jsseo

Refresh the Angular2 API at regular intervals to monitor any updates in the response

Is it possible in Angular 2 to monitor changes in the API? Here is my scenario: I upload a document to an API at /document/upload This API returns a DOC ID When I make a call to /document/DOC_ID, the API responds with JSON in this structure: "errorCo ...

ajaxrestangularrefreshangular2-http

Tips for incorporating an anchor tag within an img tag in HTML?

Is it possible to add an anchor tag inside an img tag in HTML? <img src="img.jpg" alt="no img" /> I want to include the following inside the img tag: <a onclick="retake();" > Retake </a> The goal is to allow users to retake a photo by ...

javascriptjqueryhtml

Dynamically set the value of a form in <mat-select> using binding

In my 'div' element, I have implemented a "mat-select" feature that contains a dropdown of country lists in a multi-select format. I am looking to automate the process of populating the countries within the "mat-select" when a button is clicked. ...

angularangular-material

Navigating to lower levels of JSON data in JavaScript instead of starting with the top level

Using a microservice, I fetch multiple sets of JSON data and display them on a Vue.js-powered page. The structure of the data is as follows: {"data":{"getcompanies": [ {"id":6,"name":"Arena","addr ...

javascriptjsonjavascript-objects

Check if all items in the array exist in Mongodb, then update them; if not, insert

In my database, I have a collection of tags and I want to perform the following actions when a user enters an array of tags: If a tag in the array already exists, update its count If a tag in the array does not exist, insert it with a count of 0 Current ...

javascriptnode.jsmongodbexpressmongoose