Displaying the countdown of days and hours until a specific date is just a matter of using

Question

Displaying the countdown of days and hours until a specific date is just a matter of using

Currently, I am tackling a project that necessitates a specific text response related to a date object.

"1 day 7 hours away" --- This format is crucial; alternatives such as "31 hours away" or "1 day away" will not suffice. -- For language switching purposes between English and German, I am utilizing moment js along with the moment.js language locale:

moment.locale('de')

In order to achieve this, I have generated a fabricated date object using moment js.

  var futureDate = new Date()
  futureDate.setDate(futureDate.getDate() + 1)// add a day
  futureDate.setHours(7)// add 7 hours

However, when attempting to display the moment js result,

moment(futureDate).endOf('day').fromNow()

The output simply states "in a day."

How can I adjust the moment function to properly handle 1 day 7 hours, along with potentially restructuring the sentence?

--- Here is an example of code snippet attempt

moment.locale('de') // toggle between en and de -- english and german

var futureDate = new Date()
futureDate.setDate(futureDate.getDate() + 1)// add a day
futureDate.setHours(7)// add 4 hours

// Provides results in hours
console.log(moment(futureDate).endOf('day').fromNow());

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

Second test utilizing difference calculation

moment.locale('de') // toggle between en and de -- english and german

var a = moment();
var b = moment(a).add(31, 'hours');

// Provides results in days
console.log(b.diff(a, 'days'));
console.log(b.diff(a, 'days', true));

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

javascript momentjs

Answer 1

Answer №1

To customize how moment displays relative time, you can utilize the relativeTimeThreshold and relativeTime options (accessible through moment.updateLocale).

In your specific scenario, consider the following steps:

Adjust the threshold to show differences in seconds (refer to: How to make moment.js display relative time in seconds?).
Create a duration object using moment.duration(Number, String).
Utilize the moment-duration-format plugin for displaying the duration value as per your preference.

Here is an example showcasing these concepts:

var momEn = moment().add({d:1, h:7});
var momDe = moment().locale('de').add({d:1, h:7});

console.log(momEn.fromNow()); // in a day
console.log(momDe.fromNow()); // in einem Tag

// Adjusting relativeTimeThreshold
moment.relativeTimeThreshold('s', 60*60*24*30*12);

// Updating relative time formats
moment.updateLocale('en', {
  relativeTime : {
    s: function (number, withoutSuffix, key, isFuture){
      return moment.duration(number, 's').format('d [day] h [hour]');
    },
  }
});

moment.updateLocale('de', {
  relativeTime : {
    s: function (number, withoutSuffix, key, isFuture){
      return moment.duration(number, 's').format('d [Tag] h [Uhr]');
    },
  }
});

console.log(momEn.fromNow()); // in 1 day 7 hour
console.log(momDe.fromNow()); // in 1 Tag 7 Uhr

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

Keep in mind that manual updates are required for each locale that you wish to support.

Answer 2

To customize how moment displays relative time, you can utilize the relativeTimeThreshold and relativeTime options (accessible through moment.updateLocale).

In your specific scenario, consider the following steps:

Adjust the threshold to show differences in seconds (refer to: How to make moment.js display relative time in seconds?).
Create a duration object using moment.duration(Number, String).
Utilize the moment-duration-format plugin for displaying the duration value as per your preference.

Here is an example showcasing these concepts:

var momEn = moment().add({d:1, h:7});
var momDe = moment().locale('de').add({d:1, h:7});

console.log(momEn.fromNow()); // in a day
console.log(momDe.fromNow()); // in einem Tag

// Adjusting relativeTimeThreshold
moment.relativeTimeThreshold('s', 60*60*24*30*12);

// Updating relative time formats
moment.updateLocale('en', {
  relativeTime : {
    s: function (number, withoutSuffix, key, isFuture){
      return moment.duration(number, 's').format('d [day] h [hour]');
    },
  }
});

moment.updateLocale('de', {
  relativeTime : {
    s: function (number, withoutSuffix, key, isFuture){
      return moment.duration(number, 's').format('d [Tag] h [Uhr]');
    },
  }
});

console.log(momEn.fromNow()); // in 1 day 7 hour
console.log(momDe.fromNow()); // in 1 Tag 7 Uhr

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

Keep in mind that manual updates are required for each locale that you wish to support.

Answer 3

Answer №2

If you want to calculate date differences, you can utilize either moment-duration-format or the moment.diff function as shown below:

let futureDate = new Date ()
futureDate.setDate (futureDate.getDate () + 1)// add a day
futureDate.setHours (7)
let start = moment ()
let end = moment (futureDate)

// Method 1: Using moment-duration-format

console.log (moment.duration (end.diff (start)).format ('d [days] hh [hours]', { trim: false }))

// Method 2: Using diff without moment-duration-format

let hoursDuration = end.diff (start, 'hours')
console.log (Math.floor (hoursDuration / 24) + ' days ' + (hoursDuration % 24) + ' hours')

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

The first method necessitates the installation of the moment-duration-format module, while the second accomplishes everything using solely moment.js. Remember to execute

npm install moment-duration-format

before requiring it.

Answer 4

If you want to calculate date differences, you can utilize either moment-duration-format or the moment.diff function as shown below:

let futureDate = new Date ()
futureDate.setDate (futureDate.getDate () + 1)// add a day
futureDate.setHours (7)
let start = moment ()
let end = moment (futureDate)

// Method 1: Using moment-duration-format

console.log (moment.duration (end.diff (start)).format ('d [days] hh [hours]', { trim: false }))

// Method 2: Using diff without moment-duration-format

let hoursDuration = end.diff (start, 'hours')
console.log (Math.floor (hoursDuration / 24) + ' days ' + (hoursDuration % 24) + ' hours')

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

The first method necessitates the installation of the moment-duration-format module, while the second accomplishes everything using solely moment.js. Remember to execute

npm install moment-duration-format

before requiring it.

Answer 5

Answer №3

Note: If you prefer using Moment.js, they offer the moment#diff method for calculating the difference between dates:

var firstDate = moment([2007, 0, 29]);
var secondDate = moment([2007, 0, 28]);
firstDate.diff(secondDate, 'days') // 1

Source:

An alternative solution would be to use countdown.js:

var futureDate = new Date()
futureDate.setDate(futureDate.getDate() + 1)// add a day
futureDate.setHours(7)// add 7 hours
var timeElapsed = countdown(Date.now().toString(), futureDate, countdown.DAYS|countdown.HOURS);

console.log(timeElapsed);

The output of timeElapsed is an informative object; for example:

  days: 0
  end: Tue Jul 04 2017 07:17:41 GMT+0300 (EEST)
  hours: 12
  start: Mon Jul 03 2017 19:17:41 GMT+0300 (EEST)
  units: 18
  value: 43200000

You can then format this data as needed for your application.

If you decide to go with countdown.js, it's available on a CDN here:

Answer 6

Note: If you prefer using Moment.js, they offer the moment#diff method for calculating the difference between dates:

var firstDate = moment([2007, 0, 29]);
var secondDate = moment([2007, 0, 28]);
firstDate.diff(secondDate, 'days') // 1

Source:

An alternative solution would be to use countdown.js:

var futureDate = new Date()
futureDate.setDate(futureDate.getDate() + 1)// add a day
futureDate.setHours(7)// add 7 hours
var timeElapsed = countdown(Date.now().toString(), futureDate, countdown.DAYS|countdown.HOURS);

console.log(timeElapsed);

The output of timeElapsed is an informative object; for example:

  days: 0
  end: Tue Jul 04 2017 07:17:41 GMT+0300 (EEST)
  hours: 12
  start: Mon Jul 03 2017 19:17:41 GMT+0300 (EEST)
  units: 18
  value: 43200000

You can then format this data as needed for your application.

If you decide to go with countdown.js, it's available on a CDN here:

Displaying the countdown of days and hours until a specific date is just a matter of using

Answer №1

Answer №2

Answer №3

Similar questions

At times, Express.js may display an error message stating "Cannot GET /"

I encountered an unexpected token error while using JavaScript syntax with objects

Utilizing AngularJS to access the corresponding controller from a directive

Retrieving the Short Date Format from the user's device or browser within a React application

Monitoring the flow of data between Angular JS resources and the promise responses

Is there a method in AngularJS to submit form data when the input fields are pre-populated using a GET request?

Refreshing material ui select choices based on user input

Looking to decrease Cumulative Layout Shift (CLS) on the NextJS website for enhanced performance

Show component depending on the lifecycle of another component

The Alert Component fails to display when the same Error is triggered for the second time

Tips for obtaining a JSON response from a RESTful API in AngularJS by utilizing the $resource service

Retrieving and assigning data values within an Angular JS service

Merging two arrays by their corresponding IDs and indexes

Unable to access current props within useEffect block

The markers from KML exported from My Maps are not showing up on the Google Maps JavaScript API

How to send a PHP variable to Ajax and execute a corresponding PHP function in response

Error encountered when attempting to add document to Firebase database: admin:1. An unexpected FirebaseError occurred, stating that the expected type was 'Na', but it was actually a custom object

What methods are available for identifying non-operational pointer-events?

``If you're looking to retrieve, modify, and display information in your Vue application with the help of

What sets apart an object within the scalajs scope from the exact same object within the js.global scope?