Moikka,
Mahtaiskoshan kellään olla hyvää toimivaa ratkaisua timepickerille?
Tyyliin popup-valitsin jossa esim. toisessa input text-kentässä aukeaisi 0-23 tunnit ja minuutti inputtia painettaessa 0-59 minuutit.
Sellaista helppokäyttöistä etsiskelen ja ei ole oikein löytynyt sopivaa..
Jquery tai javascript kay kyllä.
Kiitos etukäteen!
<input type="time" />
Aika kätevä, vai mitä? ;) Toimii toistaiseksi lähinnä Operassa.
Mitä vikaa on siinä, että tekisit vain kaksi tavallista select-elementtiä? Voit generoida ne jQuerylla vaikka tähän tapaan:
$("input[type=time]").each(function() {
var input = this;
var hidden = $("<input>").attr({"type": "hidden", "name": input.name});
var tunti = $("<select>");
var minuutti = $("<select>");
for (var i = 0; i < 24; ++i) {
tunti.append("<option>" + (i < 10 ? "0" + i : i) + "</option>");
}
for (var i = 0; i < 60; ++i) {
minuutti.append("<option>" + (i < 10 ? "0" + i : i) + "</option>");
}
tunti.add(minuutti).change(function() {
hidden.val(tunti.val() + ":" + minuutti.val());
});
hidden.replaceAll(input).before(tunti).before(minuutti);
});Kyllä tuo type='time' toimii myös Chromessa osittain(hiiren rullalla tulee näkyviin nykynen aika ja voi muuttaa), mobiililaitteilla taitaa toimia paremmin. iPadillä aukee esim. tunti-minuutti listaus ja type='date':llä kalenteri. Varmaan pikkuhiljaa yleistyy muuallekkin.
Helppokäyttöinen Timepicker laajennus löytyy jQueryn Datepickerille. Tuon linkin takaa en löytänyt yhtään esimerkkiä sellaisesta, jossa olisi tunnit ja minuutit eri kentissä. Minusta ainakin on helpompaa, kun ne ovat samassa kentässä.
Yksinkertaisimmillaan pelkän kellonajan valitsin saadaan aikaan näin:
<input class=".timepicker-input" type="text" ... />
$('.timepicker-input').timepicker({});Katselinkin jo aiemmin tuota timepicker laajennusta, mutta en saanut sitä toimimaan datepickerin kanssa.
Oliskos jotain helppoa ohjetta miten asennustiedostot sisällytetään jquery UI:n
ViKiNGi kirjoitti:
Katselinkin jo aiemmin tuota timepicker laajennusta, mutta en saanut sitä toimimaan datepickerin kanssa.
Tämä koodi pelittää suoraan, mutta ei ole paras mahdollinen.
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script class="jsbin" src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
/* Pari riviä pakollista CSS:iä. */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
</head>
<body>
<input type="text">
<script>
$(document).ready(function() {
$("input").timepicker({});
});
</script>
</body>
</html>ViKiNGi kirjoitti:
Oliskos jotain helppoa ohjetta miten asennustiedostot sisällytetään jquery UI:n
Kaikki tarvitsemasi tiedostot saat imuroimalla jQuery UI:n sen lataussivulta. Sekä imuroimalla lisäosan kooditiedoston.
Aihe on jo aika vanha, joten et voi enää vastata siihen.