3

I'm not really good at handling datetime. I used momentjs for a ionic app for manipulating time but I want to achieve something that I couldn't.

I used a pipe for that and I want to display based on if how many days have been passed or if weeks and months or years. Using relative time would help me that like the fromNow() method and the calendar() of momentjs. But in my case I would have multiple conditions.

Here is the sample code below of my pipe

transform(value: Date | moment.Moment, dateFormat: string): any {
    if (moment(value) < moment(value).subtract(7, 'days')) {
      return moment(value).format('llll') // Use this format if weeks, months or years has passed
    } else if (moment(value) < moment(value).subtract(1, 'days')) {
      return moment(value).calendar(); // Use calendar time if 1 day has passed
    } else {
      return moment(value).fromNow(); // Use relative time if within 24 hours
    }
  }

If seconds, minutes or hours has passed until 24 hours I will use the fromNow() method but when days passed I will use the calendar() and if weeks, months or years passed use this format('llll').

Can someone shed some light for me?

Thanks in advance.

KnowledgeSeeker
  • 1,058
  • 2
  • 19
  • 44

2 Answers2

5

From what I understand, you want to take a decision based on how long ago a particular moment was from now. It seems like you have 3 cases: > 7 days, > 1day, <1day.

Momentjs provides a very useful diff method. So, you could do something like:

  var currDate = moment.now();
  var dateToTest = moment(val);
  // if dateToTest will always be in past, use currDate as the base to diff, else 
  be prepared to handle the negative outcomes. 
  var result = currDate.diff(dateToTest, 'days')

window.onload = function() {
  console.log("Test Cases: ")
  console.log("Input: Date is 2 minutes behind")
  dateThing("2018-07-20T12:02:54+00:00");
  
  console.log("Input: Date is few hours behind")
  dateThing("2018-07-20T07:02:54+00:00");
  
  console.log("Input: Date is 23 hours 59 minutes behind")
  dateThing("2018-07-19T12:03:54+00:00");
  
  console.log("Input: Date is 24 hours behind")
  dateThing("2018-07-19T12:04:54+00:00");
  
  console.log("Input: Date is 2 days behind")
  dateThing("2018-07-18T12:04:54+00:00");
  
  console.log("Input: Date is 12 days behind")
  dateThing("2018-07-08T12:04:54+00:00");
}

dateThing = function(val) {
  // for now freezing the "now" so that precise testcases can be written.
  // var currDate = moment.now();
  var currDate = moment("2018-07-20T12:04:54+00:00")
  var dateToTest = moment(val);
  // if dateToTest will always be in past, use currDate as the base to diff, else be prepared to handle the negative outcomes. 
  var result = currDate.diff(dateToTest, 'days')
  if (result > 7) {
    console.log("Output: date is more than 1 week behind")
  } else if (result > 1) {
    console.log("Output: date is more than 1 day but less than 1 week behind")
  } else {
    console.log("Output: date is less  than 1 day behind")
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

Please run the above snippet to see the behaviour for border cases, if it isn't accurate, you can go for diff with minutes and reverse the flow.

dubes
  • 5,324
  • 3
  • 34
  • 47
  • Yes. This is exactly what I want to! Thank you. I just didn't dive the docs carefully because of its large scope. But hey if you really want to use it. Then dig it deeper. Thanks – KnowledgeSeeker Jul 22 '18 at 22:24
  • how could I return this with real time update each second? I tried adding a setInterval in the return value but it said that unexpected identifier like this `return setInterval(moment(value).format('llll'), 1000) // Use this format if weeks is passed` – KnowledgeSeeker Jul 24 '18 at 02:36
  • you'll have to call the entire function in your `setInterval`, for e.x. if your function is `something(inputDate)`, you'll need to wrap the entire function call: `setInterval(something(inputDate), 1000)` be careful about clearing the interval and ensuring that your inputDate variable isn't lost, I don't know about ionic framework, but there are various Javascript concepts you can use to make it work. – dubes Jul 24 '18 at 06:29
0

There you go. :)

function transformDate(givenDate) {
    if (moment().subtract(7, 'days').valueOf() > moment(givenDate).valueOf()) {
      return moment(givenDate).format('llll');
    } else if (moment().subtract(1, 'days').valueOf() > moment(givenDate).valueOf()) {
      return moment(givenDate).calendar();
    } else {
      return moment(givenDate).fromNow();
    }
}
// current time
console.log(transformDate(new Date()));
// 8 days before this answer was posted 
console.log(transformDate(new Date(1531394211385))); 
// 2 days before this answer was posted
console.log(transformDate(new Date(1531912692803))); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
UtkarshPramodGupta
  • 7,486
  • 7
  • 30
  • 54