Obtain the text that is shown for an input field

My website is currently utilizing Angular Material, which is causing the text format in my type='time' input field to change. I am looking for a way to verify this text, but none of the methods I have tried give me the actual displayed text.

I attempted to access the following element properties: value, valueAsDate, textContent, innerHTML.

Additionally, I experimented with jqlite's val() method.

To better illustrate my problem, here is a codepen showcasing it: https://codepen.io/carlins/pen/JJNJab

// The displayed text is 02:57 PM
document.querySelector('input').value         // Returns 14:57:00.000
document.querySelector('input').valueAsDate   // Returns 1970-01-01T14:57:00.000Z
document.querySelector('input').textContent   // Returns empty
document.querySelector('input').innerHTML     // Returns empty
angular.element(document).find('input').val() // Returns 14:57:00.000
javascriptcssangularjsseleniumangular-material

Answer №1

Instead of directly retrieving data from Element, it is recommended to manipulate the data first. If you want to display the data in a view, use the filter date option like {{time | date:'h:mm a'}} For obtaining the value in JavaScript, manipulate the dateformat using the time variable.

Answer №2

If your data input includes a datetime value, you can easily retrieve the datetime information using Angular's date filter. You can format the date string to meet your requirements by utilizing this feature. Feel free to view a demonstration of how it works here

For more information on date filters, you can refer to: https://docs.angularjs.org/api/ng/filter/date

$scope.getTimeString = function(){
      return $scope.time;
 }

"{{getTimeString() | date:'@h:mma'}}"

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

Determine the amount of clicks and retrieve the URL of the clicked link in Selenium using Python

As a novice in the world of Selenium and Python, I am embarking on the journey of automating banner testing using Python along with Selenium Webdriver. My goal is to keep track of the number of clicks made, ensure that the URLs are redirecting to the corr ...

javascriptpythonselenium

Arranging rows within the Zurb Foundation grid structure

As a newcomer to Zurb Foundation 5, I am currently experimenting with building a complex header bar using columns and rows. My goal is to utilize nested rows within a main row, but I am having difficulty figuring out the correct div ordering. Is it feasib ...

cssresponsive-designframeworkszurb-foundationgrid-layout

Using AngularJs ngBind may cause syntax highlighted code snippets to not display properly

For my web application, I utilized a Syntax highlighting API to highlight code snippets. To achieve this, I integrated highlightjs. Within a popup modal, I included the <pre> tag and expected it to display my highlighted xml string when opened. HTML ...

angularjsxmlsyntax-highlighting

What steps do I need to follow in order to properly execute this HTTP request?

Recently, I came across this amazing tool called SimplePush.io that is perfect for one of my projects. It works flawlessly via curl, as shown on their website: ~ $ curl 'https://api.simplepush.io/send/HuxgBB/Wow/So easy' or ~ $ curl --data &ap ...

javascriptnode.jshttpcurl

Initiate a jQuery modal dialogue box

As an apprentice with no prior experience working with JavaScript, I encountered a problem with my function that calls a popup. The function works fine on the first button, but fails to work on all subsequent buttons. Since the application keeps adding b ...

javascriptjquerybutton

Effective ways to conduct Protractor testing on angular-ui-Selectize components

I am exploring how to test a user creation form that includes multiple dropdown controls, specifically angular-ui-select elements. After searching for documentation on selecting items from these dropdowns, I came up empty-handed. This is an excerpt from ...

angularjsprotractorangular-ui

Multiple loop in Node.js with Selenium

I just completed a node script using selenium webdriver for automated testing purposes. Below is the code snippet: var webdriver = require('selenium-webdriver'), By = webdriver.By, until = webdriver.until, _und = require('unders ...

javascriptnode.jsseleniumselenium-webdriverselenium-chromedriver

Tips on utilizing a single modal to showcase various images

Based on the database table rows, my page will be populated with multiple rows (currently 32). Each row includes an image and a button/link at the end. I need a popup (#modal) to display the image fetched from the database when the button is clicked. I wa ...

javascriptphpajaxhtml

What steps do I need to take in order to transform this code into a MUI component complete with

Having some trouble converting my hero banner code to MUI in a React project. The styling is not coming out correctly. Here is the HTML code: <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120 ...

javascripthtmlcssreactjsmaterial-ui

What steps should be taken to address the issue when the .media$thumbnail.url cannot be located

Creating a custom widget for bloggers <script type="text/javascript"> function mycallback(jsonData) { for (var i = 0; i < jsonData.feed.entry.length; i++) { for (var j = 0; j < jsonData.feed.entry[i].link.length; j++) { ...

javascripthtml

The $scope.$apply function is causing an exception because a $scope.apply process is already underway

I am facing an issue while trying to update my view based on the changes made to my $scope variables. During the digest cycle, after modifying the variables, I call $scope.$apply(). However, I receive an exception saying that $scope.$apply is already in ...

angularjsangularjs-scope

How can a Selenium Python program continue executing even after encountering an error?

I've encountered a small hiccup while using Selenium to scrape data from a website. The usual HTML structure remains consistent across most shows, but there are some exceptions with less than 27 elements which causes the program to throw an error. Is ...

pythonselenium

Using JavaScript to Set Values and Manage Session State in APEX

Trying to utilize JavaScript in Oracle APEX to set the value and session state. See below function that is being called: function updateItemValue(element) { $s('P2020_SELECTED', element); apex.server.process ('MY_PROCESS', { ...

javascriptoracleoracle-apex

The ASP.NET MVC controller did not receive the JSON object properly due to some missing properties

I am facing an issue when trying to pass a JSON object to my ASP.NET MVC controller. The JSON is set in JavaScript in this way: jsonChildren = '{ "childImproItems" : [{ "Theme":"tralalali" }, { "Theme":"tralalali" }]}'; ... $.ajax({ ...

javascriptasp.netjsonasp.net-mvcasp.net-mvc-3

modify the inherent CSS property

I am working with a component that I have inherited, including its CSS style, and I need to modify one of its properties. Current CSS: .captcha-main-image { width: 100%; height: auto; } <img class ="captcha-main-image" id="captchaImage" src= ...

htmlcssangular

What are some ways to prevent manual page reloading in Node.js when using EJS?

Currently, I am utilizing Node as a server and frontend in EJS. My project involves working with socket.io, which is why it is essential that the page does not refresh manually. If a user attempts to reload the current page, the socket connection will be d ...

javascriptjquerynode.js

What strategies can be implemented to improve the total blocking time in Vue for optimal performance

I'm facing a challenge that I can't seem to resolve. My page has a high total blocking time (2+ sec). Despite trying to load every vue component asynchronously, the issue persists with 2+ sec TBT. I'm puzzled by what could be causing such a ...

javascriptvue.jsasynchronousoptimization

Inline-block divs styled with CSS3 are causing a white gap to appear at the top of

I have been searching for solutions to my problem, but I can't seem to find one that works. My goal is to create two columns that each take up 50% of the screen width. However, I am facing an issue where there is a gap at the top that I cannot seem t ...

htmlcss

Why Isn't This JPG Image Functioning Properly in HTML/CSS?

I am facing an issue with a JPG image that I am attempting to use in CSS as a background-image for a div container. For some reason, this particular image refuses to render in the viewport. Interestingly, when I inspect the element, I can see its thumbnail ...

htmlcssreactjsimagejpeg

Angular Material: styling issue with input clear button icon placement

I am currently working on implementing a feature in my first Angular application. I found this example on the official Angular Material website demonstrating how to create an input field with a clear button: https://material.angular.io/components/input/exa ...

angularangular-material