Format Date and Time in JavaScript with Date Object

 ← Dev Articles
👍 0
👎 0

This tutorial The JavaScript Date library is a built-in object that represents a single moment in time. It provides methods for creating, parsing, formatting, and manipulating dates and times. Dates are stored as the number of milliseconds since the Unix epoch (January 1, 1970, 00:00:00 UTC).

 

In this tutorial I will cover how to format date only, time only, and both date and time using these 3 methods from built-in object Date. A method to format a date. A method to format a time. And a method to format both date and time.  


const
date = new Date('2025-10-23 11:06:48');

date.toLocaleDateString('en-US');

date.toLocaleTimeString('en-US');

date.toLocaleString('en-US');

Also, I have included 2 handy references at the end of this tutorial.  A reference for options and values available to define the format.  Also, a reference that lists all available methods on the Javascript built-in Date object. 

 

Date toLocaleDateString()


The
toLocaleDateString() method formats the date only.  Below the value of the date will be initiated as datetime (yyyy-mm-dd hh:mm:ss):

const date = new Date('2025-10-23 11:06:48');

Even though the Date object is initiated with a date and time string, only the date part of the string will be extracted. The default date.toLocaleDateString('en-US') returns the date formatted as mm/dd/yyyy.  Also use other formatting options available. The options are referenced below. 

 

 const date = new Date('2025-10-23 11:06:48');

 

 // Date only

 date.toLocaleDateString('en-US');

 // "10/23/2025"

 

 date.toLocaleDateString('en-US', {

   year: 'numeric',

   month: 'long',

   day: 'numeric'

 });

 // "October 23, 2025"

 



Date toLocaleTimeString()


Target and format the time portion of the string using
toLocaleTimeString().  Now time is extracted from the initial value set below…  

 const date = new Date('2025-10-23 11:06:48');


The
toLocaleTimeString() method can be used with or without options. The default time is in 12 hour format (hh:mm:ss AM/PM).  Options are listed below:

 

 // Time only

 date.toLocaleTimeString('en-US');

 // "11:06:48 AM"

 

 date.toLocaleTimeString('en-US', {

    hour: '2-digit',

    minute: '2-digit',

    hour12: true

 });

 // "11:06 AM"

 




Date toLocaleString()

To format both the date and time use toLocaleString().  This method also accepts options to provide formatting instructions.  Refer to the list below.  

 

 // Combined date and time

 date.toLocaleString('en-US');

 // "10/23/2025, 11:06:48 AM"

 

 date.toLocaleString('en-US').replace(/,/g, '');

 // "10/23/2025 11:06:48 AM"

 


Below are all the possible format options that can be passed to
toLocaleString() for the en-US locale.

Option Reference Table toLocaleString() 

Parameter

Possible Values

Description

Example Output

DATE COMPONENTS

     

year

'numeric'

Full year

2025

 

'2-digit'

Two-digit year

25

month

'numeric'

Month number

10

 

'2-digit'

Two-digit month

10

 

'long'

Full month name

October

 

'short'

Abbreviated month

Oct

 

'narrow'

Single character

O

day

'numeric'

Day of month

23

 

'2-digit'

Two-digit day

23

weekday

'long'

Full weekday name

Thursday

 

'short'

Abbreviated weekday

Thu

 

'narrow'

Single character

T

TIME COMPONENTS

     

hour

'numeric'

Hour

11

 

'2-digit'

Two-digit hour

11

minute

'numeric'

Minute

6

 

'2-digit'

Two-digit minute

06

second

'numeric'

Second

48

 

'2-digit'

Two-digit second

48

fractionalSecondDigits

1, 2, 3

Milliseconds digits

48.123

TIME SETTINGS

     

hour12

true

12-hour clock

11:06 AM

 

false

24-hour clock

11:06

timeZone

'America/New_York'

Specific timezone

Adjusts time

 

'UTC'

UTC timezone

 
 

'Europe/London'

Other timezones

 

timeZoneName

'short'

Abbreviated timezone

EDT

 

'long'

Full timezone name

Eastern Daylight Time

 

'shortOffset'

Short offset

GMT-4

 

'longOffset'

Long offset

GMT-04:00

 

'shortGeneric'

Generic short

ET

 

'longGeneric'

Generic long

Eastern Time

OTHER OPTIONS

     

era

'long'

Full era name

Anno Domini

 

'short'

Abbreviated era

AD

 

'narrow'

Single character

A

dayPeriod

'narrow'

AM/PM format

AM

 

'short'

AM/PM format

AM

 

'long'

AM/PM format

AM

calendar

'gregory'

Gregorian calendar

Default

numberingSystem

'latn'

Latin digits

0123456789

PRESET STYLES

     

dateStyle

'full'

Complete date

Thursday, October 23, 2025

 

'long'

Long format

October 23, 2025

 

'medium'

Medium format

Oct 23, 2025

 

'short'

Short format

10/23/2025

timeStyle

'full'

Complete time

11:06:48 AM Eastern Daylight Time

 

'long'

Long format

11:06:48 AM EDT

 

'medium'

Medium format

11:06:48 AM

 

'short'

Short format

11:06 AM






JavaScript Date Library Function Reference

Constructor Methods

Method

Description

Example

new Date()

Current date/time

new Date()

new Date(milliseconds)

From milliseconds since epoch

new Date(1634980000000)

new Date(dateString)

From ISO string

new Date("2025-10-23")

new Date(year, month, day, hours, minutes, seconds, ms)

From components

new Date(2025, 9, 23)

 

Static Methods

Method

Description

Returns

Date.now()

Current timestamp in milliseconds

1634980000000

Date.parse()

Parse date string to milliseconds

1634980000000

Date.UTC()

UTC timestamp from components

1634980000000

 

 

Getter Methods: Local Time Getters

Method

Description

Range

getFullYear()

4-digit year

1900+

getMonth()

Month

0-11

getDate()

Day of month

1-31

getDay()

Day of week

0-6

getHours()

Hours

0-23

getMinutes()

Minutes

0-59

getSeconds()

Seconds

0-59

getMilliseconds()

Milliseconds

0-999

getTime()

Milliseconds since epoch

0+

getTimezoneOffset()

Timezone offset in minutes

-720 to 720

 

 

UTC Getters

Method

Description

Range

getUTCFullYear()

UTC 4-digit year

1900+

getUTCMonth()

UTC month

0-11

getUTCDate()

UTC day of month

1-31

getUTCDay()

UTC day of week

0-6

getUTCHours()

UTC hours

0-23

getUTCMinutes()

UTC minutes

0-59

getUTCSeconds()

UTC seconds

0-59

getUTCMilliseconds()

UTC milliseconds

0-999

Setter Methods

Local Time Setters

Method

Description

Parameters

setFullYear()

Set year

year[, month, day]

setMonth()

Set month

month[, day]

setDate()

Set day of month

day

setHours()

Set hours

hours[, min, sec, ms]

setMinutes()

Set minutes

minutes[, sec, ms]

setSeconds()

Set seconds

seconds[, ms]

setMilliseconds()

Set milliseconds

ms

setTime()

Set time via milliseconds

milliseconds

UTC Setters

Method

Description

Parameters

setUTCFullYear()

Set UTC year

year[, month, day]

setUTCMonth()

Set UTC month

month[, day]

setUTCDate()

Set UTC day of month

day

setUTCHours()

Set UTC hours

hours[, min, sec, ms]

setUTCMinutes()

Set UTC minutes

minutes[, sec, ms]

setUTCSeconds()

Set UTC seconds

seconds[, ms]

setUTCMilliseconds()

Set UTC milliseconds

ms

Conversion Methods

Method

Description

Example Output

toString()

Full date string

"Thu Oct 23 2025 11:06:48 GMT-0400 (EDT)"

toDateString()

Date portion only

"Thu Oct 23 2025"

toTimeString()

Time portion only

"11:06:48 GMT-0400 (EDT)"

toISOString()

ISO 8601 format

"2025-10-23T15:06:48.000Z"

toUTCString()

UTC string

"Thu, 23 Oct 2025 15:06:48 GMT"

toGMTString()

GMT string (deprecated)

"Thu, 23 Oct 2025 15:06:48 GMT"

toJSON()

JSON string

"2025-10-23T15:06:48.000Z"

toLocaleString()

Locale date/time

"10/23/2025, 11:06:48 AM"

toLocaleDateString()

Locale date only

"10/23/2025"

toLocaleTimeString()

Locale time only

"11:06:48 AM"

Value Methods

Method

Description

Returns

valueOf()

Primitive value

Milliseconds (same as getTime())