Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do you convert a JavaScript date to UTC?
In this tutorial, we will learn to convert the date to UTC. The full form of the UTC is the universal time coordinate, and it is a standard time that is considerable in every country.
Let’s understand the need to convert the date to UTC by example. You have created the chat application. Users from various countries are using your application. Suppose that one user is from the USA and another from India. Both have a different time zone. So, you can either show the user to message received or send time in the local time or the UTC.
There can be many other uses. Below, we will see different methods to convert the normal date string to UTC.
Using the toUTCString( ) and toISOString( ) Methods
In this approach, we will create the new object of the date class and apply either the toUTCString( ) or toISOString( ) method to convert the local time to UTC. We are fortunate that JavaScript provides the built-in method to convert the date to UTC.
Syntax
Users can follow the below syntax to use the toISOString( ) and toUTCString() method.
Var date = new Date(); let utcString = date.toUTCString( ); let utcString = daet.toISOString( );
Example
In the below example, we will use the toUTCString( ) and toISOString( ) methods to convert the time into the universal coordinate time.
<html> <head> <title> Convert Date to UTC. </title> </head> <body> <h2> Convert Date to UTC in JavaScript. </h2> <h4> Output, when we use toUTCString() method. </h4> <div id = "result1"> </div> <h4> Output when we use toISOString() method. </h4> <div id = "result2"> </div> <script> let result1 = document.getElementById("result1"); let result2 = document.getElementById("result2"); // creating new date let date = new Date(); let utcString = date.toUTCString(); result1.innerHTML = utcString; utcString = date.toISOString(); result2.innerHTML = utcString; </script> </body> </html>
In the above output, users can see the difference between the output when we use the toUTCString( ) method and toISOString( ) method. The toUTCString( ) method also returns the time with the date.
Using the Moment.UTC( ) Method
In this method, we will use the Moment JS library methods. The Moment JS is the JavaScript library containing only methods to manage the date and time, making it easier to manipulate the date. Programmers can use the Moment JS either by adding CDN to the <head> section or by installing the Moment JS in an application using the npm package manager.
Syntax
Users can follow the below syntax to use the .utc() method of Moment JS.
let utcString = moment().utc(); // to convert date to utc
// to format the UTC string
let utcString = moment().utc().format("YYYY-MM-DD”);
Example
In the below example, we have added the CDN to use the Moment JS library function. We have used the moment.UTC() method to convert date to UTC. Also, we have used the .format() method to format the UTC string according to our needs.
<html> <head> <title> Convert Date to UTC. </title> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment-with-locales.min.js"integrity="sha512-vFABRuf5oGUaztndx4KoAEUVQnOvAIFs59y4tO0DILGWhQiFnFHiR+ZJfxLDyJlXgeut9Z07Svuvm+1Jv89w5g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <h2> Convert Date to UTC in JavaScript. </h2> <h4> Output, when we use moment.utc() method. </h4> <div id = "result1"> </div> <h4> Output when we usemoment.utc().format() method. </h4> <div id = "result2"> </div> <script> let result1 = document.getElementById("result1"); let result2 = document.getElementById("result2"); // creating new date let utcString = moment().utc(); result1.innerHTML = utcString; utcString = moment().utc().format("YYYY-MM-DD, hh-mm-ss"); result2.innerHTML = utcString; </script> </body> </html>
In the above output, users can see how formatted UTC string looks.
Using the Date.UTC ( ) Method
In this approach, we will get the different values for the date separately. For example, we will get year, day, date, hours, minute, seconds, etc., separately and pass it to the Date.UTC() method as a parameter. It will return a string and using returned string the new date object can be created.
Syntax
Users can follow the syntax below to use the Date.UTC() method.
var utcString = Date.UTC(date.getUTCMonth(), date.getUTCDate(), date.getUTCFullYear(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()); let utc= new Date(utcString);
Parameters
It takes different UTC values as a parameter. Users need to pass different values one by one according to they want to format the UTC string.
Example
In this example, we will get the UTC year, month, day, etc., using the different methods and pass it to Date.UTC() method and it will return the UTC string.
<html> <head> <title> Convert Date to UTC. </title> </head> <body> <h2> Convert Date to UTC in JavaScript. </h2> <h4> Output, when we use date.UTC() method. </h4> <div id = "result1"> </div> <script> let result1 = document.getElementById("result1"); var date = new Date(); // generating new date from all UTC values. var utcString = Date.UTC(date.getUTCMonth(), date.getUTCDate(), date.getUTCFullYear(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()); result1.innerHTML = new Date(utcString); </script> </body> </html>
In this tutorial, we have seen three different methods to convert date to UTC. The first approach is the easiest as it uses a single method without any parameters. The second approach is pretty good. If you are managing the date and time in a real-time application, using the Moment JS library is recommended. The third approach is only for demonstration purposes; the user shouldn’t use it as they need to write more lines of code.
11K+ Views
