Develop a custom time input mask in AngularJS controller

Question

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?

javascript angularjs mask angularjs-filter

Answer 1

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>

Answer 2

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>

Develop a custom time input mask in AngularJS controller

Answer №1

Similar questions

What are the steps to resolve a peer dependency problem with npm?

Using HTML and JavaScript to choose relatives from the extended family: Uncles and Aunts

Having difficulty implementing two-way binding on SELECT element within Angular JS programmatically

storing negative floating point numbers in an array using regular expressions in JavaScript

Utilizing a combination of CSS and JavaScript, the traffic light can be altered to change based on

Adding parameters to a URL is a common practice

Is there a way to simulate pressing a keyboard button using jQuery?

Incorporating TinyMCE into numerous dynamically generated text areas

How to Initialize Multiple Root Components in Angular 4 Using Bootstrap

Tips for crafting services using $q and $http requests while avoiding redundancy

Issue with $watch function causing $scope variable to remain undefined, even though it is being explicitly

Unleashing the power of React: Integrating raw HTML <a href> tags with JavaScript

How can I trigger the execution of textarea HTML code with an onClick event using JavaScript?

Sending an object and array using an Angularjs service: An easy step-by-step guide

Using raphaeljs and freetransform in conjunction with clip-path

The $injector:modulerr error in AngularJS occurs when dependencies are not loaded before the controller is invoked

Using Google Cloud Function to write and read a JSON file

Explore additional sub-categories by clicking on them with the help of jQuery or alternate techniques

Removing a CSS class using JQuery

How can I conditionally disable a button in Vue.js using an if statement?