difficulty encountered when assigning server-requested date value in AngularJS

I am currently utilizing AngularJS to display data from a server. Everything is working smoothly except for one issue - the date value is not being displayed when using input type "date". However, when I switch the input type to "text", it works perfectly fine. Below is the code snippet:

HTML Code:

<body ng-app="myApp" ng-controller="customersCtrl">
    <input type="date" ng-model="x.sdate">
</body>

JavaScript Code:

<script>
  var app = angular.module('myApp', []);
  app.controller('customersCtrl', function($scope, $http,$filter) {
    var param = getParameterByName('id');
    $http.get("http://socialdeal4u.com/demo/survey/api-delete.php?id="+param)
       .success(function (response) { $scope.x = response; });
</script>

I would greatly appreciate any insights on what might be causing this issue. Thank you!

Answer №1

In my previous comment, I highlighted the importance of the model for <input type="date"> being a Date object.

To make it work properly, you must convert the data from your API, which is currently in string format, into a Date. Here's an example:

$http.get('http://socialdeal4u.com/demo/survey/api-delete.php', {
    params: {id: param},
}).then(function(response) {
    $scope.x = response.data;
    $scope.x.sdate = new Date($scope.x.sdate);
});

It is essential that the sdate string in your API response follows the ISO 8601 standard or can be used as input for the Date constructor.

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

What could be causing my browser to display "uncaught referenceerror" in this situation?

Just running some browser tests to troubleshoot - everything's smooth sailing until this line is reached: responseJson = JSON.parse(localReq.responseText); So, when I evaluate JSON.parse(localReq.responseText), the correct value comes through. But a ...

Encoding data using Angular

I have encountered a situation where my code needs to retrieve table numbers using Javascript and PHP as the database connector. However, when the code works successfully, it displays both the parameter name and value, but I only need the value. How can I ...

Insert a new store into an existing IndexedDB database that is already open

After opening and passing the onupgradeneeded event in IndexedDB, is there a way to create a new store? My attempted code: var store = db.createObjectStore('blah', {keyPath: "id", autoIncrement:true}); This resulted in the following error mess ...

Attempting to upload an item using the OBJLoader tool on my own computer | Three.js

I've been experimenting with integrating 3D objects into a web page using three.js and a .obj file. Despite my efforts to use OBJLoader to load the file onto the HTML view, I've encountered some difficulties. I even tried different loaders, but n ...

Why isn't the hover function working on the table row element?

When I try to apply a hover effect on tbody and td elements, it works perfectly. However, when I apply the same effect to the tr element, it doesn't work as expected. I am using inline style (js pattern) rather than CSS code and incorporating Radium i ...

Choose an input field using jQuery that is specified by its name

I am currently using jquery form validator to validate all the fields within my form. Within the form validator, I have implemented the following code snippet to determine if an input field is labeled with the name minExperience. errorPlacement: function ...

Two vertical containers dynamically adjusting their height together

I am facing a challenge with two containers that need to share the height of their parent element. The second container is added dynamically when needed, and both containers may contain a lot of content, requiring scroll capabilities. While I have a solut ...

The error "ReferenceError: Component is not defined in Meteor" indicates that the Component

I'm facing an issue while trying to display my Deal component and encountering the error mentioned below. I am currently utilizing Meteor along with ReactJS. Uncaught ReferenceError: Deal is not defined at meteorInstall.imports.routes.routes ...

Issue with combining an AngularJS template generated from ng-repeat with a custom directive on the same element

Currently, I have implemented an ng-repeat directive on an element to loop through an array in the scope. Additionally, I have a custom directive (used to create a jquery widget) applied to the same element. The issue arises because the custom directive i ...

Incorporate different courses tailored to the specific job role

https://i.stack.imgur.com/iGwxB.jpg I am interested in dynamically applying different classes to elements based on their position within a list. To elaborate: I have a list containing six elements, and the third element in this list is assigned the class ...

Identify alterations in an input field after selecting a value from a dropdown menu

Is there a way to detect changes in the input field when selecting a value from a drop-down menu, similar to the setup shown in the image below? html: <input type="text" class="AgeChangeInput" id="range"/> js:(not working) <script> $(docume ...

Switching between various dropdown options does not produce any noticeable differences in the (React) interface

I am experiencing an issue with my dropdown menu where selecting different values no longer triggers any changes. This was working perfectly fine before. Below is the code I am using: context.js: import React, { useState, useEffect } from 'react&apo ...

Javascript is responsible for causing a div to become stuck in a loop of alternating between

My current challenge involves a JavaScript function that manipulates boxes by toggling classnames. The strange issue I'm facing is that the correct classes are being set at the correct times, but the div keeps alternating between the original class an ...

Verifying the outcome of sampling the mongoose

During my research, I encountered a roadblock. I was trying to determine if a value existed in MongoDB db collection documents using Mongoose. I had a function set up to search for a DB entry using findOne. When stripping away the unnecessary parts of the ...

What is the best way to effectively adjust the code structure in a Node.JS project?

[Summarized] Focus on the bold parts. Although I am relatively new to Node.JS, I have been able to successfully build some projects. However, I have come across a burning question that has left me frustrated after searching Google for answers without much ...

What could be causing the inconsistency in the persistence of my React useState hook's state?

I am currently working on developing an information panel in React that displays the most recent activity from an online community, specifically highlighting the latest individuals who have registered for the community. At the moment, I have a list of the ...

The Angular directive ng-model is not able to return a value

I'm currently troubleshooting an issue with the filters in an older project. Here's the HTML snippet: <input type="text" class="form-control" ng-model="FilterEventsEdit" ng-change="FilterEvents()" ...

JavaScript threw a SyntaxError: Unexpected character in line 1 while trying to parse JSON

I have a situation in Python where I load a variable with data and then convert it to JSON using the following code. jsVar = (json.dumps(jsPass)) This code produces the following output: {"TT1004": [[1004, 45.296109039999997, -75.926546579999993, 66.9966 ...

The TypeScript compiler does not allow a 'number' type to be assigned to 0, 10, or 20, even when the number itself is 0

When testing out my code snippet on the playground for Typescript, an error appears on line 24. I discovered that the issue can be resolved by explicitly casting commands back to <IPlan[]>, but I wonder why this extra step is necessary. Property &a ...

Stellar Currency Swap

I'm having trouble updating currency exchange rates using the select tag and fetching values with jQuery. Initially, I planned to use {{#if}} from Meteor handlebars to handle the logic. I intended to switch currency fields using MongoDB when the user ...