CODEWITHSUNDEEP
javascriptvue.jstime
Yahoo
Yahoo

Reputation: 568

Vue change military time into standard time

I am fetching arrivalTime from todos.items. While fetching the arrivalTime it sorts out military time using sortedArray function(). Is there a way to change sorted time values from military to standard after being sorted out?

View

<div id="app">

  <div v-for="todo in sortedArray">
    {{todo.items.arrivalTime}}
  </div>
   <!-- is there a way to convert to todo.items.arrivalTime as paragraph<p> below -->
  <br>
  <h1>
    <b>Convert Into</b>
  </h1>
  <br>
  <p>09:00 AM</p>
  <p>10:00 AM</p>
  <p>11:00 AM</p>
  <p>02:00 PM</p>
  <p>10:00 PM</p>

</div>

Script

new Vue({
  el: "#app",
  data: {
    todos: [
      { id: "1", items:{arrivalTime: "1100"} },
      { id: "2", items:{arrivalTime: "1000"} },
      { id: "3", items:{arrivalTime: "1400"} },
      { id: "4", items:{arrivalTime: "0900"} },
      { id: "5", items:{arrivalTime: "2200"} },
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  },
  computed:{
    sortedArray: function() {
      console.log("inside sortedArray");
      function compare(a, b) {
        if (a.items.arrivalTime < b.items.arrivalTime)
          return -1;
        if (a.items.arrivalTime > b.items.arrivalTime)
          return 1;
        return -1;
          }
      return this.todos.sort(compare);
    }
  }
})

I tried to use jsFiddle and make some change military time into standard time, but it did not work. Below is my code uploaded on JsFiddle

https://jsfiddle.net/ujjumaki/m2sowbv9/19/

Upvotes: 0

Views: 117

Answers (2)

n-smits
n-smits

Reputation: 713

This is unrelated to Vue, but is about JavaScript in general.

Solution you'd be looking for would be somewhere along spliting the military time string by characters and feeding into a Date object - if you'd want full info.

var hrs, min, result, time;

time = '1100';

hrs = time.slice(0, 2);
min = time.slice(2, 4);
console.log(hrs, min);

result = new Date;
result.setHours(hrs);
result.setMinutes(min);
console.log(result);

That gives you a complete Date object. From there you can format the time with a library like date-fns.

Or, if you don't need the functionality where you'd later be adding some time to it, need to know the date etc., you can just skip all of that and manipulate the military time string directly.

var hrs, min, result, time;

time = '1100';

hrs = time.slice(0, 2);
min = time.slice(2, 4);

if (parseInt(time) > 1259) {
  result = `${hrs - 12}:${min} PM`;
} else {
  result = `${hrs}:${min} AM`;
}

console.log(result);

Also, please note the above is not necessarily 100% correct. E.g. I'm not sure at the moment is 12:59 supposed to be AM or PM where you are from, but I hope you got the gist of it.

Cheers and good luck

Upvotes: 1

Goofballtech
Goofballtech

Reputation: 958

I have a very similar solution to above. They were faster.

https://jsfiddle.net/goofballtech/gom4rvst/31/

fromMilTime: function(time){
      if(parseInt(time) <= 1259){
       return `${time.slice(0,2).padStart(2, '0')}:${time.slice(2).padStart(2, '0')} AM`
      }else if (parseInt(time) >= 1300 && parseInt(time) <= 2359){
        let math = parseInt(time) - 1200
        let temp = math.toString()
        return `${temp.slice(0,1).padStart(2, '0')}:${temp.slice(2,3).padStart(2, '0')} PM`
      }
    }

Upvotes: 1

Related Questions