Переменные вместе с input как подружить?
Здравствуйте, прошу Вашей помощи. Задача следующая. Есть 3-и input. В первый вводится время и во второй тоже а в третий должен сразу вставляться результат. Но результат не простой. А теперь весь прикол. Значит если указано:
первое поле 10:00 второе 13:40 (к примеру) то в третьем input должно появится 00:45. А вот если к примеру: в первом указано 10:00 во втором 12:20 то в третьем сразу должно появится значение 00:20 Объясняю в чем прикол 00:45 это обеденный перерыв и его надо подсчитать. Его начало в 12:00 а окончание в 12:45 и вот если значения первых двух input попадают в этот промежуток то количество обеденных минут должно автоматом подставляться в третье поля но как это реализовать?? |
Не совсем я понял что тебе надо, но явно тебе сюда - 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- тут аналогично для этих дат получить миллесекунды и проверить операторами <> |
Время переконвертировать для подсчетов придется это понятно но логика все же у процесса должна быть такая 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; } и тд. Ну это тоже как пример, так сравниваться должны два значения. |
Время на обед
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>
|
СПАСИБО! СПАСИБО Громадное то что надо :dance:
|
Возник еще один большой вопрос.
У меня не получается теперь подружить этот скрипт с моим инпутом. Он у меня был с маской --:-- но маску скрипт не видит и когда данные вводятся подсчет не идет. Думал о селектах но не придумал как их прикрутить к скрипту. Пробовал всевозможные timepicker но они тоже данные вводятся но не считаются. Еще пробовал скрипт с автозаполнением инпут но тажа петрушка автоматически подсчет не идет. Единственный вариант которые получается это присвоить инпут type = time но в ie это не работает и потому мне не подходит. Что же делать? |
alexgrenn,
:-? |
Вот я пробовал ввод данных через дубли input но что то у меня не получается. Если в ручную забивать во второе поля считает, а если вбивать данные с последующим дублированием то нет, что то я не правильно делаю видимо https://jsfiddle.net/alexgrenn/t4xxcv5x/
|
Цитата:
<!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>
|
Большое при большое Вам спасибо, спасли меня.
|
| Часовой пояс GMT +3, время: 18:54. |