Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> закрасить ячейку с текущей датой 
:(
    Опции темы
blackbanny
Дата 21.5.2013, 18:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Доброго времени суток!
в JS я не силен, понадобилось сделать календарик. Нашел скрипт, но не знаю, как там закрасить ячейку с текущей датой.
Скрипт:
Код

<html>
<!-- Creation date: 11/26/2004 -->
<head>
<title></title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="SNOOPY">
<meta name="Generator" content="AceHTML 4 Pro">
<style>
table.calendar {border: none; width: 145px}
tr.calendar {cursor: default; font: 11px; font-family: arial; text-align: center; height: 11px}
th.calendar {font: 11px; font-family: arial; text-align: center; height: 20px; border: 1px solid gray; height: 16px; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#EAEAEA', endColorStr='#BBBBBB', gradientType='0')}
td.calendar {border: 1px dotted silver; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#DFDFDF', gradientType='0')}
td.calendar_today {border: 1px dotted silver; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FFCC00', gradientType='0')}
table.calendar_active {filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#3399FF', gradientType='0')}

table.calendar_button_0_1 {font: 11px; font-family: arial; text-align: center; border: 1px solid gray; height: 16px; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#3399FF', gradientType='0')}
table.calendar_button_0_2 {font: 11px; font-family: arial; text-align: center; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#3399FF', gradientType='0'); border-top: 1px solid gray; border-bottom: 1px solid gray}
table.calendar_button_1_2 {font: 11px; font-family: arial; text-align: center; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FFCC00', gradientType='0'); border-top: 1px solid gray; border-bottom: 1px solid gray}
table.calendar_button_1_1 {font: 11px; font-family: arial; text-align: center; border: 1px solid gray; height: 16px; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FFCC00', gradientType='0')}
</style>
<script>
//var args = window.dialogArguments;
var WeekTitles=new Array('S','M','T','W','T','F','S')
function showallweektitles(){
    var i, answer="  <tr>\n"
    for(i=0;i<WeekTitles.length;i++) answer+="    <th CLASS=\"calendar\">"+WeekTitles[i]+"</th>\n"
    answer+="  </tr>\n"
    return answer
}
function calendar_show(m, d, y){
    var sdate= new Date(m+'/1/'+y);
    var mdate= new Date(m+'/'+d+'/'+y);
    var todaydate= new Date();
    var days=dayonmonth(m,y)
    var iday=0, day, answer=''
    answer+='<table border=0 CLASS="calendar">'
    answer+='  <tr CLASS="calendar">'
    answer+='    <th CLASS="calendar" colspan=7>'
    answer+='        <table width="100%" border=0 cellpadding=0 cellspacing=0 height="100%">'
    answer+='            <tr CLASS="calendar">'
    answer+='             <td align="left"><b>Calendar</b></td>'
    answer+='             <td align="right">'+m+'/'+d+'/'+y+'</td>'
    answer+='            </tr>'
    answer+='        </table>'
    answer+='    </th>'
    answer+='  </tr>'
    answer+='  <tr CLASS="calendar">'
    answer+='    <th colspan=7>'
    answer+='<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">'
    answer+='  <tr CLASS="calendar">'
    answer+='    <td width="25%"><table onClick="calendar_move(\'-\',\'y\','+m+','+d+','+y+')" CLASS="calendar_button_0_1" onMouseOver="this.className=\'calendar_button_1_1\'" onMouseOut="this.className=\'calendar_button_0_1\'" border=0 cellpadding=0 cellspacing=0 width="100%" height="100%"><tr CLASS="calendar"><td><<</td></tr></table></td>'
    answer+='    <td width="25%"><table onClick="calendar_move(\'-\',\'m\','+m+','+d+','+y+')" CLASS="calendar_button_0_2" onMouseOver="this.className=\'calendar_button_1_2\'" onMouseOut="this.className=\'calendar_button_0_2\'" border=0 cellpadding=0 cellspacing=0 width="100%" height="100%"><tr CLASS="calendar"><td>&nbsp;&nbsp;&nbsp;&nbsp;<</td></tr></table></td>'
    answer+='    <td width="25%"><table onClick="calendar_move(\'+\',\'m\','+m+','+d+','+y+')" CLASS="calendar_button_0_2" onMouseOver="this.className=\'calendar_button_1_2\'" onMouseOut="this.className=\'calendar_button_0_2\'" border=0 cellpadding=0 cellspacing=0 width="100%" height="100%"><tr CLASS="calendar"><td>&nbsp;&nbsp;></td></tr></table></td>'
    answer+='    <td width="25%"><table onClick="calendar_move(\'+\',\'y\','+m+','+d+','+y+')" CLASS="calendar_button_0_1" onMouseOver="this.className=\'calendar_button_1_1\'" onMouseOut="this.className=\'calendar_button_0_1\'" border=0 cellpadding=0 cellspacing=0 width="100%" height="100%"><tr CLASS="calendar"><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>></td></tr></table></td>'
    answer+='  </tr>'
    answer+='</table>'
    answer+='    </th>'
    answer+='  </tr>'
    answer+='  <tr>'
    answer+=showallweektitles()
    for(day=0;day<sdate.getDay();day++){
        iday++
        answer+="    <td></td>"
    }
    for(day=1;day<=days;day++){
        iday++
        if((todaydate.getMonth())==m && todaydate.getDate()==day && todaydate.getFullYear()==y)
            answer+="    <td onClick=\"window.returnValue='"+m+"/"+day+"/"+y+"';window.close()\" CLASS=\"calendar_today\"><table onMouseOver=\"this.className='calendar_active'\" onMouseOut=\"this.className=''\" border=0 cellpadding=0 cellspacing=0 width=\"100%\" height=\"100%\"><tr CLASS=\"calendar\"><td>"+day+"</td></tr></table></td>"
        else
            answer+="    <td onClick=\"window.returnValue='"+m+"/"+day+"/"+y+"';window.close()\" CLASS=\"calendar\"><table onMouseOver=\"this.className='calendar_active'\" onMouseOut=\"this.className=''\" border=0 cellpadding=0 cellspacing=0 width=\"100%\" height=\"100%\"><tr CLASS=\"calendar\"><td>"+day+"</td></tr></table></td>"
        if(iday==7){
            answer+="</tr><tr>"
            iday=0
        }
    }
    answer+="  </tr>"
    answer+='</table>'
    //self.calendar.innerHTML=answer
    document.all.calendar.innerHTML=answer
}
function dayonmonth(m, y){ // Функция, для определения количества дней в месяце
    var answer
    if(m!=2){ // Если не "Февраль"
        var date1=new Date(m+'/31/'+y)
        var mm=(m<12)?(m+1):1;
        var yy=(m<12)?y:(y+1);
        var date2=new Date(mm+'/1/'+yy)
        answer=(date1.getDay()==date2.getDay())?'30':'31';
    }else{
        var date1=new Date(m+'/29/'+y)
        var mm=(m<12)?(m+1):1;
        var yy=(m<12)?y:(y+1);
        var date2=new Date(mm+'/1/'+yy)
        answer=(date1.getDay()==date2.getDay())?'28':'29';
    }
    return answer
}
function calendar_move(to, index, m, d, y){
    switch(to){
        case('-'):
            switch(index){
                case('m'):
                    if(m>1){
                        m--
                    }else{
                        m=1
                        y--
                    }
                    break
                case('d'):
                    var mm=(m>1)?--m:1
                    var yy=(m>1)?y:--y
                    var days=dayonmonth(mm, yy)
                    if(d>1){
                        d--
                    }else{
                        d=days
                        m=mm
                        y=yy
                    }
                    break
                case('y'):
                    y--
                    break
            }
            break
        case('+'):
            switch(index){
                case('m'):
                    if(m<12){
                        m++
                    }else{
                        m=1
                        y++
                    }
                    break
                case('d'):
                    var mm=(m<12)?++m:1
                    var yy=(m<12)?y:++y
                    var days=dayonmonth(m, y)
                    if(d<days){
                        d++
                    }else{
                        d=1
                        m=mm
                        y=yy
                    }
                    break
                case('y'):
                    y++
                    break
                }
            break
    }
    calendar_show(m, d, y)
}
</script>
</head>
<body>
<div id="calendar"></div>
<script>
var date = new Date();
calendar_show(date.getMonth() + 1, date.getDate(), date.getFullYear());
</script>
</body>
</html>







вроде здесь надо:
Код

if((todaydate.getMonth())==m && todaydate.getDate()==day && todaydate.getFullYear()==y)
            answer+="    <td onClick=\"window.returnValue='"+m+"/"+day+"/"+y+"';window.close()\" CLASS=\"calendar_today\"><table onMouseOver=\"this.className='calendar_active'\" onMouseOut=\"this.className=''\" border=0 cellpadding=0 cellspacing=0 width=\"100%\" height=\"100%\"><tr CLASS=\"calendar\"><td>"+day+"</td></tr></table></td>"



делал 
Код

<td backgroung=\"red\">"+day+"</td>



но ничего не меняет... :(




PM MAIL   Вверх
Amphiluke
Дата 21.5.2013, 18:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

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



Цитата(blackbanny @  21.5.2013,  22:28 Найти цитируемый пост)
делал
Код

<td backgroung=\"red\">"+day+"</td>

Было бы странно, если бы это сработало (во-первых, такого атрибута нет, во-вторых, неправильно написано слово background).

Код

<td style=\"background:red;\">"+day+"</td>


Добавлено через 2 минуты и 51 секунду
Чем, кстати, не устроил jQuery UI Datepicker?
PM   Вверх
blackbanny
Дата 21.5.2013, 19:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Цитата(Amphiluke @ 21.5.2013,  18:50)
Цитата(blackbanny @  21.5.2013,  22:28 Найти цитируемый пост)
делал
Код

<td backgroung=\"red\">"+day+"</td>

Было бы странно, если бы это сработало (во-первых, такого атрибута нет, во-вторых, неправильно написано слово background).

Код

<td style=\"background:red;\">"+day+"</td>


Добавлено @ 18:53
Чем, кстати, не устроил jQuery UI Datepicker?

спасибо) на него просто не наткнулся, но может сейчас попробую)

Добавлено через 4 минуты и 19 секунд
Цитата(Amphiluke @  21.5.2013,  18:50 Найти цитируемый пост)
Чем, кстати, не устроил jQuery UI Datepicker? 

а подскажите, как его вместо моего встроить, чтобы он был не активны(не выбиралась бы дата, как в примере), а только текущая дата была закрашена?
PM MAIL   Вверх
Amphiluke
Дата 21.5.2013, 20:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

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



Можно при инициализации установить значение true для опции disabled. Тогда будет неактивный календарь
Код

<div id="datepicker"></div>

Код

$("#datepicker").datepicker({disabled: true});


Это сообщение отредактировал(а) Amphiluke - 21.5.2013, 20:03
PM   Вверх
blackbanny
Дата 21.5.2013, 20:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Цитата(Amphiluke @ 21.5.2013,  20:02)
Можно при инициализации установить значение true для опции disabled. Тогда будет неактивный календарь
Код

<div id="datepicker"></div>

Код

$("#datepicker").datepicker({disabled: true});

а подключать только
Код

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

PM MAIL   Вверх
Amphiluke
Дата 21.5.2013, 20:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

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



Нет, не только jQuery. Там же пример с полным исходным кодом есть.
Цитата(http://jqueryui.com/datepicker/)

Код

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


PM   Вверх
blackbanny
Дата 21.5.2013, 21:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Цитата(Amphiluke @ 21.5.2013,  20:50)
Нет, не только jQuery. Там же пример с полным исходным кодом есть.
Цитата(http://jqueryui.com/datepicker/)

Код

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


спасибо) попытался подключить, но он не отображается, вот страница на которой делаю:
http://regexinfo.ru/
календарь должен быть справа, над главой района

PM MAIL   Вверх
Amphiluke
Дата 21.5.2013, 21:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

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



Не работает потому, что вы вызываете инициализацию виджета еще до того как будет создан целевой контейнер <div id="datepicker"></div>
Выполняйте инициализацию в самом низу, перед закрывающим </body>, либо же заверните код инизиализации в .ready()

Код

$(document).ready(function () {
    $("#datepicker").datepicker({disabled: true});
});

PM   Вверх
blackbanny
Дата 22.5.2013, 07:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Цитата(Amphiluke @ 21.5.2013,  21:30)
Не работает потому, что вы вызываете инициализацию виджета еще до того как будет создан целевой контейнер <div id="datepicker"></div>
Выполняйте инициализацию в самом низу, перед закрывающим </body>, либо же заверните код инизиализации в .ready()

Код

$(document).ready(function () {
    $("#datepicker").datepicker({disabled: true});
});

спасибо) 
я вот пишу 
Код

<div style=\"width:150px;\" id="datepicker"></div>

а размер не меняется :(

PM MAIL   Вверх
blackbanny
Дата 22.5.2013, 12:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



UP
PM MAIL   Вверх
Amphiluke
Дата 22.5.2013, 14:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

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



Цитата(blackbanny @  22.5.2013,  11:13 Найти цитируемый пост)
размер не меняется :(

Такие вещи делаются при помощи CSS, перекрывая своими стилями стандартные стили виджета. Вот здесь в стандартных стилях задается ширина календарика:
Цитата(http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css)

Код

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
}


Пожалуйста — создавайте свою CSS, перекрывайте (ширину; возможно, еще размер шрифта придется).
PM   Вверх
blackbanny
Дата 22.5.2013, 16:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



спасибо) а можешь по этой теме помочь?
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0626 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.