bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/JavaScript/Objects, Classes, and Advanced Patterns
JavaScript•Objects, Classes, and Advanced Patterns

JavaScript Temporal PlainTime

The PlainTime Object

The Temporal.PlainTime object is a time object without a date .

It represents an ISO 8601 wall-clock time without a date or time zone.

Example: 10:30:00 .

It is useful for opening hours, alarms, and any time-only values.

The Temporal.PlainTime Object

The Temporal PlainTime object is a time object with no date.

It represents an ISO 8601 wall-clock time without a date or time zone.

Example: 14:30:00 .

Example

const date = new Temporal.PlainTime(14, 30);

Create a PlainTime

You can create a PlainTime from a string.

Example

const time = Temporal.PlainTime.from("14:30");

You can also create a PlainTime using numeric values.

Example

const time = new Temporal.PlainTime(14, 30);

The parameters are: hour, minute, second, millisecond, microsecond, nanosecond.

Get the Current Time

You can get the current local time using Temporal.Now.plainTimeISO() .

Example

const now = Temporal.Now.plainTimeISO();

Get Time Parts

You can read the different parts of a PlainTime value.

Example

const time = Temporal.PlainTime.from("14:30:15.123");

Add and Subtract PlainTime

Use add() and subtract() to do PlainTime math.

PlainTime is immutable, so the original value is not changed.

Example

const time = Temporal.PlainTime.from("14:30");
const later = time.add({ minutes: 45 });
const earlier = time.subtract({ hours: 2 });

If the time passes midnight, it wraps around:

Example

const time = Temporal.PlainTime.from("23:30");
const result = time.add({ minutes: 90 });

Calculate PlainTime Differences

Use since() and until() to calculate PlainTime differences.

Both methods return a Temporal.Duration object .

Examples

// Create two PlainTime objects
const start = Temporal.PlainTime.from("09:00");
const end = Temporal.PlainTime.from("17:30");
// Calculate the difference
const diff = start.since(end);

JavaScript since() and until()

All temporal date objects have their own since() method :

  • plaindate .since( plaindate )
  • plaintime .since( plaintime )
  • plainyearmonth .since( plainyearmonth )
  • plainmonthday .since( plainmonthday )
  • plaindatetime .since( plaindatetime )
  • zoneddatetime .since( zoneddatetime )
  • instant .since( instant )

All temporal objects have their own until() method :

  • plaindate .until( plaindate )
  • plaintime .until( plaintime )
  • plainyearmonth .until( plainyearmonth )
  • plainmonthday .until( plainmonthday )
  • plaindatetime .until( plaindatetime )
  • zoneddatetime .until( zoneddatetime )
  • instant .until( instant )

The PlainTime compare() Method

Use Temporal.PlainTime.compare() to compare times.

Example

// Create two PlainTime objects
const a = Temporal.PlainTime.from("08:30");
const b = Temporal.PlainTime.from("14:30");
// Compare the two objects result = Temporal.PlainTime.compare(a, b));

The result is

  • -1 if the first time is earlier
  • 0 if they are equal
  • 1 if the first time is later

Do not use =, <, or > when comparing temporal time.

All temporal objects have their own compare() method :

  • Temporal.Instant.compare( instant1, instant2 )
  • Temporal.PlainDate.compare( plaindate1, plaindate2 )
  • Temporal.PlainTime.compare( plaintime1, plaintime2 )
  • Temporal.PlainYearMonth.compare( plainyearmonth1, plainyearmonth2 )
  • Temporal.PlainMonthDay.compare( plainmonthday1 plainmonthday2 )
  • Temporal.PlainDateTime.compare( plaindatetime1,plaindatetime2 )
  • Temporal.ZonedDateTime.compare( zoneddtatime1, zoneddtatime2 )
  • Temporal.Duration.compare( duration1, duration2 )

The PlainTime equals() Method

Use equals() to check if two times are the same.

Example

// Create two PlainTime objects
const a = Temporal.PlainTime.from("14:30");
const b = Temporal.PlainTime.from("14:30");
// Compare the two objects result = a.equals(b);

Most (*) temporal objects have their own equals() method :

  • instant .equals( instant )
  • plaindate .equals( plaindate )
  • plaintime .equals( plaintime )
  • plainyearmonth .equals( plainyearmonth )
  • plainmonthday .equals( plainmonthday )
  • plaindateTime .equals( plaindatetime )
  • zoneddateTime .equals( zoneddtatime )

(*) Duration has not.

When to Use PlainTime

  • Opening hours (for example: 09:00 to 17:00).
  • Alarm clock times.
  • Recurring daily schedules.
  • Time input fields (without date and time zone).

If you need date, use PlaneDateTime .

Temporal PlainTime Methods

ConstructingDescription
from()Creates a new PlainTime object from an object or a string
newCreates a new PlainTime object from integer parameters
Arithmetic
add()Returns a new PlainTime with a duration added
subtract()Returns a new PlainTime with a duration subtracted
round()Returns a new PlainTime rounded to a given unit
Comparing
compare()Returns -1, 0, or 1 from comparing two times
equals()Returns true if two PlainTime objects are identical
since()Returns the difference since another time
until()Returns the difference until another time
Modifying
with()Returns a new PlainTime with specified fields modified
Formatting
toJSON()Returns an RFC 9557 format string for JSON serialization
toLocaleString()Returns a language-sensitive representation of the time
toString()Returns an RFC 9557 format representation of the time
valueOf()Throws a TypeError Prevents temporals from being converted to primitives

Temporal.PlainTime Properties

The Temporal.PlainTime object has 6 properties of time information.

PropertyDescription
hourThe hour as an integer (0-23)
microsecondThe microsecond as an integer (0-999)
millisecondThe millisecond as an integer (0-999)
minuteThe minute as an integer (0-59)
nanosecondThe nanosecond as an integer (0-999)
secondThe second as an integer (0-59)

Display All Properties

const date = new Temporal.PlainTime(14, 30);

Previous

JavaScript Closures

Next

JavaScript Objects - Advanced

This chapter

Overview
123

Lessons

539m

Read time

1. JavaScript Objects2. JavaScript Temporal Tutorial3. JavaScript Loops4. JavaScript Advanced Functions5. JavaScript Objects6. JavaScript Temporal Intro7. JavaScript Iterables8. JavaScript Function Definitions9. JavaScript Object Properties10. JavaScript Temporal vs Date11. JavaScript Iterators12. JavaScript Callbacks13. JavaScript Object Methods14. JavaScript Temporal Duration15. JavaScript Generators16. The JavaScript this Keyword17. JavaScript this Keyword18. JavaScript Temporal Instant19. JavaScript Function call()20. JavaScript Display Objects21. JavaScript PlainDateTime22. JavaScript Function apply()23. JavaScript Object Constructors24. JavaScript Temporal PlainDate25. JavaScript Function bind()26. JavaScript PlainYearMonth27. Self-Invoking Functions28. JavaScript PlainMonthDay29. JavaScript Closures30. JavaScript Temporal PlainTime31. JavaScript Objects - Advanced32. JavaScript ZonedDateTime33. JavaScript Object Definitions34. JavaScript Temporal Now35. this in JavaScript Objects36. JS Temporal Arithmetic37. JavaScript Object Iterations38. JS Temporal Differences39. JavaScript Object Accessors40. JS Temporal Compare41. JavaScript Object Management42. JavaScript Temporal Conversion43. JavaScript Object Protection44. Temporal Display Formats45. JavaScript Object Prototypes46. JavaScript Temporal Mistakes47. JavaScript Classes48. Migrate from Date to Temporal49. JavaScript Class Inheritance50. Temporal Standards51. JavaScript Static Methods52. Asynchronous JavaScript53. Asynchronous Programming54. JavaScript Timeouts55. JavaScript Callbacks56. JavaScript Promises57. JavaScript async and await58. JavaScript fetch API59. Debugging Async JavaScript60. JavaScript Modules61. JavaScript Modules Export62. JavaScript Modules Import63. JS Module Namespace64. JavaScript Dynamic Modules65. JavaScript Meta Programming66. JavaScript Reflect67. JavaScript Proxy68. JavaScript Typed Arrays69. Typed Array Methods70. JavaScript ArrayBuffer71. JavaScript DataView72. JavaScript Atomics73. JavaScript HTML DOM Navigation74. JavaScript HTML DOM Elements (Nodes)75. JavaScript HTML DOM Collections76. JavaScript HTML DOM Node Lists77. JavaScript Window - The Browser Object Model78. JavaScript Window Screen79. JavaScript Window Location80. JavaScript Window History81. JavaScript Window Navigator82. JavaScript Popup Boxes83. JavaScript Timing Events84. JavaScript Cookies85. Web APIs - Introduction86. JavaScript Fetch API87. Web Geolocation API88. Web History API89. Pointer Events API90. Web Storage API91. JavaScript Validation API92. Web Workers API93. AJAX Introduction94. AJAX - The XMLHttpRequest Object95. AJAX - XMLHttpRequest96. AJAX - Server Response97. AJAX XML Example98. AJAX PHP Example99. AJAX ASP Example100. AJAX Database Example101. XML Applications102. JavaScript JSON103. JSON Syntax104. JSON vs XML105. JSON Data Types106. JSON.parse()107. JSON.stringify()108. JSON Object Literals109. JSON Array Literals110. JSON PHP111. JSON HTML112. JSONP113. JavaScript / jQuery DOM Selectors114. JavaScript / jQuery HTML Elements115. JavaScript / jQuery CSS Styles116. JavaScript / jQuery HTML DOM117. JavaScript Graphics118. HTML Canvas119. Plotly.js120. Chart.js121. Google Chart122. D3.js123. JavaScript Interview Preparation

On this page

The PlainTime ObjectThe Temporal.PlainTime ObjectCreate a PlainTimeGet the Current TimeGet Time PartsAdd and Subtract PlainTimeCalculate PlainTime DifferencesJavaScript since() and until()The PlainTime compare() MethodThe PlainTime equals() MethodWhen to Use PlainTimeTemporal PlainTime MethodsTemporal.PlainTime Properties