Форум

alexgrenn · #1 (**permalink**) 26.03.2015, 11:56

Здравствуйте, прошу Вашей помощи. Задача следующая. Есть 3-и input. В первый вводится время и во второй тоже а в третий должен сразу вставляться результат. Но результат не простой. А теперь весь прикол. Значит если указано:
первое поле 10:00
второе 13:40 (к примеру) то в третьем input должно появится 00:45.

А вот если к примеру:
в первом указано 10:00
во втором 12:20 то
в третьем сразу должно появится значение 00:20

Объясняю в чем прикол 00:45 это обеденный перерыв и его надо подсчитать. Его начало в 12:00 а окончание в 12:45 и вот если значения первых двух input попадают в этот промежуток то количество обеденных минут должно автоматом подставляться в третье поля но как это реализовать??

krasovsky · #2 (**permalink**) 26.03.2015, 12:42

Не совсем я понял что тебе надо, но явно тебе сюда - http://javascript.ru/Date
new Date(2015,2,26,12,20).getTime() - конечная дата минус начальная - new Date(2015,2,26,10,00).getTime() получаем разницу в милесекундах, делим до минут /1000/60
Как подставить время из инпута думаю сам разберешься. И незнаю проверить тебе нужно наверно попадает начальная и конечная дата в между 120 00 и 12 40- тут аналогично для этих дат получить миллесекунды и проверить операторами <>

alexgrenn · #3 (**permalink**) 26.03.2015, 13:55

Время переконвертировать для подсчетов придется это понятно но логика все же у процесса должна быть такая http://jsfiddle.net/alexgrenn/w33Lewm1/
но здесь только один input как бы сюда прикрутить второй и чтобы сравнение шло по двум input и если условие выполняется то выводится нужный результат.

в примере там всего одно значения а будет так

if (this.value > 12) {
res = 5;
}
if (this.value > 11) {
res = 4;
}
if (this.value > 10) {
res = 3;
}
и тд.

Ну это тоже как пример, так сравниваться должны два значения.

рони · #4 (**permalink**) 26.03.2015, 14:47

alexgrenn,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
   <script>
    function cost(run, end) {
    var lunch = [(new Date()).setHours(12, 0, 0, 0),(new Date()).setHours(12, 45, 0, 0)]
    run =  (new Date()).setHours(run[0], run[1],0,0);
    end =  (new Date()).setHours(end[0], end[1],0,0);
    run > lunch[0] && (lunch[0]=run);
    end < lunch[1] && (lunch[1]=end);
    if(run > lunch[1]||end < lunch[0]||run > end) return 0;
    return (lunch[1] - lunch[0])/60000 ;
};
    document.addEventListener("input", function(event) {
    var el = event.target;
    if (el.classList.contains('time')) {
      var inp =  document.querySelectorAll('.time');
      if (inp[0].value.length != 5 || inp[1].value.length != 5) return ;
         var run =  inp[0].value.split(':'),
          end =  inp[1].value.split(':');
          inp[2].value = cost(run, end)

    }
});

  </script>
</head>

<body>
<input type="text" class="time">
<input type="text" class="time">
<input type="text" class="time">
</body>

</html>

alexgrenn · #5 (**permalink**) 26.03.2015, 14:53

СПАСИБО! СПАСИБО Громадное то что надо

alexgrenn · #6 (**permalink**) 29.03.2015, 15:25

Возник еще один большой вопрос.
У меня не получается теперь подружить этот скрипт с моим инпутом. Он у меня был с маской --:-- но маску скрипт не видит и когда данные вводятся подсчет не идет. Думал о селектах но не придумал как их прикрутить к скрипту. Пробовал всевозможные timepicker но они тоже данные вводятся но не считаются. Еще пробовал скрипт с автозаполнением инпут но тажа петрушка автоматически подсчет не идет. Единственный вариант которые получается это присвоить инпут type = time но в ie это не работает и потому мне не подходит.
Что же делать?

рони · #7 (**permalink**) 29.03.2015, 17:36

alexgrenn,

alexgrenn · #8 (**permalink**) 31.03.2015, 15:55

Вот я пробовал ввод данных через дубли input но что то у меня не получается. Если в ручную забивать во второе поля считает, а если вбивать данные с последующим дублированием то нет, что то я не правильно делаю видимо https://jsfiddle.net/alexgrenn/t4xxcv5x/

рони · #9 (**permalink**) 31.03.2015, 17:13

Сообщение от alexgrenn

Пробовал всевозможные timepicker

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/eggplant/jquery-ui.css">
   <link rel="stylesheet" type="text/css" href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  	<script type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
    <script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
  <script>
     $(function() {
      var startTimeTextBox = $('#inp1');
      var endTimeTextBox = $('#inp2');
      var showTimeTextBox = $('#inp3');
      $.timepicker.timeRange(
          startTimeTextBox,
          endTimeTextBox, {
              onClose: function(dateText, inst) {
                  if (endTimeTextBox.val() && startTimeTextBox.val()) {
                      var run = startTimeTextBox.datetimepicker('getDate');
                      var end = endTimeTextBox.datetimepicker('getDate');
                      var lunch = [(new Date()).setHours(12, 0, 0, 0), (new Date()).setHours(12, 45, 0, 0)];
                      run > lunch[0] && (lunch[0] = run);
                      end < lunch[1] && (lunch[1] = end);
                      var time = (lunch[1] - lunch[0]) / 60000;
                      if (run > lunch[1] || end < lunch[0] || run > end) time = 0;
                      showTimeTextBox.val(time);
                  }
              },
              minInterval: (1000 * 60 * 60), // 1hr
              timeFormat: 'HH:mm',
              start: {}, // start picker options
              end: {} // end picker options
          }
      );
  });
  </script>
</head>

<body>
<input type="text" id="inp1">
<input type="text" id="inp2">
<input type="text" id="inp3">

</body>

</html>

alexgrenn · #10 (**permalink**) 31.03.2015, 18:21

Большое при большое Вам спасибо, спасли меня.

Форум

Справочник

Discord чат

Курсы javascript