Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can i convert 12-hours to 24-hours in vue.js?

I am new to vue.js. I wrote this code:

<li class="list-inline-item me-3">
              <h5
                    class="font-size-14"
                    data-toggle="tooltip"
                    data-placement="top"
                    title="From"
                  >
                  <label>Start time</label>
                  <br />
                  <i class="bx bx-time me-1 text-muted">
                    <b-form-input class="no-border" :value="object.start_time.slice(0,5)" :disabled="!object.can_change" @input="object.start_time = $event"
                    format="HH:mm" value-type="format" type="time" placeholder="HH:mm"></b-form-input>
                  </i></h5>
            </li>

This code show the time with hours and minutes. The problem is that hours are 12 hours with am and pm but I want 24 hours. How can I do this?

Tags:

4

Answers


  1. 0

    this has nothing to do with vue.js.you can try day.js.you can use the formate of the day.js to convert 24-hours.

    Login or Signup to reply.
  2. 0

    Please add your time source for further context.

    Because I dont know how the time data looks I’ll assume that you get it as a string based on your Issue description.

    If you want to display a timepicker with bootstrap vue, use the form-timepicker.
    There you can configure the hour cycle.

    If it is a string that you just want to transform, you can create a function / pipe to transform the value like this.

    // e.g. timeString = '9 pm'
formatToHH(timeString: string): number | undefined {
    const split = timeString.split(' ');

    if (split.length <= 1) {
        return;
    }

    if (split[1] === 'am') {
        return Number(split[0]);
    }

    if (split[1] === 'pm') {
        return Number(split[0]) * 2;
    }

    return;
}
    Login or Signup to reply.
  3. 0

    I’m guessing object.start_time.slice(0,5) is the HH:mm part of a 12h formatted time like 12:00 am. Ideally, you would store a parsed datetime object or numeric timestamp in that property instead and format it where you need it, but if you don’t have control over the data, you could split the string and do the math yourself, or have it parsed and formatted by a function:

    const to24h = (time12h: string) =>
  new Date('1970 ' + time12h).toLocaleTimeString('en-US', { hour12: false, timeStyle: 'short' })

< ... :value="to24h(object.start_time)" ... />
    Login or Signup to reply.
  4. 0

    You can use the date object

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString#using_options

        function convertTo24Hour() {
        let date = new Date();

        return date.toLocaleTimeString('en-US',
            { hour12: false });
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search