Ввод в input с кнопки
 

Добрый день не могу понять как вводить в input с кнопки, есть код:

<input type="time" class="input_time" id="input" value/>
        <button onclick="getTime()">ввод</button>
        <div id="time"></div>

С клавиатуры вводим время, после нажатия ввод записывается значение в <div id="time">.

function getTime() {
      var time = $("#input").val();
      $("#time").html(time);
};

Теперь вопрос, как вводить время в input не с клавиатуры а с кнопок? Например:

<input type="time" class="input_time" id="input" value/>
<button onclick="getBut(1)">1</button>
<button onclick="getBut(2)">2</button>
<button onclick="getBut(3)">3</button>
<button onclick="getBut(4)">4</button>
<button onclick="getBut(5)">5</button>
<button onclick="getBut(6)">6</button>
<button onclick="getBut(7)">7</button>
<button onclick="getBut(8)">8</button>
<button onclick="getBut(9)">9</button>
<button onclick="getBut(0)">0</button>
<button onclick="getTime()">ввод</button>

function getTime() {
    var time = $("#input").val();
     $("#time").html(time);
};
function getBut(but) {
     $("#input").append(but);
};

Попробуйте так:

function getBut(but) {
     $("#input").val(function(){
          return this.value+but;
     });
};

Artur_Hopf,
время, это часы/минуты/секунды, а может быть еще и мельче единицы и либо в каком-то формате, либо как отдельные значение причем не превышающие определенные. А вы чего вводите?

Nexus,
проблема больше с нужно значение в формате time, для крутых браузеров

рони, да, хрень написал.

Крутые браузеры уже обзавелись поддержкой и календарей, и time, и datetime. :)

laimas,
Задача в том чтобы пользователь выбрал время на сенсорном экране, клавиатуру я написал свою циферную, а вот как сделать грамотно ввод времени пока что думаю. Сенсор на винде без каких либо кнопов ввода.

Artur_Hopf, зачем?
https://caniuse.com/#feat=input-datetime

Nexus,
Как этой крутатенькой пользоватся то? :-? Точнее можно ли это как то прикрутить, аля:

<link rel="stylesheet" href="inc/css/крутыечасики.css" />
<script type="text/javascript" src="inc/js/крутыечасики.js"></script>

крутыечасики(работать).выбираем что надо // ?=)))

Artur_Hopf,
если очень хочется, то maskedinput

Да хоть в уме или карандашом на бумаге. :) Формат time, это HH:ss, при этом может быть 24/12 часовой, а значит не просто кнопки щелкать надо, но и проверять диапазон значений, который вводится на текущий момент. То есть задача немного сложнее, чем есть кнопки и щелкать по ним.

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

Nexus,
В общем я сделяль так =)):

<li>Часы</li><input type="range" min="0" max="24" class="input_range" id="input_st" oninput="inputRangeTime('input_st', 'input_put_1')"/>
<li>Минуты</li><input type="range" min="00" max="60" class="input_range" id="input_en" oninput="inputRangeTime('input_en', 'input_put_1')"/>
<li>Выводются сюда, но перетирают друг друга:</li>
<input type="text" id="input_put_1" placeholder="14"/>
<li>Как сделать вид:</li>
<input type="text" placeholder="14:58">

function inputRangeTime(elem, elem2){
    var rng = document.getElementById(elem); 
    var input = document.getElementById(elem2); 
    input.value=rng.value;
};

Теперь вопрос, как вставить значение с обоих ползунков в один iput text, чтобы было на вроде 12:46?
И кстати как сделать так чтоб все тут видели как работает html и javascript вместе?

читайте http://javascript.ru/formatting

Тип поля можно поменять на time и смотреть эту страничку.

Без смены типа получить значения обоих ваших полей и вставить их в третье.

<div>
<input type="text" id="a">
<input type="text" id="b">
<input type="text" id="c">
</div>
<script>
[a,b].forEach(item=>item.oninput=()=>c.value=a.value+':'+b.value);
</script>

Nexus,
Спасибо большое, сделал так:

<div>
<div>Выберете время </div>
    <input type="range" min="00" max="23" class="input_range" id="input_st" oninput="inputRangeTime('input_st', 'input_en', 'input_put_1_1')"/>
    <input type="range" min="00" max="59" class="input_range" id="input_en" oninput="inputRangeTime('input_st', 'input_en', 'input_put_1_1')"/>
    <input type="text" id="input_put_1_1" /></br>
</div>
 <script type="text/javascript">
function inputRangeTime(elem, elem2, elem3){
    var rng = document.getElementById(elem); 
    var rng2 = document.getElementById(elem2); 
    var input = document.getElementById(elem3);  
    input.value=rng.value+':'+rng2.value;
};
</script>