JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>International telephone input</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
   />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
 </head>
 <body>
   <input id="phone" type="tel" name="phone" />
 </body>
  <script>
   const phoneInputField = document.querySelector("#phone");
   const phoneInput = window.intlTelInput(phoneInputField, {
     utilsScript:
       "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
   });
 </script>
</html>

JavaScript

function convertTo24HourFormat(timeString) {
  const match = timeString.match(/(\d+):(\d+) (\w+)/);
  const hour = parseInt(match[1]);
  const minute = match[2];
  const period = match[3];
  let formattedHour = hour;

  if (period === 'PM' && hour < 12) {
    formattedHour += 12;
  }

  return `${formattedHour}:${minute}`;
}

const inputTimeStart = convertTo24HourFormat('9:30 AM');
const inputTimeEnd = convertTo24HourFormat('9:30 PM');

let date1 = new Date("08/06/2015 " + inputTimeStart + ":00");
let date2 = new Date("08/06/2015 " + inputTimeEnd + ":00");

if (date2 < date1) {
  date2.setDate(date2.getDate() + 1);
}
var dateTwo = new Date("08/06/2015 2:56:00");

let diff = date2 - date1;
diff = diff / 1000 / 60 /60
console.log(diff);