Develop a custom time input mask in AngularJS controller

In my AngularJS controller, I have the following code snippet:

$scope.detailConfig = [{
     title: $filter('translate')('bundle.app.HORA_MINUTO_INICIAL_DESCONSIDERAR'),
     property: 'faixaHorariaInicial',
     type: 'text'
 },{
     title: $filter('translate')('bundle.app.HORA_MINUTO_FINAL_DESCONSIDERAR'),
     property: 'faixaHorariaFinal',
     type: 'text'
 }];

Using this code, I am rendering two input fields. I want to add a time mask to these inputs so that users can only enter the time in the format hh:mm.

Can you please guide me on how to achieve this?

javascriptangularjsmaskangularjs-filter

Answer №1

When working with an input without tags in JavaScript, it can be a bit challenging to determine what you're dealing with. However, if you have a Date object, you can utilize the following function to output a string in the format "hh:mm" as per your requirement.

var myDate = new Date();

function getTime(d) {
    hours = d.getHours();
    minutes = d.getMinutes();
    return hours + ":" + minutes;
};

var myTime = getTime(myDate);
// this will yield "10:59"

If you are actually using an html Input, I suggest exploring one of the solutions mentioned here. This method will ensure that the input aligns with the value specified in the $filter within your controller. For your scenario, you could implement it as follows:

$scope.tToDisplay = $filter('date')($scope.timestamp, 'HH:mm');

and 

<input ng-model="tToDisplay"></input>

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

The XMLHttpRequest response states that the preflight request did not meet the access control check requirements

I am attempting to subscribe to a firebase cloud messaging topic by sending an http post request. var data = null; var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.addEventListener("readystatechange", function () { if (this.readyState ...

javascriptangularxmlhttprequesthttp-postfirebase-cloud-messaging

What is the method for a HTML button to trigger the execution of a Selenium (Java) code located in a remote location through a

I need to run a Selenium Code written in Java from a NAS (Network Attached Storage) or another connected machine. My goal is to create a web page with a button that, when clicked, triggers the execution of the Selenium script located on the connected mac ...

javascripthtmlseleniumuibuttonbuttonclick

At what point are DOMs erased from memory?

Recently, I've been working on an application that involves continuous creation and removal of DOM elements. One thing I noticed is that the process memory for the browser tab keeps increasing even though the javascript heap memory remains steady. To ...

javascripthtmldommemory-managementmemory-leaks

Turn off Babel's strict mode when transpiling JavaScript files

Currently, I am facing an issue while trying to transpile a set of JavaScript files using Babel. Since Babel operates in strict mode by default, it triggers a syntax error whenever there is a conflict like the use of the delete keyword. The solution I am s ...

javascriptnpmbabeljs

Issue with improper lighting on Three.Geometry objects when using LambertMaterial in Three.js

After enhancing my initial version of this inquiry (previously asked question) with a JSFiddle showcasing the latest build of Three.JS and illustrating the lighting issue on Three.Geometry, I encountered difficulties with dependencies in Stack Snippets. Ho ...

javascriptthree.jslighting

An argument error in IE 8 caused by an invalid procedure call

Is there a way to access the opener's class in a child window created using window.open? This works smoothly in W3C browsers, but fails in IE 8. On the other hand, I tested using an iframe and it seems to work fine across all browsers. The main goal o ...

javascriptinternet-explorergoogle-maps

Refreshing a Vue JS component

As a beginner in VueJs, I am facing an issue with reloading a component and table when a refresh button is clicked. I have tried using the forceUpdate method and changing keys, but it has not been successful so far. If anyone has any suggestions on how to ...

javascriptvue.jsvue-componentreload

Different choices for data attributes in React

Recently, I downloaded a new app that requires multiple API calls. The first API call retrieves 20 Objects, each with its own unique ID. The second API call is made based on the IDs from the first call. To display this data in my component: <div> ...

javascripthtmlreactjs

Delay the loading of JavaScript libraries and multiple functions that are only executed once the document is

After learning how to defer the loading of JS libraries and a document ready function from this post, I encountered a challenge. The code I currently have handles multiple document ready functions inserted by different modules, not on every page. echo&ap ...

javascriptjqueryoptimizationdeferred-executiondeferred-loading

Can someone guide me on the process of adding a personalized emoji to my discord bot?

After creating my own discord bot, I'm ready to take the next step and add custom emojis. While tutorials have helped me understand how to use client.cache to type an emoji, I'm unsure of how to upload them and obtain their ID for use in my bot. ...

javascriptnode.jsnpmdiscord.jsemoji

Dealing with adding up optional values from v-model in Vue.js can be a challenging task

Within this function, I need to display the remaining amount. remainingAmount: function() { return parseFloat(this.sumAmount) - (parseFloat(this.cash) + parseFloat(this.kNet) + parseFloat(this.kNetOnline)); } The three parameters cash ...

javascriptvue.jsecmascript-6vue-component

Include a Vue component within another Vue component in a Laravel application using VueJs

I've recently integrated Vue.js into my Laravel project and encountered an issue when trying to call a component within another component. After running the command npm run dev, I received a webpack error. Here is the code snippet from my parent comp ...

javascriptlaravelvue.jsvue-component

Storing a string in localStorage versus $localStorage in Angular 1 yields distinct value differences

I have encountered an issue in my angular controller where I am trying to save a token returned from an API endpoint as a string. In this example, I have used the variable testData instead of the actual token. var testData = "testdata" $localStorage[&apo ...

javascriptangularjsng-storage

What is the best way to ensure that posts made with Contentlayer stay dynamic for future posts on Vercel?

My issue is that on the webpage I have set up using contentlayer, I display my blog posts from GitHub through Vercel. However, when I publish a new post on GitHub, I am unable to see it because it has not been built yet. What can I do on the Nextjs13 site ...

javascriptreactjsnext.js

Replicate elements along with their events using jQuery

Every time I utilize ajax to dynamically generate new content using methods like .clone(), append(), etc., the newly created element loses all triggers and events that were programmed =( Once a copy is made, basic functionalities that work perfectly on ot ...

javascriptjqueryeventsappendclone

Using AngularJS to pass radio button value to a $http.post request

Can you please advise on how to extract the value from a radio button and send it using $http.post in AngularJS? Here is an example: HTML <input name="group1" type="radio" id="test1" value="4"/> <label for="test1">Four paintings</label ...

javascriptangularjspostradio-button

Can Firebase data be updated in real-time in a Vue app?

Utilizing Firebase for Authentication and integrating a database into a Vue app, my current task involves monitoring changes within a 'friends' collection specific to a user. The objective is to seamlessly display the list of friends while refle ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Utilizing an Async API call from a separate page and passing it as a component input

I recently set up an asynchronous API fetch in one of my .JS files and then invoked it from another JS file to output the result using console.log. (Is there a more efficient method for achieving this?) Now, my aim is to utilize the fields of the response ...

javascriptreactjsfetch

Exploring the potential of Raygun.io with Angular Universal

We are currently integrating Raygun.io APM into our Angular 8 app that utilizes Angular Universal. Raygun.io offers a client side javascript library, but to use it with Angular Universal, we need to create a DOM window API. This can be achieved by install ...

javascriptnode.jsangularangular-universalraygun.io

Next.js allows for passing dynamically loaded server-side data to all components for easy access

(I've recently started working with Next.js and inherited a project built using it, so please forgive me if this is something obvious that I'm missing) I have a set of data that needs to be loaded server-side on each request. Initially, I had im ...

javascriptnext.jsmiddlewarereact-context