0

I am trying to make a time conversion function that takes time in as "h:mm A" and converts it to military time (HH:mm:00) in day.js, but am struggling to figure it out. I was able to complete this task without dayjs but can't quite figure it out with dayjs. Here is my attempt at it:

The 00 is there as I want the seconds to default to 00. Thank you!

function convertToMilitaryTime(formattedTime) {
  if (formattedTime) { //formattedTime is 'h:mm A'
    const formatted = dayjs(formattedTime, "h:mm A")
    return day(formattedTime, ['h:mm A']).format("HH:mm:00")
  }
  return formattedTime;
}
console.log(convertToMilitaryTime("10:24 AM")); // not a valid date string
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.3/dayjs.min.js"></script>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
karjeezy
  • 61
  • 1
  • 9
  • I made you a snippet - I removed the typescript to make it a runnable snippet. You had a typo with the quotes, but your code stull does not work. What is a valid date input and what is the function `day` you are calling? Please fix the script to a [mcve] – mplungjan Jun 30 '22 at 19:25
  • The A that I am using is the dayjs formatting for AM/PM @mplungjan – karjeezy Jun 30 '22 at 19:31
  • A valid date input would be say "10:24 AM" or "8:55 PM" – karjeezy Jun 30 '22 at 19:32
  • So what is `day()` - I updated your snippet with 10:24 AM – mplungjan Jun 30 '22 at 19:34
  • @mplungjan I'm asking the question because of the fact that I couldn't get it to work. Day() was just modeled after the approach that would be applicable to momentjs. Not too sure how to make this code work though for intended purposes. – karjeezy Jun 30 '22 at 19:49
  • [Or without using dayjs](https://stackoverflow.com/questions/15083548/convert-12-hour-hhmm-am-pm-to-24-hour-hhmm) – mplungjan Jun 30 '22 at 20:54

2 Answers2

3

Just prepend any date to make a valid dayjs date object

Note: this is the lazy way of allowing a time string. To adhere to the documentation of dayJS. look at the other answer

Or don't use dayJS at all

const ampm2military = ampm => ampm ? dayjs(`1/1/1 ${ampm}`).format("HH:mm:00") : null;

console.log(ampm2military("1:24 PM"));
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.3/dayjs.min.js"></script>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
2

There are a couple of errors in your code:

  • the function name is dayjs, not day
  • this formatting requires a plugin (customParseFormat - "String + Format" depends on this plugin; it's noted on the top part of the docs (in yellow)); you have to load this plugin for the syntax to work
  • after loading the plugin, you have to extend dayjs with the new capabilities

(Edited the code: removed the double call of dayjs in the conditional.)

// extend dayjs with the loaded customParseFormat plugin
dayjs.extend(window.dayjs_plugin_customParseFormat)

function convertToMilitaryTime(formattedTime) {
  if (formattedTime) { //formattedTime is 'h:mm A'
    // the function name is dayjs, not day
    return dayjs(formattedTime, 'h:mm A').format("HH:mm:00")
  }
  return formattedTime;
}
console.log(convertToMilitaryTime("10:24 AM")); // not a valid date string
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.3/dayjs.min.js"></script>
<!-- load the required plugin: -->
<script src="https://unpkg.com/dayjs@1.11.3/plugin/customParseFormat.js"></script>

EDIT: updated code

// extend dayjs with the loaded customParseFormat plugin
dayjs.extend(window.dayjs_plugin_customParseFormat)

const convertToMilitaryTime = (ft) => dayjs(ft, "h:mm A", "en", true).isValid() ? dayjs(ft, 'h:mm A').format("HH:mm:00") : ft

console.log(convertToMilitaryTime("10:24 AM")); // not a valid date string
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.3/dayjs.min.js"></script>
<!-- load the required plugin: -->
<script src="https://unpkg.com/dayjs@1.11.3/plugin/customParseFormat.js"></script>
muka.gergely
  • 8,063
  • 2
  • 17
  • 34
  • @mplungjan you may be right in this case - but I don't know what OP is using dayjs for, what other formatting issues s/he might have in the tasklist; also, this relies on the official API of dayjs, and not on a smart solution. Extensible, reliable, repeatable (by less skilled devs too). But I agree: kbytes for a simple formatting may be a hefty price :) – muka.gergely Jun 30 '22 at 21:01
  • Why do you call it twice? – mplungjan Jun 30 '22 at 21:03
  • @mplungjan let me keep that as a secret ;) (actually, I realized that the code that I copied is not really optimal only after I closed the editor. then I was just lazy to correct it.) – muka.gergely Jun 30 '22 at 21:04
  • but now I updated the answer with a bit updated code – muka.gergely Jun 30 '22 at 21:12
  • @mplungjan because the "crappy version" is the original one (OP's) corrected so it works. My experience is that this way it's easier for people to understand the changes needed. – muka.gergely Jul 01 '22 at 07:30
  • But then at least remove the double call ? – mplungjan Jul 01 '22 at 07:32
  • 1
    @mplungjan it really bugs you, doesn't it? :) I removed it - this way it's almost there where my updated example is. – muka.gergely Jul 01 '22 at 07:37
  • 1
    Yeah it did because you made me aware that my solution was almost a hack, then I got a bit obsessed that your solution which is perhaps better or at least more adhering to the manual was not optimal. I linked to your answer from mine, you see – mplungjan Jul 01 '22 at 09:41