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

I encounter an issue when trying to declare an enum in TypeScript

At line 26 in my typescript file, the code snippet below shows an enum definition: export enum ItemType { Case = 'Case', Study = 'Study', Project = 'Project', Item = 'Item', } I am currently using Visual Stu ...

typescript

What is the process for defining functions with distinct data types while allowing variables to have multiple data types?

I am facing a declaration issue - or rather, a challenge in comprehending Typescript. Let me illustrate the scenario: public migrationSource: Skater | Rink; public migrationDestination: Skater | Rink; public migrationMode: MigrationMode; ngOnInit() { ...

angulartypescripttypescript-generics

Tips for fixing TypeScript compiler error TS2339: Issue with accessing 'errorValue' property in Angular 5 project

Within a component, I have developed a function to manage errors returned from a Rest Service and determine the corresponding error message to display to the user. This method accepts an error object (custom data structure from the service), navigates to e ...

angulartypescripttslint

Save user input data into an Excel file using PHPExcel

Could someone assist me with storing values from my form inputs to Excel using PHPExcel? I have successfully stored data from my table to Excel, but now I want to store the values from my inputs. Can anyone help me, please? Example of the form inputs: ent ...

javascriptphphtmlmysqlphpexcel

underscore.js does not allow data to be manipulated outside of the _.each

Struggling to get my head around utilizing the underscore loop in jQuery's $.ajax function for retrieving a JSONp file... Within the success section, I have the following code snippet: success : function(response) { var dataResp = '' ...

javascriptjqueryajaxunderscore.jsunderscore.js-templating

What sets apart optionalDependencies from peerDependencies in the Meta optional?

Why are both marking dependency as optional and what is the specific use-case of each? Is peerDependenciesMeta intended for npm packages while optionalDependencies is meant for projects? For example, in my npm package, certain modules require dependency ...

javascriptnpm

Facing troubles with the file format while trying to upload a CSV file to dropbox.com

My goal is to develop a Chrome extension that allows users to upload files directly to Dropbox.com. While most aspects of the functionality are working smoothly, I am encountering some challenges with the CSV format. The code snippet below demonstrates how ...

javascriptajaxgoogle-chrome-appdropbox-apiexport-to-csv

Add an HTML template tag in Vuetify using scripting

This is my current template tag: <template> <h1>Explore in VR</h1> </template> Within my script tag, I've included the following code: var viewer = new AFrame.WebVRViewer(); viewer.setSize(window.innerWidth, window.innerHeig ...

javascriptvue.jsvuetify.js

Show data stored in a MongoDB collection as an HTML table by utilizing Angular CLI as the frontend interface

Hey there, I am currently diving into the world of nodejs, mongodb, and angular cli. As part of my college project, I'm facing some challenges. Specifically, I need to showcase the array data from mongodb on an existing table within the angular compon ...

arraysangular

Scope management of Angular 6 fields within nested anonymous functions

While working with OpenLayers, I have encountered an issue accessing my fields within inner scopes of function calls. Here is an example: method() { this.myField.on('click', function (args) { this.myFieldThatIsntInScope(evt.pixel, fu ...

angularangular6

Unusual outcome observed when inputting a random number into HTML using JavaScript

In my HTML file, I am trying to input a number within 50% of a target level into the "Attribute" field. Here is the code: <!DOCTYPE html> <html> <body> <input type = "number" name = "playerLevel" onchan ...

javascripthtmlrandom

What could be triggering the "slice is not defined" error in this TypeScript and Vue 3 application?

I have been developing a Single Page Application using Vue 3, TypeScript, and the The Movie Database (TMDB) API. In my src\components\MovieDetails.vue file, I have implemented the following: <template> <div class="row"> ...

typescriptvue.js

Slate - developing a TypeScript function to filter and retrieve an object containing the highest property value

Check out this NEW RELATED QUESTION: I need to extract the largest number from a given object set. I am struggling with finding a solution. I have tried using max but I think my skills are lacking. Here is the code I have so far: @Function() pub ...

typescriptpalantir-foundryfoundry-slate

Challenges encountered when setting a value to a custom directive via property binding

I'm working on a question.component.html template where I render different options for a specific question. The goal is to change the background color of an option to yellow if the user selects the correct answer, and to red if they choose incorrectly ...

angularangular-directive

Transferring data from a table to another window

Currently, I am retrieving values from a database and displaying them in a table. I would like to add a button to each row that will allow users to view more details about that specific row. At the moment, only ThesisID, AuthorID, and Title are visible. ...

javascriptphphtmlajax

Using the Angular translate filter within a ternary operator

I am currently working on translating my project into a different language. To do this, I have implemented the Angular Translate library and uploaded an external JSON file containing all the translations. Here is an example of how it looks: { "hello_wor ...

javascriptangularjsangular-translate

Guide to adding a JS file from npm package to a new page in Nuxt.js

I am facing an issue where I have multiple npm packages containing client-side scripts that I need to include in different pages of my Nuxt.js project. I attempted to achieve this by using the following method: <script> export default { head: { ...

javascriptvue.jsnpmnuxt.js

Deleting a li element within an AJAX response function can be accomplished by targeting the specific

I am attempting to remove the li element that is the parent of the clicked a element. Here is the code I am using: function vanish(id_arg){ $.ajax({ url: "/vanish/", type: "POST", data: {id_to_delete: id_arg}, ...

javascriptpythonhtmlajaxdjango

Asking for something with no discernible purpose

I'm currently working on implementing a button that will trigger a request to display a login page. My goal is to restrict access to the login page only to project admins. To achieve this, I have their IP addresses and cross-reference them with those ...

javascriptnode.jsmongodbejs

iOS creates dynamic images with artifacts that appear on a generated and animated canvas

I am currently developing an HTML5 web application for WeChat, compatible with both iOS and Android devices, using only pure JavaScript without any third-party libraries like jQuery. The main feature of my app involves creating visually appealing animation ...

javascriptandroidioshtmlcanvas