Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.03.2015, 11:56
Интересующийся
Отправить личное сообщение для alexgrenn Посмотреть профиль Найти все сообщения от alexgrenn
 
Регистрация: 26.03.2015
Сообщений: 18

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

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

Объясняю в чем прикол 00:45 это обеденный перерыв и его надо подсчитать. Его начало в 12:00 а окончание в 12:45 и вот если значения первых двух input попадают в этот промежуток то количество обеденных минут должно автоматом подставляться в третье поля но как это реализовать??
Ответить с цитированием
  #2 (permalink)  
Старый 26.03.2015, 12:42
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Не совсем я понял что тебе надо, но явно тебе сюда - 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- тут аналогично для этих дат получить миллесекунды и проверить операторами <>
Ответить с цитированием
  #3 (permalink)  
Старый 26.03.2015, 13:55
Интересующийся
Отправить личное сообщение для alexgrenn Посмотреть профиль Найти все сообщения от alexgrenn
 
Регистрация: 26.03.2015
Сообщений: 18

Время переконвертировать для подсчетов придется это понятно но логика все же у процесса должна быть такая 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Время на обед
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>

Последний раз редактировалось рони, 26.03.2015 в 14:51.
Ответить с цитированием
  #5 (permalink)  
Старый 26.03.2015, 14:53
Интересующийся
Отправить личное сообщение для alexgrenn Посмотреть профиль Найти все сообщения от alexgrenn
 
Регистрация: 26.03.2015
Сообщений: 18

СПАСИБО! СПАСИБО Громадное то что надо
Ответить с цитированием
  #6 (permalink)  
Старый 29.03.2015, 15:25
Интересующийся
Отправить личное сообщение для alexgrenn Посмотреть профиль Найти все сообщения от alexgrenn
 
Регистрация: 26.03.2015
Сообщений: 18

Возник еще один большой вопрос.
У меня не получается теперь подружить этот скрипт с моим инпутом. Он у меня был с маской --:-- но маску скрипт не видит и когда данные вводятся подсчет не идет. Думал о селектах но не придумал как их прикрутить к скрипту. Пробовал всевозможные timepicker но они тоже данные вводятся но не считаются. Еще пробовал скрипт с автозаполнением инпут но тажа петрушка автоматически подсчет не идет. Единственный вариант которые получается это присвоить инпут type = time но в ie это не работает и потому мне не подходит.
Что же делать?
Ответить с цитированием
  #7 (permalink)  
Старый 29.03.2015, 17:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

alexgrenn,
Ответить с цитированием
  #8 (permalink)  
Старый 31.03.2015, 15:55
Интересующийся
Отправить личное сообщение для alexgrenn Посмотреть профиль Найти все сообщения от alexgrenn
 
Регистрация: 26.03.2015
Сообщений: 18

Вот я пробовал ввод данных через дубли input но что то у меня не получается. Если в ручную забивать во второе поля считает, а если вбивать данные с последующим дублированием то нет, что то я не правильно делаю видимо https://jsfiddle.net/alexgrenn/t4xxcv5x/
Ответить с цитированием
  #9 (permalink)  
Старый 31.03.2015, 17:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от 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>
Ответить с цитированием
  #10 (permalink)  
Старый 31.03.2015, 18:21
Интересующийся
Отправить личное сообщение для alexgrenn Посмотреть профиль Найти все сообщения от alexgrenn
 
Регистрация: 26.03.2015
Сообщений: 18

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подружить jQuery Raphael.js и query.qtip.min.js (как сделать подсказки для отрисованн ufaclub jQuery 0 09.10.2014 21:08
Как заменить select на input Batyabest Элементы интерфейса 0 02.09.2014 15:41
Как разбить input на заданное число ячеек как в кроссворде? javascript_pupil (X)HTML/CSS 2 20.08.2014 10:28
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 13:55