Work with a time span in Javascript

Question

Using Date js already  but can also use another library if necessary   Not sure what is the best way to work with time deltas  Specifically  I want to display the time that has elapsed between now and a past date-time   So I need to do something like this   var elapsed time   new Date   - pastDate  pastDate toString  days-hours-minutes-seconds      Gotten it to mostly work using Date js  but the problem is now I m working with a Date object and not a timespan  so what should be an 23 hour time span is instead 23 hours after the Date s very first time    var result    new Date    - past date   result  is the number  probably milliseconds   15452732    var result    new Date   - past date  result  is a date from 1969  Wed Dec 31 1969 23 17 32   What I need is    0 days 23 hours 17 minutes and 32 seconds   Any ideas

User · Answer

You can use momentjs duration object

Example:

const diff = moment.duration(Date.now() - new Date(2010, 1, 1))
console.log(`${diff.years()} years ${diff.months()} months ${diff.days()} days ${diff.hours()} hours ${diff.minutes()} minutes and ${diff.seconds()} seconds`)

User · Answer

Here a  NET C  similar implementation of a timespan class that supports days  hours  minutes and seconds  This implementation also supports negative timespans   const MILLIS PER SECOND   1000  const MILLIS PER MINUTE   MILLIS PER SECOND   60           60 000 const MILLIS PER HOUR   MILLIS PER MINUTE   60          3 600 000 const MILLIS PER DAY   MILLIS PER HOUR   24            86 400 000  export class TimeSpan       private  millis  number       private static interval value  number  scale  number   TimeSpan           if  Number isNaN value                 throw new Error  value can t be NaN                       const tmp   value   scale          const millis   TimeSpan round tmp    value  gt   0   0 5   -0 5            if   millis  gt  TimeSpan maxValue totalMilliseconds      millis  lt  TimeSpan minValue totalMilliseconds                 throw new TimeSpanOverflowError  TimeSpanTooLong                       return new TimeSpan millis              private static round n  number   number           if  n  lt  0                return Math ceil n             else if  n  gt  0                return Math floor n                      return 0             private static timeToMilliseconds hour  number  minute  number  second  number   number           const totalSeconds    hour   3600     minute   60    second          if  totalSeconds  gt  TimeSpan maxValue totalSeconds    totalSeconds  lt  TimeSpan minValue totalSeconds                throw new TimeSpanOverflowError  TimeSpanTooLong                       return totalSeconds   MILLIS PER SECOND             public static get zero    TimeSpan           return new TimeSpan 0              public static get maxValue    TimeSpan           return new TimeSpan Number MAX SAFE INTEGER              public static get minValue    TimeSpan           return new TimeSpan Number MIN SAFE INTEGER              public static fromDays value  number   TimeSpan           return TimeSpan interval value  MILLIS PER DAY              public static fromHours value  number   TimeSpan           return TimeSpan interval value  MILLIS PER HOUR              public static fromMilliseconds value  number   TimeSpan           return TimeSpan interval value  1              public static fromMinutes value  number   TimeSpan           return TimeSpan interval value  MILLIS PER MINUTE              public static fromSeconds value  number   TimeSpan           return TimeSpan interval value  MILLIS PER SECOND              public static fromTime hours  number  minutes  number  seconds  number   TimeSpan      public static fromTime days  number  hours  number  minutes  number  seconds  number  milliseconds  number   TimeSpan      public static fromTime daysOrHours  number  hoursOrMinutes  number  minutesOrSeconds  number  seconds   number  milliseconds   number   TimeSpan           if  milliseconds    undefined                return this fromTimeStartingFromDays daysOrHours  hoursOrMinutes  minutesOrSeconds  seconds  milliseconds             else               return this fromTimeStartingFromHours daysOrHours  hoursOrMinutes  minutesOrSeconds                        private static fromTimeStartingFromHours hours  number  minutes  number  seconds  number   TimeSpan           const millis   TimeSpan timeToMilliseconds hours  minutes  seconds           return new TimeSpan millis              private static fromTimeStartingFromDays days  number  hours  number  minutes  number  seconds  number  milliseconds  number   TimeSpan           const totalMilliSeconds    days   MILLIS PER DAY                 hours   MILLIS PER HOUR                 minutes   MILLIS PER MINUTE                 seconds   MILLIS PER SECOND                milliseconds           if  totalMilliSeconds  gt  TimeSpan maxValue totalMilliseconds    totalMilliSeconds  lt  TimeSpan minValue totalMilliseconds                throw new TimeSpanOverflowError  TimeSpanTooLong                      return new TimeSpan totalMilliSeconds              constructor millis  number            this  millis   millis             public get days    number           return TimeSpan round this  millis   MILLIS PER DAY              public get hours    number           return TimeSpan round  this  millis   MILLIS PER HOUR    24              public get minutes    number           return TimeSpan round  this  millis   MILLIS PER MINUTE    60              public get seconds    number           return TimeSpan round  this  millis   MILLIS PER SECOND    60              public get milliseconds    number           return TimeSpan round this  millis   1000              public get totalDays    number           return this  millis   MILLIS PER DAY             public get totalHours    number           return this  millis   MILLIS PER HOUR             public get totalMinutes    number           return this  millis   MILLIS PER MINUTE             public get totalSeconds    number           return this  millis   MILLIS PER SECOND             public get totalMilliseconds    number           return this  millis             public add ts  TimeSpan   TimeSpan           const result   this  millis   ts totalMilliseconds          return new TimeSpan result              public subtract ts  TimeSpan   TimeSpan           const result   this  millis - ts totalMilliseconds          return new TimeSpan result             How to use  Create a new TimeSpan object  From zero       const ts   TimeSpan zero     From milliseconds       const milliseconds   10000     1 second         by using the constructor     const ts1   new TimeSpan milliseconds           or as an alternative you can use the static factory method     const ts2   TimeSpan fromMilliseconds milliseconds      From seconds       const seconds   86400     1 day     const ts   TimeSpan fromSeconds seconds      From minutes       const minutes   1440     1 day     const ts   TimeSpan fromMinutes minutes      From hours       const hours   24     1 day     const ts   TimeSpan fromHours hours      From days       const days   1     1 day     const ts   TimeSpan fromDays days      From time with given hours  minutes and seconds       const hours   1      const minutes   1      const seconds   1      const ts   TimeSpan fromTime hours  minutes  seconds      From time2 with given days  hours  minutes  seconds and milliseconds       const days   1      const hours   1      const minutes   1      const seconds   1      const milliseconds   1      const ts   TimeSpan fromTime days  hours  minutes  seconds  milliseconds      From maximal safe integer       const ts   TimeSpan maxValue     From minimal safe integer       const ts   TimeSpan minValue     From minimal safe integer       const ts   TimeSpan minValue     Add       const ts1   TimeSpan fromDays 1       const ts2   TimeSpan fromHours 1       const ts   ts1 add ts2        console log ts days                    1     console log ts hours                   1     console log ts minutes                 0     console log ts seconds                 0     console log ts milliseconds                0    Subtract       const ts1   TimeSpan fromDays 1       const ts2   TimeSpan fromHours 1       const ts   ts1 subtract ts2        console log ts days                    0     console log ts hours                   23     console log ts minutes                 0     console log ts seconds                 0     console log ts milliseconds                0    Getting the intervals       const days   1      const hours   1      const minutes   1      const seconds   1      const milliseconds   1      const ts   TimeSpan fromTime2 days  hours  minutes  seconds  milliseconds        console log ts days                    1     console log ts hours                   1     console log ts minutes                 1     console log ts seconds                 1     console log ts milliseconds                1      console log ts totalDays               1 0423726967592593      console log ts totalHours              25 016944722222224      console log ts totalMinutes                1501 0166833333333      console log ts totalSeconds                90061 001      console log ts totalMilliseconds           90061001     See also here  https   github com erdas timespan

User · Answer

If you re not too worried in accuracy after days  you can simply do the maths  function timeSince when       this ignores months     var obj           obj  milliseconds    new Date    valueOf   - when valueOf        obj milliseconds   obj  milliseconds   1000      obj  seconds    obj  milliseconds - obj milliseconds    1000      obj seconds   obj  seconds   60      obj  minutes    obj  seconds - obj seconds    60      obj minutes   obj  minutes   60      obj  hours    obj  minutes - obj minutes    60      obj hours   obj  hours   24      obj  days    obj  hours - obj hours    24      obj days   obj  days   365         finally     obj years    obj  days - obj days    365      return obj      then timeSince pastDate   and use the properties as you like   Otherwise you can use  getUTC  to calculate it  but note it may be slightly slower to calculate  function timeSince then        var now   new Date    obj           obj milliseconds   now getUTCMilliseconds   - then getUTCMilliseconds        obj seconds   now getUTCSeconds   - then getUTCSeconds        obj minutes   now getUTCMinutes   - then getUTCMinutes        obj hours   now getUTCHours   - then getUTCHours        obj days   now getUTCDate   - then getUTCDate        obj months   now getUTCMonth   - then getUTCMonth        obj years   now getUTCFullYear   - then getUTCFullYear           fix negatives     if  obj milliseconds  lt  0  --obj seconds  obj milliseconds    obj milliseconds   1000    1000      if  obj seconds  lt  0  --obj minutes  obj seconds    obj seconds   60    60      if  obj minutes  lt  0  --obj hours  obj minutes    obj minutes   60    60      if  obj hours  lt  0  --obj days  obj hours    obj hours   24    24      if  obj days  lt  0       months have different lengths         --obj months          now setUTCMonth now getUTCMonth     1           now setUTCDate 0           obj days    obj days   now getUTCDate      now getUTCDate              if  obj months  lt  0   --obj years  obj months    obj months   12    12      return obj

User · Answer

Sounds like you need moment js  e g   moment   subtract  days   6  calendar         last Sunday at 8 23 PM  moment   startOf  hour   fromNow         26 minutes ago  Edit   Pure JS date diff calculation    x000D   x000D  var date1   new Date  7 Nov 2012 20 30 00    x000D  var date2   new Date  20 Nov 2012 19 15 00    x000D   x000D  var diff   date2 getTime   - date1 getTime    x000D   x000D  var days   Math floor diff    1000   60   60   24    x000D  diff -   days    1000   60   60   24   x000D   x000D  var hours   Math floor diff    1000   60   60    x000D  diff -  hours    1000   60   60   x000D   x000D  var mins   Math floor diff    1000   60    x000D  diff -  mins    1000   60   x000D   x000D  var seconds   Math floor diff    1000    x000D  diff -  seconds    1000   x000D   x000D  document write days     days      hours     hours      mins     minutes      seconds     seconds    x000D   x000D   x000D

User · Answer

a simple timestamp formatter in pure JS with custom patterns support and locale-aware  using Intl RelativeTimeFormat some formatting examples     delta  1234567890   locale   en-US    style   long         D  h  m  s     14 days 6 hours 56 minutes 7 seconds     D  h  m  s  f     14 days 6 hours 56 minutes 7 seconds 890     D  quot d quot  h  quot h quot  m  quot m quot  s  quot s quot  f  quot ms quot     14d 6h 56m 7s 890ms     D h m s f    14 06 56 07 890     D   h m s f    14 days  06 56 07 890     h  m  s     342 hours 56 minutes 7 seconds     s  m  h  D     7 seconds 56 minutes 6 hours 14 days     up D   h m    up 14 days  06 56  the code  amp  test  x000D   x000D          Init locale formatter               timespan locale  locale   style           Example           timespan locale  en-US    long            timespan locale  es    narrow         Format time delta               timespan format  pattern   milliseconds            pattern tokens              D  days  h  hours  m  minutes  s  seconds  f  millis           pattern token extension              h    gt   0 -padded value               h    gt  raw value              h    gt  locale formatted value      Example           timespan format  D  h  m  s  f  millis    1234567890                    output  14 days 6 hours 56 minutes 7 seconds 890 millis      NOTES         milliseconds unit have no locale translation       may encounter declension issues for some locales       use quoted text for raw inserts                  const timespan         gt        let rtf  tokensRtf      const     tokens     Dhmsf                       g      map              t     D   1     D       D     day     u  86400000            t     h   2     h       h     hour     u  3600000            t     m   2     m       m     minute     u  60000            t     s   2     s       s     second     u  1000            t     f   3     f       f      u  1             locale    value  style    long     gt            try               rtf   new Intl RelativeTimeFormat value   style              catch  e                if  rtf  throw e              return                    const h   rtf format 1   hour   split               tokensRtf   new Set rtf format 1   day   split                   filter t   gt  t    1  amp  amp  h indexOf t   gt  -1            return true             fallback    t  u    gt  u         t fmt    u    1         s        mapper             number   t  u    gt   u       padStart t fmt   0            string   t  u    gt  rtf   rtf format u  t fmt  split                   filter t   gt   tokensRtf has t   join                   trim   replace    -  g        fallback t  u              replace    out  t    gt  out t     t slice 1  t length - 1       format    pattern  value    gt            if  typeof pattern      string               throw Error  invalid pattern            if   Number isFinite value               throw Error  invalid value            if   pattern              return             const out               value   Math abs value           pattern match tokens   forEach t   gt  out t    null           map forEach m   gt                let u   null              m t forEach t   gt                    if  out t token      null                      return                  if  u     null                        u   Math floor value   m u                       value    m u                                    out t token          t fn   t fn t  u    u                                      return pattern replace tokens  replace bind null  out               map forEach m   gt  m t   m t map t   gt             token  t 0   fmt  t 1   fn  mapper typeof t 1                 locale  en        return  format  locale                                       test below                             const cfg       locale   en de nl fr it es pt ro ru ja kor zh th hi     style   long narrow     el   id   gt  document getElementById id   locale   el  locale    loc   el  loc    style   el  style    fd   new Date    td   el  td    fmt   el  fmt    run   el  run    out   el  out    test        gt      try         const tv   new Date td value         if  isNaN tv   throw Error  invalid  datetime2  value          timespan locale loc value    locale value  style value         const delta   fd getTime   - tv getTime          out innerHTML   timespan format fmt value  delta       catch  e    out innerHTML   e message       el  fd   innerText   el  td   value   fd toISOString    el  fmt   value    D  h  m  s  f   ms    for  const  id  value  of Object entries cfg       const elm   el id     value split      forEach i   gt  elm innerHTML      lt option gt   i  lt  option gt       x000D  i  color green  x000D  locale   lt select id  locale  gt  lt  select gt  custom   lt input id  loc  style  width 8em  gt  lt br gt  style   lt select id  style  gt  lt  select gt  lt br gt  datetime1   lt i id  fd  gt  lt  i gt  lt br gt  datetime2   lt input id  td  gt  lt br gt  pattern   lt input id  fmt  gt   lt button id  run  onclick  test    gt test lt  button gt  lt br gt  lt br gt   lt i id  out  gt  lt  i gt  x000D   x000D   x000D

User · Answer

English  Calculating the difference between the given time and the current time and then showing the results      function date2Text date        var milliseconds   new Date   - date      var timespan   new TimeSpan milliseconds       if  milliseconds  lt  0            return timespan toString                else          return timespan toString                                         English  Using a function to calculate the time interval     param milliseconds         var TimeSpan   function  milliseconds        milliseconds   Math abs milliseconds       var days   Math floor milliseconds    1000   60   60   24        milliseconds -  days    1000   60   60   24        var hours   Math floor milliseconds    1000   60   60        milliseconds -  hours    1000   60   60        var mins   Math floor milliseconds    1000   60        milliseconds -  mins    1000   60        var seconds   Math floor milliseconds    1000        milliseconds -  seconds    1000       return           getDays  function                  return days                     getHours  function                  return hours                     getMinuts  function                  return mins                     getSeconds  function                  return seconds                     toString  function                  var str                   if  days  gt  0    str length  gt  0                    str    days                                  if  hours  gt  0    str length  gt  0                    str    hours                                   if  mins  gt  0    str length  gt  0                    str    mins                                   if  days    0  amp  amp   seconds  gt  0    str length  gt  0                     str    seconds                                  return str

User · Answer

Moment js provides such functionality   http   momentjs com   It s well documented and nice library   It should go along the lines  Duration  and  Humanize of API http   momentjs com docs   displaying from    var d1  d2     Timepoints  var differenceInPlainText   moment a  from moment b   true      Add true for suffixless text

[javascript] Work with a time span in Javascript

Examples related to javascript

Examples related to date

Examples related to datetime

Examples related to timespan

Examples related to datejs