Web Niraj
  • Facebook
  • Flickr
  • Github
  • Linkedin
  • Twitter
  • YouTube
Online portfolio, code examples and developer blog
  • About
  • Contact
  • Portfolio
  • WordPress
Search the site...
  • Home
  • Blog
  • JavaScript: Using Moment.js to Display Dates & Times in User’s Timezone

JavaScript: Using Moment.js to Display Dates & Times in User’s Timezone

4

The Moment.js library is a great tool to make working with dates and times easier in JavaScript. Not only does it make time / date manipulation easy (unfortunately, it doesn’t support time travel!), it also comes with timezone support. This tutorial shows how you can use Moment.js in your website or application to display dates and times in the user’s local timezone.

Prerequisites

Before you start, you need to make sure you’ve added moment.js and moment-timezone-with-data.js to your website or Cordova application.

Note: It’s recommended to use the minified files to keep your website / application page load times down.

Usage

You can guess the user’s timezone using moment.tz.guess(), which is a good starter for the default timezone to use.

You can then set the default timezone using moment.tz.setDefault(tz), where tz could be from the above guess, or a string like America/Los_Angeles

Assuming you are working with UTC times in your application, you can easily convert the UTC time to local time zone using chaining. If you’re not using UTC, you can manually convert from your timezone to the user’s timezone too.

Lines 13 and 17 show how you can convert a given date/time string to a timezone. Line 21 shows how you can convert a date/time string from one timezone to another.

Support

Other examples and a map of supported timezones can be found on the Moment.js Timezone website. Other usage examples are also included on the site.

Feel free to leave a comment below if your specific usage requirements aren’t covered elsewhere.

JavaScript, Moment.js, Time Manipulation

4 comments on “JavaScript: Using Moment.js to Display Dates & Times in User’s Timezone”

  1. Prisd says:
    June 23, 2018 at 6:39 AM

    Please i need your assistance on how to differentiate between two dates like
    (Start Date) 22/04/2017 – 24/04/2018 (End Date) with a result as 12months 2days. Should be done in client side. Any help pls

    Reply
  2. Niraj Shah says:
    June 27, 2018 at 1:34 PM

    Showing the different between two dates in number of years, months, etc is a little more complicated than you’d expect with moment. You can achieve this using the following code:

    var d1 = moment("22/04/2017", "DD/MM/YYYY");
    var d2 = moment("24/04/2018", "DD/MM/YYYY");
    
    var years = d2.diff(d1, 'year');
    d1.add(years, 'years');
    
    var months = d2.diff(d1, 'months');
    d1.add(months, 'months');
    
    var days = d2.diff(d1, 'days');
    
    console.log(years + ' years ' + months + ' months ' + days + ' days');
    

    You can remove the years if you only one months and days.

    Reply
  3. rudra chaubey says:
    January 19, 2022 at 7:17 AM

    bro how to convert current date and time to other countries date and time

    Reply
    • Niraj Shah says:
      March 4, 2022 at 12:37 PM

      See Line 13 of the example code – it converts UTC to user’s local timezone. You can replace tz with any timezone value.

      Reply

Leave a ReplyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

StackExchange / StackOverflow

profile for Niraj Shah on Stack Exchange, a network of free, community-driven Q&A sites

Support Me

Buy Me a Coffee

PSN Profile

Tags

ACL Amazon Web Services Android Android 4.4 KitKat Android 5.0 Lollipop Apache Backup Bash Bug Command Line Cordova cPanel / WHM Facebook Facebook Graph API Facebook PHP SDK 4.0 Facebook Social Plugins Fan Page Flash Geolocation Google Nexus 5 Hacking HTML5 Input Sanitization iOS JavaScript jQuery Laravel 5 Laravel 5.2 Linux Mac OS NodeJS Parse PDF PHP Plugin Portfolio Review Security Server SSH SSL Sysadmin Tutorial WordPress WordPress Plugins
© 2011-2025 Niraj Shah
  • Blog
  • Portfolio
  • WordPress
  • About Me
  • Contact Me
  • Privacy Policy
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Privacy Policy