Ru-Board.club
← Вернуться в раздел «Web-программирование»

» JavaScript: Поле для ввода даты

Автор: yarrr
Дата сообщения: 20.08.2007 09:42
Проблем следующая
Есть поле для ввода даты в формате dd.mm.yyyy
хочется упростить пользователю жизнь и не задумываться над разделителями.
хочу сделать разделители статическими... т.е. чтобы на поле уже стояло 2 точки и при вводе курсор их какбы перепрыгивал... естьли у кого мысли по этому поводу, как сделать? может уже кто делал буду благодарен за примерчик...
Автор: NightSpamer
Дата сообщения: 20.08.2007 10:51
С одним полем ввода будет непросто... Намного проще (но дальше от идеального решения) использовать несколько отдельных полей, например, как тут http://www.onlineconversion.com/unix_time.htm
Или самостоятельно анализировать введённую строку... например, принимать любые (не цифровые) разделители, определять порядок параметров (4 знака - год, число больше 12 - день и т.д.)
С одним полем можно реагировать на изменение (onChangeonKeyUp=...) значения поля, читать, если введено 2 (dd) или 5 (dd.mm) знаков - добавить точку, записать обратно в поле..

Добавлено:
Даже самому интересно стало... счас попробую набросать примерчик.

Добавлено:
На ФФ работает

Код: <html>
<head>
<script language="JavaScript">
<!--
function checkDate()
{
    var dateText=document.getElementById('date').value;
    if ((dateText.length==2)||(dateText.length==5))
    {
        dateText+='.';
        document.getElementById('date').value=dateText;
    }
}
//-->
</script>
</head>
<body>
<input type=text id="date" onKeyUp=checkDate()>
</body>
</html>
Автор: yarrr
Дата сообщения: 20.08.2007 13:01
d IE тоже вроде работает вот только старать написанное backspaceом не хочет только делетом
а так впринцепе то что надо... единственно хотелось бы чтобы точки уже были... а то пользователя запутать просто... он сам точку поставит, а потом она еще и сама допишется
Автор: NightSpamer
Дата сообщения: 20.08.2007 14:13
Если backspace подольше подержать - стирает (KeyUp не происходит -> точка не дописывается).
Насчет того, что пользователь сам точек наставит - можно пропускать только цифры:

Код: function checkDate()
{
    var dateText=document.getElementById('date').value;
    var ch=dateText.charAt(dateText.length-1);
    if ((ch<'0')||(ch>'9'))
    {
        dateText=dateText.substr(0,dateText.length-1);
        document.getElementById('date').value=dateText;
    }
    if ((dateText.length==2)||(dateText.length==5))
    {
        dateText+='.';
        document.getElementById('date').value=dateText;
    }
}
Автор: yarrr
Дата сообщения: 20.08.2007 15:58
блин у меня реально не стирает... хоть пол часа держи
с этим конечно что то надо делать а так вроде все супер
Автор: Romeo_sh
Дата сообщения: 20.08.2007 16:59
Если хочешь, чтобы точки уже были?? - Нарисуй их )))

Я серьезно - подготавливаешь рисуночек с двумя точками и делаешь его бекграундом для поля формы
Автор: yarrr
Дата сообщения: 20.08.2007 18:14
это мысль... спс осталось скриптик привести в норму а то сыроват))))
Автор: Cheery
Дата сообщения: 20.08.2007 18:14
Romeo_sh

Цитата:
Я серьезно - подготавливаешь рисуночек с двумя точками и делаешь его бекграундом для поля формы

а зачем, собственно, заниматься извращением?

yarrr

Цитата:
блин у меня реально не стирает... хоть пол часа держи

браузер, плиз..
Автор: yarrr
Дата сообщения: 20.08.2007 18:33
Cheery IE7
может их и не стоит рисовать.... просто хочется чтобы пользователь их не смог не стереть вобщем чтоб они в поле просто игнорировались...
Автор: Melkosoft
Дата сообщения: 20.08.2007 19:02
А может ещё больше упростить жизнь пользователю и дать ему календарь как в Windows?
Пример, см. поле «Туда».



Добавлено:
Нужно просто поставить курсор в это поле.
Автор: yarrr
Дата сообщения: 20.08.2007 19:16
не это не удобно тут идет речь о дате рождения... заколебаешся мотать
Автор: Cheery
Дата сообщения: 20.08.2007 19:36
yarrr

Цитата:
не это не удобно тут идет речь о дате рождения... заколебаешся мотать

с переносом положения курсора в js есть некоторые сложности. размер кода сильно увеличится.
Автор: yarrr
Дата сообщения: 20.08.2007 19:45
но было бы очень удобно
Автор: Cheery
Дата сообщения: 20.08.2007 19:47
yarrr

Цитата:
но было бы очень удобно

увеличение количества кода не гарантирует работу под всеми браузерами.
удобно - сделай выпадающие селекты с днем, месяцем и годом.

javascript не предназначен для подобной динамики..в этом его слабость.
хочется сделать так - делай поля с использованием Flash


ps: вот тебе мой код навскидку.. наверняка потребует доработки и не гарантирую работу под любым браузером

Код: <html>
<head>
<script language="JavaScript">
function check(evt,obj)
{
var keyCode = evt.keyCode ? evt.keyCode :
evt.charCode ? evt.charCode :
evt.which ? evt.which : void 0
var pos=doGetCaretPosition(obj)
if (keyCode>=48&&keyCode<=57&&obj)
{
if (pos>9) return
obj.value=obj.value.substr(0,pos)+String.fromCharCode(keyCode)+obj.value.substr(pos+1)
pos++
}
else pos+=(keyCode==8||keyCode==37)?-1:(keyCode==39?1:0)

if (pos==2||pos==5)
if(keyCode==37) pos--
else pos++
setCursor(obj,pos)
}
function doGetCaretPosition(ctrl){
var CaretPos=0
if( document.selection ){
var range = document.selection.createRange()
try {
var stored_range = range.duplicate()
stored_range.moveToElementText(ctrl)
stored_range.setEndPoint('EndToEnd',range)
CaretPos=stored_range.text.length-range.text.length
}
catch(e)
{
range.moveStart('character',-ctrl.value.length)
CaretPos=range.text.length}
} else if(ctrl.selectionStart||ctrl.selectionStart=='0') CaretPos=ctrl.selectionStart
return CaretPos
}

function setCursor(obj, pos)
{
if (obj.setSelectionRange)
{
obj.focus()
obj.setSelectionRange(pos, pos)
}
else if (obj.createTextRange)
{
var range = obj.createTextRange()
range.collapse(true)
range.moveEnd('character', pos)
range.moveStart('character', pos)
range.select()
}
}
</script>
</head>
<body>
<input type=text id="date" onKeydown='check(event,this); return false' value=' / / ' maxlength=10>
</body>
</html>
Автор: lShendorl
Дата сообщения: 06.07.2016 14:40
$('.datepickered').on('keyup', function(e) {

var $this = $(this);
var val = $this.val();
var newVal = '';

val = val.replace(/\./g, '');

for (var i = 0; i < val.length; i++) {
newVal += val[i];
if (i == 1 || i == 3) {
newVal += '.';
}
if (e.keyCode == 8) {
return false;
}
}
$this.val(newVal);
});
Автор: MERCURY127
Дата сообщения: 06.07.2016 23:02
Не прошло и девяти лет...

Страницы: 1

Предыдущая тема: Apache отдает error 500 вместо выставленной в PHP 600


Форум Ru-Board.club — поднят 15-09-2016 числа. Цель - сохранить наследие старого Ru-Board, истории становления российского интернета. Сделано для людей.