How can I utilize input type duration? I want users to be able to input a time duration in the format of 06:30:27:15 ( hh:mm:ss:ms ), allowing for values between (0-23:0-59:0-59:0-59).
Any assistance would be greatly appreciated!
IMPORTANT!: This implementation should be done using Angular2+.
Regrettably, HTML inputs and JavaScript do not natively support a data type for duration. The <input type="time"> element is designed for inputting a time of the day and may display AM/PM selectors based on your location.
Your best approach would be to utilize a text input field and employ JavaScript events to automatically insert : while disregarding invalid entries. Utilizing the pattern attribute can also aid in this process. Ensure to convert the value into a number before utilizing it within JavaScript. Below is a starting point for you:
let durationIn = document.getElementById("duration-input");
let resultP = document.getElementById("output");
durationIn.addEventListener("change", function (e) {
resultP.textContent = "";
durationIn.checkValidity();
});
durationIn.addEventListener("invalid", function (e) {
resultP.textContent = "Invalid input";
});input:invalid:not(:focus) { background: red; }<input id="duration-input" type="text" required pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}:[0-9]{2}" value="00:00:00:00" title="Enter a duration in hh:mm:ss:ms format">
<p id="output"></p>There are likely numerous open-source libraries available that offer pre-built widgets for handling durations.
Here is a suggestion you could consider:
<input type="time" step="0.001">
<label for="appointment">Select a time for your appointment:</label>
<input type="time" id="appointment" name="appointment"
min="09:00" max="18:00" required>
<small>Operating hours are from 9am to 6pm</small>
Give this a shot... Hopefully, it proves useful! This is something I included in one of my projects...
Here is a sample of the data I have: data = [ [ {"name":"cpumhz","data":[[1433856538,0],[1433856598,0]]}, {"name":"mem","data":[[1433856538,13660],[1433856598,13660]]} ], [ {"name":"cpumhz","data":[[1433856538,0],[1433856598,0]]}, {" ...
Currently facing an issue where I am unable to retrieve Object3D from the scene, despite the mesh objects being displayed within the scene. Strangely, the scene.children array does not reflect this. Take a look at the screenshot here Here is the code sni ...
How can I properly bind to myVariable even if it may not be present? (myVariable comes from a service that may not always be active) <input pInputText type="text" [size]="size" [value]="myVariable" style="cursor: poin ...
In my project involving node.js and connection pooling, I have noticed that despite releasing connections after each query as shown below: return new Promise((resolve, reject) => { sql.getConnection(function (err, conn) { if (err) { ...
Check out this jsFiddle example: http://jsfiddle.net/fThMa/2/ By clicking inside the note or rend text fields and then double clicking any of the 4 TDs below, you can insert the appropriate HTML entities into the note or rend text fields. This also includ ...
app.module.ts getHttpParams = () => { const httpParamsInstance = new HttpParams(); console.log(this.userForm.controls) Object.keys(this.userForm.controls).forEach(key => { console.log(this.userForm.get(key).value) const v ...
Currently, I am in the process of writing unit tests to cover the http requests of my app. Using Jasmine and Karma, I have been following a tutorial on how to use $httpBackend from https://docs.angularjs.org/api/ngMock/service/. However, I encountered an e ...
Recently, I attempted to implement a script to achieve the masonry effect on my website. The script I used is from $(function() { $("#new").masonry({ itemSelector: ".element", columnWidth: function(containerWidth) { return containerWidth ...
I have upgraded my vbulletin to version 4.2.0 and I successfully added a custom button to its editor following this tutorial: Now, I am trying to incorporate a syntax highlighter code using this button. When I use the code provided below, it works perfec ...
I am facing a challenge with handling exceptions properly when submitting in redux forms. I want to display a toast message when an error occurs. LogIn.js: class LogIn extends PureComponent { onSubmit = (values) => { const { login } = this.props; ...
After developing a site with Angular, everything was running smoothly on my local host. However, when I decided to host the site on GitHub, two errors appeared. You can access my site through this link: Here is a screenshot of the errors encountered [1]: ...
I have an HTML form with a specific code snippet: #stoppage_section .stoppage{ cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } <div id="st ...
Our app features a dynamic grid loaded with multiple tabs, each containing one or more grids. The issue currently is that when the application loads, it automatically calls all the URLs instead of waiting for the user to click on a tab. We want to optimi ...
What are the advantages and disadvantages of using multiple forms on a single web page compared to using one form with multiple submit buttons? Is there any noticeable difference? ...
I came across a solution on how to download a file from an asp.net API at this link: As a result, I created an API handler with the following code: public HttpResponseMessage Post([FromBody]dynamic result) { var localFilePath = graph ...
One of the components in my project retrieves a category using a resolver. Here's how it's done: ngOnInit() { this.category = this.route.snapshot.data['category']; } It works great and fetches a list of users which make up the cat ...
I am facing an issue with converting a JSON structure into another format. I would appreciate any help or suggestions on this matter. I have tried different methods and alternatives for conversion, but I am still searching for the most efficient way to a ...
Is there a way to design an image slider similar to this with rounded bottom images? ...
I previously used [email protected] and recently updated to angular-cli@webpack beta.11. After making several custom changes, I finally managed to get it working. However, the issue now is that I am unable to debug my Angular application using Websto ...
I have been working on making the search bar in the top right container responsive so that it shrinks down enough to prevent overlap with other icons. Here is an example of what I am trying to achieve: Image showing issue at 600px window size To achieve ...