Troubleshooting: Configuring dynamic minimum time for <input type='time'> in AngularJS not functioning as expected

Can someone help me with setting the minimum time dynamically to the current time? For some reason, it's not working and I'm not getting any error messages. Where did I make a mistake?

$scope.mintime = new Date();
<label class="item item-input item-stacked-label">
  <span class="input-label" >Preferred Time</span>
  <input type="time" class="input-control" name="requestTime"  ng-model="request.time" ng-change="checktime();" min="{{mintime | date:'hh:mm a'}}" required>
</label>

Answer №1

Give this a shot :

min="{{mintime | date:'HH:mm:ss'}}"

Formatting is the key here :)

Answer №2

<form name="myForm">
  <label class="item item-input item-stacked-label">
    <span class="input-label">Preferred Time</span>
    <input  type="time" class="input-control" name="requestTime" ng-model="request.time" ng-change="checktime();" min="{{date | date:'HH:mm:ss'}}" required>
  </label>

  {{myForm.requestTime.$valid}}

  <button type="submit">Submit</button>
</form>

angular.module('sampleApp', [])
  .controller('myCtrl', function($scope) {
  $scope.date = new Date();
  })

Feel free to view the demo on http://jsfiddle.net/ebinmanuval/jzczzz40/

If not, you can verify the value in the ng-change directive

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

Continuously send HTTP requests to the page until receiving a status code of 200, then proceed to redirect to the same page

I am new to JavaScript and seeking advice on how to tackle this task. I have attempted the following approach, but it is not functioning correctly: while (status !== 200) { checkPage(); } function checkPage() { var xhr = new XMLHttpReque ...

Struggling to delete elements from observable array within Knockoutjs framework

I am attempting to use knockoutjs to remove a user from an observable array called users. It seems like my viewModel may not be working correctly because it is within a document.ready function. Here is some context about the code below: My application fet ...

Issues with Ionic Toggle displaying incorrect value

I created a basic test using an ionic toggle, but I'm encountering an issue where my alert returns False when the toggle is set to True and True when it's set to false. Any suggestions on how to fix this? http://codepen.io/anon/pen/jtKCf $scope ...

What is the best way to save and retain cache data for an audio file?

I have a website where I am using an audio file in .swf format. This audio file can be turned on and off with the options provided: AUDIO ON and AUDIO OFF. However, I am facing the issue that the audio keeps playing repeatedly even after being turned off. ...

In Internet Explorer, transitions do not always play correctly when using ng-animate and ng-if

I am facing an issue with a simple div that has a transition effect. It goes from a yellow background to a red one. <div class="bar" ng-class="{'bar-visible': vm.visible}"> The transition works smoothly when the bar-visible class is added ...

Avoid revealing sensitive information by refraining from utilizing the Json decode() function

After successfully storing values in an HTML table to a MySQL database, I encountered an issue when trying to fetch the data using Json decode(). The HTML table did not display any data on the web page, and there were no errors thrown. Below is the PHP co ...

A step-by-step guide on toggling between light mode and dark mode using water.css

Implementing the water.css on my website, I have this JavaScript code: function setTheme(themeName) { localStorage.setItem('theme', themeName); document.documentElement.className = themeName; } // function to toggle between light and dark ...

When a HTML table is generated from imported XML, DataTables will be applied

I am facing a challenge with my code and would appreciate some help. I am trying to load an XML file using jQuery and then use DataTables on my HTML table. However, the plugin doesn't seem to be functioning correctly. When I manually create an HTML ta ...

What causes ngClick to stop working following $compile?

http://plnkr.co/edit/kL2uLPQu2vHHKIvRuLPp?p=preview Upon button click, the controller calls a service to compile HTML and inject it into the body. The compiled HTML (displaying "Hello World" from $scope.name) is referring to the scope of the controller, ...

Resolving the Persistence Problem of Navigation Bar Fading In and Out

I've been struggling for hours trying different methods to achieve the desired outcome, but unfortunately, none of them have worked as expected. My goal is simple: I want the fixedbar to fade in when the scroll position exceeds the position of the ph ...

Column Locking with Merged Rows

I have implemented row spanning in jqgrid by following the instructions provided in this answer: Jqgrid - grouping row level data However, I am facing an issue where setting a column with row span to frozen = true causes the overlay to lose the row spanni ...

What could be causing wavesurferjs to exceed the boundaries of its parent div?

I need assistance with my wavesurferjs issue The waveform is overflowing the parent div This problem occurs for the first time and upon resize of the parent div Upon resizing, it should automatically adjust to fit the parent div Question: When the pare ...

Chrome renders the javascript source file in a jumbled and unreadable format

I'm new to a project and I've noticed that the javascript files I edit in my IDE appear differently in Chrome. For instance, here is a code snippet from Intellij: https://i.sstatic.net/1ygfg.png Even though this code is in a file named MNV.js, ...

Utilize AJAX to parse an HTML Table retrieved from an ASP page and extract targeted cell data

Within our work intranet, there exists an ASP page that retrieves data from a variety of sensors. This data is organized in a table format with multiple rows and columns. It struck me as interesting to showcase some of these outputs on our department&apos ...

Prevent Cookie Access from AJAX REST Request in JavaScript

We are in the process of developing a mobile application using web technology. Our endpoint (weblogic 11g) sends both a jessionid cookie and a _wl_authcookie_jessionid_ cookie which are automatically sent back to the server for authentication purposes. How ...

React: image appearing in DOM but failing to render on screen

As I work on developing a web application using React, my focus is on creating cards that consist of header text and an image. However, I have encountered a problem with displaying the image properly. When I import the image and attempt to use it in my co ...

What is the correct way to utilize ng-if/ng-show/ng-hide to hide or show HTML elements within the app.run function

I am currently working on developing an app that loads views correctly. HTML: <body> <loading outerWidth='1000' outerHeight='1000' display='isReady'></loading> <div class='wrapper' ng-sho ...

Verify if a particular string is present within an array

I am in possession of the key StudentMembers[1].active, and now I must verify if this particular key exists within the following array const array= ["StudentMembers.Active", "StudentMembers.InActive"] What is the method to eliminate the index [1] from Stu ...

What are the steps for releasing a collection of Vue.js components?

Currently, I am working on a project that involves a Vuex module and abstract components that users can extend. My goal is to clean up my codebase by separating this project into a well-tested module and publishing it on NPM. In order to achieve this, I ha ...

Determine the HTTP request method when capturing AJAX responses

As I take control of all AJAX responses on a global scale, I find myself searching for an elegant solution to identify the method (such as POST/PUT/GET) that was initially used to make the request triggering the intercepted response. Below is my approach ...