VPF::Calendar - Форум программистов

Tony

Дата 20.8.2007, 15:03 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Ето я

Код


<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript">
            var MONTH_NAMES=new Array('January','February','March','April','May','June','July','August','September','October','November','December','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
            var DAY_NAMES=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sun','Mon','Tue','Wed','Thu','Fri','Sat');
            var daysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
            
            function changeDay(uid,obj){
                obj = obj.srcElement||obj.target; 
                var val = obj.innerHTML;
                if (val != "" && obj.nodeName=="TD"){
                    var cDay = document.getElementById("c_day_"+uid);
                    cDay.value=val;
                    bod = document.getElementById("c_body_"+uid);
                    for(i=0;i<6;i++){
                        for (j=0;j<7;j++){
                            Element.removeClassName(bod.rows[i].cells[j], "calendarSelCell");
                        }
                    }    
                obj.className="calendarSelCell";
                }
                
            }
            function changeYearBack(uid){
                var cYear = document.getElementById("c_year_"+uid);
                cYear.value = parseInt(cYear.value)-1;
                moveBody(uid);
            }
            function changeYearForward(uid){
                var cYear = document.getElementById("c_year_"+uid);
                cYear.value = parseInt(cYear.value)+1;
                moveBody(uid);
            }
            function changeCalendar(uid,format){
                document.getElementById("c_calendar_"+uid).style.display="none";    
                var cDay = document.getElementById("c_day_"+uid).value;
                var fieldC = document.getElementById(uid);
                var cMonth = document.getElementById("c_month_"+uid).value;
                var cYear = document.getElementById("c_year_"+uid).value;
                date = new Date();
                date.setFullYear(cYear,cMonth,cDay);
                fieldC.value = formatDate(date,format);
            }    
            function moveBody(uid){
                var cMonth = document.getElementById("c_month_"+uid).value;
                var cYear = document.getElementById("c_year_"+uid).value;
                var cDay = document.getElementById("c_day_"+uid).value;
                var date = new Date();
                if (cYear % 4 == 0){
                    daysInMonth[1] = 29;        
                }
                date.setFullYear(cYear,cMonth,1);
                var dayOfWeek = date.getDay();
                //alert(dayOfWeek);
                if (dayOfWeek==0){
                    dayOfWeek = 7;
                }
                var cBody = document.getElementById("c_body_"+uid);
                cBody.removeChild(cBody.getElementsByTagName("tbody")[0]);
                elemTbody=document.createElement("tbody");
                cBody.appendChild(elemTbody);
                var cellDay = 0;
                for(i=0;i<6;i++){
                    var tr = cBody.insertRow(i);
                    for (j=0;j<7;j++){
                        var td = tr.insertCell(j);
                        repaintCell(td,cDay,cellDay,daysInMonth[cMonth]);
                        if (i==0 && dayOfWeek <= j+1){
                            cellDay++;
                            td.innerHTML = cellDay;
                        }else{
                            if (i>0 && daysInMonth[cMonth] > cellDay){
                                cellDay++;
                                td.innerHTML = cellDay;
                            }
                        }
                    }
                }            
            }
            
            function LZ(x) {return(x<0||x>9?"":"0")+x}
            
            function repaintCell(tdObj,cDay,iter,inMonth){
                iter = iter + 1;
                if (cDay==iter && inMonth >= iter){
                    tdObj.className="calendarSelCell";
                }
            }
            
            function showCalendar(uid,ev){
                ev=window.event||ev;
                var x = ev.clientX;
                var y = ev.clientY;
                var obj = document.getElementById("c_calendar_"+uid);
                obj.style.top = y+5+"px";
                obj.style.left = x+5+"px";
                
                
                var bod = document.getElementById("c_body_"+uid);
                var selDay = document.getElementById("c_day_"+uid).value;
                var exit = false;
                for(i=0;i<6;i++ && !exit){
                    for (j=0;j<7;j++ && !exit){
                        var cell = bod.rows[i].cells[j];
                        Element.removeClassName(cell, "calendarSelCell");
                        if (cell.innerHTML == selDay){
                            cell.className="calendarSelCell";
                            exit = true;
                        }
                    }
                }    
                obj.style.display="block";
            }
            
            function formatDate(date,format) {
                format=format+"";
                var result="";
                var i_format=0;
                var c="";
                var token="";
                var y=date.getYear()+"";
                var M=date.getMonth()+1;
                var d=date.getDate();
                var E=date.getDay();
                var H=date.getHours();
                var m=date.getMinutes();
                var s=date.getSeconds();
                var yyyy,yy,MMM,MM,dd,hh,h,mm,ss,ampm,HH,H,KK,K,kk,k;
                // Convert real date parts into formatted versions
                var value=new Object();
                if (y.length < 4) {y=""+(y-0+1900);}
                value["y"]=""+y;
                value["yyyy"]=y;
                value["yy"]=y.substring(2,4);
                value["M"]=M;
                value["MM"]=LZ(M);
                value["MMM"]=MONTH_NAMES[M-1];
                value["NNN"]=MONTH_NAMES[M+11];
                value["d"]=d;
                value["dd"]=LZ(d);
                value["E"]=DAY_NAMES[E+7];
                value["EE"]=DAY_NAMES[E];
                value["H"]=H;
                value["HH"]=LZ(H);
                if (H==0){value["h"]=12;}
                else if (H>12){value["h"]=H-12;}
                else {value["h"]=H;}
                value["hh"]=LZ(value["h"]);
                if (H>11){value["K"]=H-12;} else {value["K"]=H;}
                value["k"]=H+1;
                value["KK"]=LZ(value["K"]);
                value["kk"]=LZ(value["k"]);
                if (H > 11) { value["a"]="PM"; }
                else { value["a"]="AM"; }
                value["m"]=m;
                value["mm"]=LZ(m);
                value["s"]=s;
                value["ss"]=LZ(s);
                while (i_format < format.length) {
                    c=format.charAt(i_format);
                    token="";
                    while ((format.charAt(i_format)==c) && (i_format < format.length)) {
                        token += format.charAt(i_format++);
                    }
                    if (value[token] != null) { result=result + value[token]; }
                        else { result=result + token; }
                    }
                return result;
            }
        </script>
        <style>
            .calendarBody{
                font: normal 14px verdana;
            }
            .calendarBody td {
                text-align:center;
                border: 1px solid #CFCFCF;
                background-color:#FAFAFA;
                cursor:pointer;
            }
            .calendarYear{
                border: 1px solid #CFCFCF;
                width: 40px;
                padding-left: 4px;
            }
            .calendar{
                border: 1px solid #C2C2C2;
            }
            .calendarHeader{
                background-color: #D4D4D4;
            }
            .calendarSelCell{
                border: 1px solid #4F94CD ! important;
                background-color: #4F94CD ! important;
                color: #ffffff;
            }
        </style>
    </head
    <body>
        <table cellpadding="0" cellspacing="0">
            <tboby>
                <tr><td><input type="text" id="85394543545341" maxlength="16" readonly="true"></td><td><img src="calendar.gif" onmousedown="moveBody('85394543545341');showCalendar('85394543545341',event)"/><td></tr>
            </tboby>
        </table>
        <table border="0" cellpadding="0" cellspacing="0" class="calendar" id="c_calendar_85394543545341" style="position:absolute;display:none">
            <tbody>
                <tr>
                    <td>
                        <table border="0" class="calendarHeader" cellpadding="2" cellspacing="0">
                            <tbody>
                            <tr>
                                <td>
                                    <select id="c_month_85394543545341" class="calendarSelect" onchange="moveBody('85394543545341')">
                                        <option value="0">january</option>
                                        <option value="1">february</option>
                                        <option value="2">march</option>
                                        <option value="3">april</option>
                                        <option value="4">may</option>
                                        <option value="5">june</option>
                                        <option value="6">julay</option>
                                        <option value="7" selected="true">august</option>
                                        <option value="8">september</option>
                                        <option value="9">october</option>
                                        <option value="10">november</option>
                                        <option value="11">december</option>
                                    </select>    
                                </td>
                                <td><img src="back.gif" onmousedown="changeYearBack('85394543545341')" class="calendarButton"/></td>
                                <td><input type="text" value="2007" maxlength="5" id="c_year_85394543545341" class="calendarYear"/></td>
                                <td>
                                    <img  src="forward.gif" onmousedown="changeYearForward('85394543545341')" class="calendarButton"/>
                                    <input type="hidden" id="c_day_85394543545341" value="14"/>
                                </td>
                                <td><img src="apply.gif" onmousedown="changeCalendar('85394543545341','dd-MM-yyyy')"/></td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table cellpadding="0" cellspacing="1" border="0" width="100%" onmousedown="changeDay('85394543545341',event)" id="c_body_85394543545341" class="calendarBody">
                        <tbody></tbody>
                        </table>
                    </td>
                </tr>
            <tbody>
        </table>
    </body>
</html>

--------------------

SelenIT

Дата 21.8.2007, 18:24 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 1
Всего: 401

Цитата(Tony @ 20.8.2007, 15:03

)

var daysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);

Не лишнее ли это? Разве нельзя это вычислить на лету как "нулевой" день следующего м-ца? И високосные годы заодно учтутся...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Izabela

Дата 23.8.2007, 11:56 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 13.2.2007
Где: Lviv

Репутация: нет
Всего: 3

IE 7................. smile

--------------------

Tony

Дата 23.8.2007, 23:07 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Цитата(Izabela @ 23.8.2007, 11:56)

IE 7................. smile

4to IE 7? Где ИЕ 7 ? smile

Я не умею 4итать мысли. Если не работает ,то извините меня дамы и господа сижу под линух smile

, нам ещё такие блага как ИЕ 7 не доступны.

--------------------

Qwesa

Дата 7.12.2007, 16:40 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 96
Регистрация: 9.10.2007

Репутация: нет
Всего: нет

Дабы не плодить тему, спрошу тут (надеюсь автор не обидеться). Мне нужен календарик с часами в цифровом варианте, вида - верхняя линия "11:28", нижняя линия "11 сентября 2000", и все это размерами не больше ячейки 150х120. ((

Я нашел несколько цифровых календарей но они идут в одну линию, соответственно требуют большой длинны ячейку, а если изменять шрифт то практически не увидишь нечего. Было еще пару аналоговых вариантов, но опять же, великоваты они да и большинство влэшовые. Поэтому и возникла идея разнести часы и календарь на разные строчки друг над другом. Только вот я слабовато понимаю в яве, прошу у Вас помощи. Может есть у кого простенький шаблон, который можно будет переработать, или просто может кто ссылку даст на ресурс где поискать)), а может и советом подсобите?

Это сообщение отредактировал(а) Qwesa - 7.12.2007, 16:41

dimcat

Дата 13.12.2007, 10:34 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 15.5.2007

Репутация: нет
Всего: нет

Ребят, подскажите где можно взять календарик с выбором даты и её выгрузкой в три селектора: день, месяц, год. Или посоветуйте как исправить существующий календарь, который выгружает все параметры в поле input... C JS отношения напряжённые...

ksnk

Дата 13.12.2007, 11:10 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 2
Всего: 386

Менять то, что работает и к чему привыклю юзеры? Мысль в некоторых случаях - еретическая и достойна сжигания на костре... Конечно-же, патчить...патчить...патчить... ;-)

Итого. Если удалось найти в коде место, где этому самому input'у приписывется это самое значение, к примеру "1 января 2009г.", то такое значение несложно с помощью регулярных выражений разделить не несколько неравных половин и переложить в нужные контролы. Дело обойдется вставкой пары -тройки строк в текст скрипта... Нужно только знать как выглядит выдаваемаякалендарем строка. и куда ложить...

Правда, если найти такое место не удалось, то нужно искать календарь, которы более подходит для приложения, затем мрачно вставлять его в код, попутно выдирая существующий... imho, для человека, с "напряженными" отношениями с JS - задача значительно менее привлекательная...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

dimcat

Дата 13.12.2007, 11:23 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 15.5.2007

Репутация: нет
Всего: нет

Дело в том, что юзеры-то может и привыли, а вот работодателю захотелось вывернуться именно таким образом smile

Сейчас как раз и занимаюсь разложением кода на составляющие, возможно чего-то и добьюсь...

SelenIT

Дата 13.12.2007, 13:09 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 1
Всего: 401

Можно взять за основу мою игрушку smile

. А вместо алерта подставить функцию а-ля

Код


function setDateElements(dateInstance) {
     document.getElementById('year').value = dateInstance.getFullYear();
     document.getElementById('month').selectedIndex = dateInstance.getMonth();
     document.getElementById('day').value = dateInstance.getDate();
}

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

dimcat

Дата 13.12.2007, 15:54 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 15.5.2007

Репутация: нет
Всего: нет

А может подскажете что нужно подкрутить вот этой игрушке - http://belnet.dl.sourceforge.net/sourcefor...alendar-1.0.zip - чтобы получить желаемый результат?

ksnk

Дата 13.12.2007, 16:11 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 2
Всего: 386

А какой результат желательно получить? ;) там сильно навороченый календарь, которые действительно довольно легко вставляется в страничку.
Mожет, почитать документацию поможет?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

dimcat

Дата 13.12.2007, 17:09 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 15.5.2007

Репутация: нет
Всего: нет

В документации нет ничего... Результат нужен следующий.

Пример вот: http://hotelsandtours.ru/

В форме в поле "Дата тест" сносится выбранная дата. Задача сделать так, чтобы эта дата разводилась по трём селектовым полям как показано чуть ниже...

Главная проблема в моих недостаточных познаниях в JS. Тупо не знаю где исправить... Скрипт календаря достаточно большой. Если просто меняю поле input на поле select с теми же координатами (id, name), то ничего не происходит, дата в поле не попадает...

kylller

Дата 21.1.2009, 17:52 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 21.1.2009

Репутация: нет
Всего: нет

А у кого-нибудь есть скрипты календаря как в контакте, просто там можно выбирать по дням или неделям. Очень там классно сделано.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »