Troubleshooting: JavaScript not displaying date in HTML input field

Currently, I am developing a hybrid application that utilizes both AngularJS and Angular 8. In this project, I am using a datepicker to display dates fetched from an API. However, I've encountered an issue where the date is only properly displayed when the input type is set as "text", showing the complete date. On the other hand, if I change the input type to "date", it only displays the format dd/mm/yyyy. Despite trying numerous solutions, I have not been able to resolve this issue. Any suggestions or guidance on how to tackle this would be greatly appreciated.

code

Date visible with input type set as "text"

<div class="datepicker-cont-wrap">
                        <div class="datepicker-wrap input-group">
                            <input uib-datepicker type="text" class="form-control"
                                   id="date_dead_line"
                                   placeholder="dd MM YYYY"
                                   value="{{(glPlmAsmt.data.deadline_time*1000) | date : 'dd MMM yyyy'}}"
                                   is-open = 'false'
                            >
                            <button type="button" class="btn gl-datepicker-btn"
                                    ng-click="glPlmAsmt.openDeadLineDate()">
                                <i class="glicon-date"></i>
                            </button>
                        </div>
                    </div>

Date not visible with input type set as "date"

                    <div class="datepicker-cont-wrap">
                        <div class="datepicker-wrap input-group">
                            <input uib-datepicker type="date" class="form-control"
                                   id="date_dead_line"
                                   placeholder="dd MM YYYY"
                                   value="{{(glPlmAsmt.data.deadline_time*1000) | date : 'dd MMM yyyy'}}"
                                   is-open = 'false'
                            >
                            <button type="button" class="btn gl-datepicker-btn"
                                    ng-click="glPlmAsmt.openDeadLineDate()">
                                <i class="glicon-date"></i>
                            </button>
                        </div>
                    </div>

https://i.sstatic.net/jGlAl.png

I aim to showcase the date in the format dd MMM yyyy, however, instead of displaying the full date, it only shows dd/mm/yyyy

https://i.sstatic.net/uZjS0.png

Answer №1

According to information from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date:

Please note: The date displayed may not match the actual value — the display format depends on the user's browser locale, while the underlying value is always formatted as yyyy-mm-dd.

The current value being used (

{{(glPlmAsmt.data.deadline_time*1000) | date : 'dd MMM yyyy'}}
) does not adhere to the yyyy-mm-dd format, thus causing it to appear incorrectly.

What is the reason for needing a date input in this case? It comes with its own datepicker which might conflict with the UI Boostrap datepicker. If a text input suffices, consider using one instead.

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

Responsive transparent triangle with full-width vertical orientation

I have come across numerous discussions on stack overflow regarding triangles, but most of them focus on small horizontal triangles which is not what I require. What I'm looking for is a triangle that meets the following criteria: Vertical Full wid ...

Is there anyone who can assist me in understanding the mechanics behind this text animation?

I was captivated by the captivating text animation effect on thumbnail hover in this demonstration , but unfortunately, I am unable to comprehend how it functions. I've dedicated around 4 hours searching through Google for a solution. I attempted mer ...

Tips for preloading images in a Vue ProjectWould you like some guidance

I need a solution to preload all images on the page when the routing changes. Currently, the images I am using are stored locally and loading only when scrolling, which is not ideal. I want the images to be loaded on page mount rather than when scrolling ...

Debugging client-side TypeScript with Node

Is it possible to debug client-side .ts typescript files directly from Visual Studio (2015) with breakpoints and watches? Most solutions online recommend using browser devtools like Chrome. But can it be done in Visual Studio? After creating a .ts script ...

Tips for preventing the insertion of duplicate documents in ElasticSearch

As I work on scraping a large number of items using node.js/request and then mapping the fields to ElasticSearch documents, I encounter an issue with duplicate data. The original documents contain a unique ID field that remains constant: { id: 123456 } E ...

Issue: Unhandled rejection TypeError: Unable to access properties of an undefined variable (retrieving 'data')

Currently, I am developing applications using a combination of spring boot for the backend and react for the frontend. My goal is to create a form on the client side that can be submitted to save data in the database. After filling out the form and attemp ...

Unable to locate the required conditional template for the 'mdRadioButton' directive due to the absence of the 'mdRadioGroup' controller

I am currently working on developing a custom directive that will help me display questions within a survey. Given the multiple types of questions I have, I decided to create a single directive and dynamically change its template based on the type of quest ...

A method for calculating the product of two selected numbers and then adding them together

I am currently working on a form that includes two select options; one for logo design and another for letterhead design. Users should be able to choose the quantity of each design, or both if they wish. For example, a user could select 2 logo designs and ...

"Encountered a Parsing Error: function keyword was an unexpected token in an Async Function using a more recent version of Node

In the process of working on a side project, I am utilizing node and firebase technologies. While I have successfully created regular functions and cloud functions, I encountered an issue when attempting to create an async function like so: async function ...

Displaying values in form fields when a specific class is present

Whenever I input and submit the form fields correctly using #submit_btn, my values disappear. However, when they are not valid, this issue does not occur. I attempted to address this problem with jQuery: $('#submit_btn').click(function() { i ...

Attempting to demonstrate how to handle a duplicate entry error within a MySQL database through the use of Express.js and React.js

I have developed a CRUD application that is functioning perfectly. Now, I am working on adding validation to it in order to notify users when they try to insert an entry that already exists in the database. This is what I have implemented so far: console ...

Is there a way in Jquery to remove a class?

I have created a code for a single page website where clicking on the toggle bar will display the 'ul' and clicking on one of the 'a' links will take me to the corresponding div. I want the toggle bar to automatically close back after c ...

The functionality of displaying an animated gif will not work when submitting a CakePHP ajax form before or after completion

I have exhaustively tested all possible scenarios using prototype, but I am unable to get my busy indicator to show no matter what I do. Despite cross-browser testing, I've had no luck. <?php echo $ajax->submit('Submit', array(' ...

Certain unique characters may not be easily searchable within AngularJS

Working on a search bar that pulls projects from an API and displays them. Everything works smoothly, except for when I try to search using the "#" character or any character followed by "#", nothing is returned - not even the "project not found" message ...

The JavaScript image slideshow functions perfectly when run from a local environment, however, it encounters

It seems like you all are my go-to team for JavaScript assistance. I've encountered an issue with a slideshow on my webpage. The slideshow works perfectly fine when I load the local copy of the page, but it fails to function properly when I load the a ...

Vue CLI ESLint adds extra space to multiline blocks

Working on a project set up with the VUE CLI and default settings in VSCode, I'm struggling with formatting a list at the end of a string. If I use this code: <span v-if="fruits">(<span v-for="(fruit,index) in fruits" :key="index">{{frui ...

Ensuring Bootstrap4 columns have a minimum height within a row

How can I adjust the right column in this image layout to crop the height and match it with the left column, aligning the bottoms of the images? This customization should only apply to lg+ screen sizes. An ideal solution using Bootstrap 4 without jQuery i ...

Footer not disappearing

Need assistance! My footer isn't showing up properly at the bottom even after applying clear:both. Can someone help please? If anyone can provide guidance, it would be greatly appreciated. Thanks for all your help in resolving the issue. ...

The performance of Three.js significantly decreases when utilizing onMouseMove in conjunction with RayCaster

I am currently working on an application using three.js, but I am encountering serious performance issues. This particular part of the application is inspired by the Voxel Painter example. In my version, the user initiates placement by clicking on a cell, ...

What is the best way to give an element or container a variable width rather than a fixed width?

I have a query regarding positioning and variable width. I've applied the following CSS: *{ border: 1px dotted blue; /*indicator for where every element are positioned or spaced on the page*/ } By adding this to all elements, I can visualize their p ...