Formatting Date in JavaScript

You can use built-in JavaScript object Date to do the date formatting in JS, you can also use Locales to format your date. I want to show date in mm/dd/yyyy hh:mm Z, I used simple trick, the format I am expecting is US format, and JS frovides API to convert Date to specific local, so I passed en-US as local parameter, and using options to get the desired output.

few of the options to instantiate Date

var today = new Date(); 
var myDate = new Date(dateString);

where dateString is string representing an RFC2822 or ISO 8601 date format e.g. 12/21/2014 00:00 GMT+5:30

Converting to Local

    var myDate = new Date();
    var options = { timeZoneName: 'short', hour : '2-digit', minute : "2-digit", hour12: false};
    var dateStr = myDate.toLocaleString('en-US', options);

In options, I specified the timeZoneName which specifies if we want a short timezone name or long, hours, minutes and hour12 which specifies if the time needs to be shown in 12 hour format of 24 hours.

Other available options

  • weekday : [“narrow” | “short” | “long”]
  • era: [“narrow” | “short” | “long”]
  • year : [“2-digit” | “numeric”]
  • month : [“2-digit” | “numeric” | “narrow” | “short” | “long”]
  • day : [“2-digit” | “numeric”]
  • hour : [“2-digit” | “numeric”]
  • minute : [“2-digit” | “numeric”]
  • second : [“2-digit” | “numeric”]
  • timeZoneName : [“short” | “long”]

And if you need to format Date to more specific date format, then can use JS Date provided methods to get specific date elements like, day, year, month time etc.

   function padZero(dateArg) {
      if (dateArg < 10) {
        return '0' + dateArg;
      return dateArg;
  function formateDate(date) {
    return date.getUTCFullYear() +
        '-' + padZero(date.getUTCMonth() + 1) +
        '-' + padZero(date.getUTCDate()) +
        ' ' + padZero(date.getUTCHours()) +
        ':' + padZero(date.getUTCMinutes()) +
        ':' + padZero(date.getUTCSeconds()) ;

JSFiddle Code link

Formatting Date in JavaScript

Date field considerations for REST with different TimeZone

I can see two different scenarios of using the Date field with consideration of TimeZone, one is when the user enters date and you need to display the same date on screen, what I mean is with same TimeZone, and other one is the Date is entered by Admin kind of user from his TmeZone and you need to display the the saved Date with users TimeZone.

Simple work flow is

1) Select the Date and time from UI with TimeZone option (You can ignore TimeZone if you don’t want to display it to user, and while submitting or making REST request you can add the TimeZone details)

2) On server deserialize the date to UTC to persist the date filed

3) When GET request is made to the resource which has Date field, retrieve date from where you persisted, return it with the TimeZone details.

4) Client side, create Date instance from passed in date string, and JavaScript Date object will by default convert it to client specific TmeZone. You can use Date object and display your date in desired format.

In your bean filed annotate it as

	public Date getJoinDate() {
		return joinDate;

	public void setJoinDate(Date joinDate) {
		this.joinDate = joinDate;

Java Code to Deserialize JSON to Date

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import com.fasterxml.jackson.core.JsonLocation;
import com.fasterxml.jackson.core.JsonParseException;
import com.fasterxml.jackson.core.JsonParser;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.core.ObjectCodec;
import com.fasterxml.jackson.databind.DeserializationContext;
import com.fasterxml.jackson.databind.JsonDeserializer;
import com.fasterxml.jackson.databind.JsonNode;
public class JsonDateDeserializer extends JsonDeserializer<Date> {
 private static final SimpleDateFormat dateFormat = new SimpleDateFormat("MM/dd/yyyy hh:mm ZZ");
 public Date deserialize(JsonParser jp, DeserializationContext ctxt)
 throws IOException, JsonProcessingException {
 ObjectCodec oc = jp.getCodec();
 JsonNode node = oc.readTree(jp);
 String dateString = node.asText();
 Date joinDate;
 try {
 joinDate = dateFormat.parse(dateString);
 } catch (ParseException e) {
 throw new JsonParseException(e.getMessage(), JsonLocation.NA);
 return joinDate;

in above screen I used final static for SimpleDateFormat, SimpleDateFormat class is not thread safe, and I FastDateFormat which is good alternative to SimpleDateFormat which is used in serialize code snippet listed below. You can also use JodaTime api for date and calendar manipulations, ideally you should not use SimpleDateFormat and instead should move to Apache Commons-lang date implementations and if you need full support of parsing and formatting then use JodaTime library.

To serialize from Date to JSON

import java.util.Date;
import java.util.TimeZone;
import org.apache.commons.lang.time.FastDateFormat;
import org.springframework.stereotype.Component;
import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JsonSerializer;
import com.fasterxml.jackson.databind.SerializerProvider;
public class JsonDateSerializer extends JsonSerializer<Date>{
 private FastDateFormat fastDateFormat = FastDateFormat.getInstance("MM/dd/yyyy hh:mm Z", TimeZone.getTimeZone("UTC"));
 public void serialize(Date date, JsonGenerator gen, SerializerProvider provider) throws IOException, JsonProcessingException {
 String formattedDate = fastDateFormat.format(date);

In above code I have created the FastDateFormat instance with UTC TimeZone, and to add timezone details I added “Z”, which will add the timezone details in RFC822 format i.e. +0530.

In my example I displayed Date as it is default get converted to string by using JavaScript built-in object Date.

If you want to display the Date (particularly with time) at client as per Locale and with very specific format, will suggest to do the formatting on Java side based on user locale and timezone, as formatting Date in JavaScript to a specific format is tricky. JavaScript has good support for formatting date to Local but if you want some different format then it become tricky, e.g. with en-US the date time will displayed as 12/21/2014, 12:00 AM GMT+5:30, and now if you want to remove comma and different timezone format then it become tricky.

form more details : JavaScipt Date Tutorial

Date field considerations for REST with different TimeZone