How can I display dateTimePicker in angularjs without converting the time to UTC?

Currently, I have integrated the dateTimePicker into my AngularJS application. However, I am facing an issue where the time entered by the user is being converted to a different UTC-based time that differs by several hours (refer to the screenshot below, both the component and the text next to it are using the same ng-model).

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

I am looking for a way to adjust this component so that it outputs the exact time as entered by the user. For example, in this scenario, I would like to receive "2016-05-24 12:00 AM" as the output!

javascriptangularjsdatetimepickerdatetime-format

Answer №1

When utilizing the date filter, you can exclude the timezone by simply leaving it empty, which will automatically default to the browser's timezone setting:

{{date | date: 'yyyy-MM-dd hh:mm:ss Z' : ''}}

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

Answer №2

If you need to format a date and time in your code, consider using the following snippet:

let currentDate = new Date($scope.date);
let day = currentDate.getDate();
let month = currentDate.getMonth() + 1;
let year = currentDate.getFullYear();
let hour = currentDate.getHours();
let minutes = currentDate.getMinutes();

if(day < 10) day = "0" + day;
if(month < 10) month = "0" + month;

$scope.formattedDateTime = `${day}-${month}-${year} ${hour}:${minutes}`;
alert($scope.formattedDateTime);

To convert this 24-hour format to 12-hour clock, check out these resources:

Converting 24-hour time to 12-hour time with JavaScript

JavaScript: convert 24-hour time to 12-hour time including AM/PM notation

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

Guide on notifying the client when the database is updated, similar to the notification system used in Facebook chat

Is it possible to send an alert to the client using the website only when a specific field is updated? I understand how to periodically check for database updates with silent Ajax calls, but I am looking to trigger an Ajax call only when relevant informa ...

javascriptphpjquerymysqlajax

What is the best way to organize objects by their respective dates?

I am retrieving data from a database and I would like to organize the response by date. I need some assistance in grouping my data by date. Below is an example of the object I have: var DATA = [{ "foodId": "59031fdcd78c55b7ffda17fc", "qty" ...

javascriptnode.jsmomentjslodash

The npm outdated -g command is producing an error message that states "Unable to read the length property of undefined"

I am currently facing an issue while trying to check the version status of my npm installed global packages. When I run the command npm outdated -g --depth=0 in the terminal, I encounter the following error: npm ERR! Cannot read property 'length&apos ...

javascriptnpm

How can data be transmitted to the client using node.js?

I'm curious about how to transfer data from a node.js server to a client. Here is an example of some node.js code - var http = require('http'); var data = "data to send to client"; var server = http.createServer(function (request, respon ...

javascriptajaxnode.js

Error: Unable to submit form with jQuery due to timeout issue - e[h] function not recognized

This question has surfaced on SO previously without any solution, maybe due to a different scenario Below is the form in question <form id="testSubmit" method="post" action="submit.php"> <!--The value of the following field will be collecte ...

javascriptjqueryhtmlforms

Is there a JavaScript library available that facilitates the seamless synchronization of data between clients and a node.js server?

Are there any JavaScript libraries available that can synchronize a specific set of data stored on a server, such as an array, across multiple clients automatically? ...

javascriptjqueryhtmlsandbox

What is the best way to compare two strings in an Angular.js view?

When working with two ng-repeat elements, I encountered an issue where I only want to display data when the text value of both array elements match. I attempted to use ng-show, but it does not stop the condition when the values match. <div ng-show="a ...

javascriptangularjs

Challenge in WordPress Development

As a beginner in website building, I am looking to customize the background of my pages with a solid color. The current SKT Full Width theme I am using has an opaque background which is causing the text on my slider to blend in and not look appealing. All ...

javascriptjqueryhtmlcsswordpress

Strange bug found in Firebug related to AngularJS and the ng-options directive

I encountered a strange error when using Angular's ng-options: Error: [ngOptions:iexp] Expected expression in form of '_select_ (as _label_)? for (_key_,)?_value_ in _collection_' but got 'playlist.id as playlist.name in playlists | or ...

angularjsfirebug

In Material-UI, what is the reason behind setting this variable equal to its own value?

Currently, I'm struggling to understand the reasoning behind Material-UI setting a variable equal to itself for its Popover component. Take a look at the snippet of code and pay attention to the two if blocks before the return statement. I'm cu ...

javascriptreactjsmaterial-ui

Enhancing the functionality of angular-messages is impacting the overall design of

Displaying here is the current state of my login form: https://i.sstatic.net/EMcjF.png However, subsequent to upgrading angular-message to version 1.4 and higher, the layout transforms into this: https://i.sstatic.net/vVBHf.png Sharing my source code f ...

cssangularjsionic-frameworkupgradeng-messages

CORS response header is not included

Is it the company's responsibility () to rectify one of their endpoints or is it an issue with my code? I have tested all other endpoints () using the same code below and they all function correctly, except for the specific one in question. The erro ...

javascriptcorsfetch-api

Using d3.js to toggle visibility of bars when clicking on the legend

// Handling the browser onresize event window.onresize = function () { scope.$apply(); }; scope.render = function (data) { var ageNames = d3.keys(data[0]).filter(function (key) { ...

javascriptangularjsd3.js

Trouble with populating Ext.grid.Panel from ExtJS4 JSON data

Despite researching various posts on the topic, I am still facing issues. Even after attempting to create a Panel with minimal data, I cannot seem to make it work. This problem is really puzzling me. Below is the code snippet that I am currently working wi ...

javascriptjsonextjs

Utilizing object properties to dynamically update components in VueJS

Are you familiar with dynamically changing a component using object props? App.vue <template> <div id="app"> <component :is="current['test'].target.name"> </component> <input type="bu ...

javascriptvue.jsvuejs2

Creating seamless online payments using Stripe and Bootstrap

I'm new to integrating Stripe for payment processing on my Bootstrap website and currently utilizing Stripe.js v2. As far as I understand, the process involves my HTML form communicating with Stripe via JavaScript to obtain a token (or handle any err ...

javascriptjquerytwitter-bootstrapbootstrap-4stripe-payments

Incorporating AJAX functionality into an existing PHP form

I am currently working on a PHP registration form that validates user inputs using $_POST[] requests. Validating username length (3-20 characters) Checking username availability Ensuring the username matches /^[A-Za-z0-9_]+$/ pattern and more... Instead ...

phpjavascriptjquerymysqlajax

Having issues with django-autocomplete-light triggering JavaScript errors

My implementation of django-autocomplete-light is causing some issues with rendering autocomplete options. There is a section on the website where it functions perfectly, but in another section, it only works partially. The autocomplete options display c ...

javascriptdjangodjango-autocomplete-light

Any advice on resolving sorting issues in an angularjs select box and ensuring the correct item is selected?

I need help creating an angularjs select box with a list of months. Currently, I am passing the list of month names from the server using C#. Initially, I attempted to pass the months as a dictionary: var months = new Dictionary<int, string> { { ...

c#angularjs

Popup window displaying website content upon DOM loading, ensuring compatibility across various browsers

I am facing a challenge with my HTML popup window where I need to add text after opening the window using a specific function: var win = window.open('private.php', data.sender_id , 'width=300,height=400'); win.win ...

javascriptjqueryhtmlpopup