Показать сообщение отдельно
  #2 (permalink)  
Старый 31.10.2022, 20:16
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,684

Может как-то так?

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
     <!-- Compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 <style>
    .timepicker{
        background: none;
        border: none;
        font-size: 16px;
    }
 </style>
 
 <div class="container">
     <div class="row">
         <div class="col s12 m3"></div>
         <div class="col s12 m6">
             <form>
                 <div class="input-field">
                     <input type="button" class="timepicker" value="06:00">
                     <!-- <label for="time">Set Time</label> -->
                     <p id="indicator"></p>
                     <p id="time"></p>
                     <p id="time2"></p>
                     <p id="time3"></p>
                     <p id="time4"></p>
                 </div>
             </form>
         </div>
         <div class="col s12 m3"></div>
     </div>
 </div>
 
 <button onclick="func()">Кнопка</button>
 
 <script>
  document.addEventListener('DOMContentLoaded', function() {
      var elem = document.querySelector('.timepicker');
      var instances = M.Timepicker.init(elem, {
          //  showClearBtn:true
          twelveHour: false,
          onSelect: (hours, minutes) => {
              document.querySelector('#indicator').innerHTML = elem.value = `${hours}:${minutes}`;
          }
      });

      document.querySelector('#indicator').innerHTML = elem.value;
  });

  function func() {
      const indicator = document.querySelector('#indicator');
      const hoursMinutesPair = indicator?.innerHTML.split(':');
      if (hoursMinutesPair.length !== 2) {
          throw new Error('Invalid time format');
      }

      const getFormattedTime = (([hours, minutes]) => {
          const baseDate = new Date();
          baseDate.setHours(hours);
          baseDate.setMinutes(minutes);

          return (addSeconds = 0) => {
              let date = baseDate;
              if (addSeconds) {
                  date = new Date(baseDate);
                  date.setTime(+date + addSeconds * 1000);
              }

              return [
                  date.getHours(),
                  date.getMinutes(),
              ].map(n => n <= 9 ? '0' + n : n).join(':');
          };
      })(hoursMinutesPair);

      const selectorToTimeShiftInSecondsMap = {
          '#time': -30 * 60,
          '#time2': 1 * 60 * 60,
          '#time3': 2.5 * 60 * 60,
          '#time4': 4 * 60 * 60,
      };
      for (const [selector, timeShift] of Object.entries(selectorToTimeShiftInSecondsMap)) {
          document.querySelector(selector).innerHTML = getFormattedTime(timeShift);
      }
  }
 </script>
 
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 </body>
 </html>
Ответить с цитированием