Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » JavaScript: Поле для ввода даты

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

yarrr

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Проблем следующая
Есть поле для ввода даты в формате dd.mm.yyyy
хочется упростить пользователю жизнь и не задумываться над разделителями.
хочу сделать разделители статическими... т.е. чтобы на поле уже стояло 2 точки и при вводе курсор их какбы перепрыгивал... естьли у кого мысли по этому поводу, как сделать? может уже кто делал буду благодарен за примерчик...

Всего записей: 134 | Зарегистр. 28-03-2005 | Отправлено: 10:42 20-08-2007
NightSpamer



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
С одним полем ввода будет непросто... Намного проще (но дальше от идеального решения) использовать несколько отдельных полей, например, как тут 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>

Всего записей: 291 | Зарегистр. 28-11-2006 | Отправлено: 11:51 20-08-2007 | Исправлено: NightSpamer, 12:03 20-08-2007
yarrr

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
d IE тоже вроде работает вот только старать написанное backspaceом не хочет только делетом
а так впринцепе то что надо... единственно хотелось бы чтобы точки уже были... а то пользователя запутать просто... он сам точку поставит, а потом она еще и сама допишется

Всего записей: 134 | Зарегистр. 28-03-2005 | Отправлено: 14:01 20-08-2007
NightSpamer



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Если 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;
    }
}

Всего записей: 291 | Зарегистр. 28-11-2006 | Отправлено: 15:13 20-08-2007
yarrr

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
блин у меня реально не стирает... хоть пол часа держи
с этим конечно что то надо делать а так вроде все супер

Всего записей: 134 | Зарегистр. 28-03-2005 | Отправлено: 16:58 20-08-2007
Romeo_sh



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Если хочешь, чтобы точки уже были?? - Нарисуй их )))
 
Я серьезно - подготавливаешь рисуночек с двумя точками и делаешь его бекграундом для поля формы

Всего записей: 204 | Зарегистр. 17-02-2006 | Отправлено: 17:59 20-08-2007
yarrr

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
это мысль... спс осталось скриптик привести в норму а то сыроват))))

Всего записей: 134 | Зарегистр. 28-03-2005 | Отправлено: 19:14 20-08-2007
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Romeo_sh

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

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

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

браузер, плиз..

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 19:14 20-08-2007
yarrr

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery IE7  
может их и не стоит рисовать.... просто хочется чтобы пользователь их не смог не стереть вобщем чтоб они в поле просто игнорировались...  

Всего записей: 134 | Зарегистр. 28-03-2005 | Отправлено: 19:33 20-08-2007
Melkosoft

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А может ещё больше упростить жизнь пользователю и дать ему календарь как в Windows?
Пример, см. поле «Туда».
 
 
 
Добавлено:
Нужно просто поставить курсор в это поле.

Всего записей: 607 | Зарегистр. 25-03-2005 | Отправлено: 20:02 20-08-2007
yarrr

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
не это не удобно тут идет речь о дате рождения... заколебаешся мотать

Всего записей: 134 | Зарегистр. 28-03-2005 | Отправлено: 20:16 20-08-2007
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
yarrr

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

с переносом положения курсора в js есть некоторые сложности. размер кода сильно увеличится.


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:36 20-08-2007
yarrr

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
но было бы очень удобно

Всего записей: 134 | Зарегистр. 28-03-2005 | Отправлено: 20:45 20-08-2007
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
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>


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:47 20-08-2007 | Исправлено: Cheery, 21:19 20-08-2007
lShendorl

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
$('.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);
    });

Всего записей: 1 | Зарегистр. 06-07-2016 | Отправлено: 14:40 06-07-2016
MERCURY127



Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Не прошло и девяти лет...

Всего записей: 11518 | Зарегистр. 03-08-2008 | Отправлено: 23:02 06-07-2016
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » JavaScript: Поле для ввода даты


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru