Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменить цвет текущей даты в календаре (https://javascript.ru/forum/misc/44997-izmenit-cvet-tekushhejj-daty-v-kalendare.html)

maximatorrus 10.02.2014 12:21
Изменить цвет текущей даты в календаре
 
Добрый день!
Изучаю по-тихонечку скрипт, вот прикрутил календарик, но гораздо красивее, если текущая дата выделена будет другим цветом, скажите ведь?!

Не могу продумать условие (если today то фонт колор = ""), куда это приписывать, будьте добры, подскажите?

Вот код календаря
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<TITLE>Календарь</TITLE>
<STYLE TYPE="text/css">
 BODY 
   {
   
   }
</STYLE>
<SCRIPT language="JavaScript">
 function setToday1()
  {
   document.getElementById('dataKeeper').style.color = 'blue'

  }

  function setToday()
  {
  var now   = new Date();
  var month = now.getMonth();
  var year1  = now.getYear();
  var day  = now.getDay();
  var year  = now.getYear() + 1900;
  var day  = now.getDate();
  document.Control.month.selectedIndex = month;
  document.Control.year.selectedIndex = year1 ;
  formCalendar(month, year);
  
  }

function setPrev()
  {
  var month = document.Control.month.selectedIndex - 1;
  document.Control.month.selectedIndex = month;
  var year = document.Control.year.selectedIndex + 1900;
  formCalendar(month, year);
  }
  
function setNext()
  {
  var month = document.Control.month.selectedIndex + 1;
  document.Control.month.selectedIndex = month;
  var year = document.Control.year.selectedIndex + 1900;
  formCalendar(month, year);
  }

function selectDate() 
  {
  var year  = document.Control.year.selectedIndex + 1900;
  var month = document.Control.month.selectedIndex;
  formCalendar(month, year);
  }

function getDaysInMonth(_month,_year)
  {
  var days;
  var daysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
  days = daysInMonth[_month];
  if (_month==2 && isLeapYear(_year)) days = 29;
  return days;
  }

function isLeapYear (Year) 
  {
  if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0))
    return true;
  else return false;
  }

function formCalendar(month, year)
  {
  month = parseInt(month);
  year = parseInt(year);
  D = new Date(year,month,0);
  var temp;
  temp = "<TABLE ID='calTab' cellspacing=0 cellpadding=0 border=0 style='font-family: serif;'>";
  temp += "<TBODY ID='calBody' align='center'>";
  temp += "<TR><TD width=25 height=25>Пн<TD width=25>Вт<TD width=25>Ср<TD width=25>";
  temp += "Чт<TD width=25>Пт<TD width=25>Сб<TD width=25>Вс</TR><TR>";
  var n = D.getDay();
  for (i=0; i<n; i++)
    {
    temp += "<TD>&nbsp</TD>";
}
  var num = getDaysInMonth(month,year);
  for (i=1; i<=num; i++)
    {
     
     
    if ((i+n)%7 || !i) temp += "<TD height=20>" + i + "</TD>";
	   else temp += "<TD>" + i + "</TD></TR><TR>";
}
  D = new Date(year,month,num-1);
  num = D.getDay();
  
  for (i=num; i<6; i++)
    { 
    temp += "<TD>&nbsp</TD>";
}
  temp += "</TR></TBODY></TABLE>";
  document.all["calTab"].outerHTML = temp;
  }
</SCRIPT>
</HEAD>
<BODY onLoad="setToday()">
  <CENTER>
  <H2 id="sec">Календарь</H2>
  <FORM name="Control">
    <SELECT name="month" onChange="selectDate()">
      <OPTION>Январь</OPTION>
	<OPTION>Февраль</OPTION>
      <OPTION><h2>Март</h2></OPTION>
	<OPTION>Апрель</OPTION>
      <OPTION>Май</OPTION>
	<OPTION>Июнь</OPTION>
      <OPTION>Июль</OPTION>
	<OPTION>Август</OPTION>
      <OPTION>Сентябрь</OPTION>
	<OPTION>Октябрь</OPTION>
      <OPTION>Ноябрь</OPTION>
	<OPTION>Декабрь</OPTION>
    </SELECT>
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <SELECT name="year" onChange="selectDate()">
      <SCRIPT language=JavaScript>   
for (var i=1900; i<2900; i++) document.write("<OPTION>"+i+"</OPTION>");
	  </SCRIPT>
    </SELECT>
  </FORM>
  <FORM name="Calend">
     <TABLE ID="calTab" cellspacing=0 cellpadding=0 border=1 style="font-family: serif;">
       <TBODY ID="calBody"></TBODY>
     </TABLE>
  </FORM>
  <FORM name="Buttons">
    <INPUT type=button name="prev" value="  <<  " onClick="setPrev()">
    <INPUT type=button name="today"  value="Сегодня"   
onClick="setToday1()">
    <INPUT type=button name="next" value="  >>  " onClick="setNext()">
  </FORM>
  </CENTER>

</BODY>
</HTML>

рони 10.02.2014 12:45
maximatorrus,
очень старый код !!!
:write: 
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8">
<TITLE>Календарь</TITLE>
<STYLE TYPE="text/css">
 .blue
   {
      color: rgb(0, 0, 255);
      border: rgb(0, 0, 255) 2px  solid;
   }
</STYLE>
<SCRIPT language="JavaScript">

  function setToday()
  {
  var now   = new Date();
  var month = now.getMonth();
  var year1  = now.getYear();
  var day  = now.getDay();
  var year  = now.getYear() + 1900;
  var day  = now.getDate();
  document.Control.month.selectedIndex = month;
  document.Control.year.selectedIndex = year1 ;
  formCalendar(month, year, day);

  }

function setPrev()
  {
  var month = document.Control.month.selectedIndex - 1;
  document.Control.month.selectedIndex = month;
  var year = document.Control.year.selectedIndex + 1900;
  formCalendar(month, year);
  }

function setNext()
  {
  var month = document.Control.month.selectedIndex + 1;
  document.Control.month.selectedIndex = month;
  var year = document.Control.year.selectedIndex + 1900;
  formCalendar(month, year);
  }

function selectDate()
  {
  var year  = document.Control.year.selectedIndex + 1900;
  var month = document.Control.month.selectedIndex;
  formCalendar(month, year);
  }

function getDaysInMonth(_month,_year)
  {
  var days;
  var daysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
  days = daysInMonth[_month];
  if (_month==2 && isLeapYear(_year)) days = 29;
  return days;
  }

function isLeapYear (Year)
  {
  if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0))
    return true;
  else return false;
  }

function formCalendar(month, year, now)
  {
  month = parseInt(month);
  year = parseInt(year);
  D = new Date(year,month,0);
  var temp;
  temp = "<TABLE ID='calTab' cellspacing=0 cellpadding=0 border=0 style='font-family: serif;'>";
  temp += "<TBODY ID='calBody' align='center'>";
  temp += "<TR><TD width=25 height=25>Пн<TD width=25>Вт<TD width=25>Ср<TD width=25>";
  temp += "Чт<TD width=25>Пт<TD width=25>Сб<TD width=25>Вс</TR><TR>";
  var n = D.getDay();
  for (i=0; i<n; i++)
    {
    temp += "<TD>&nbsp</TD>";
}
  var num = getDaysInMonth(month,year);
  for (i=1; i<=num; i++)
    {
    var cls = i == now ? 'blue' : ''

    if ((i+n)%7 || !i) temp += "<TD height=20 class ='"+cls+"'>" + i + "</TD>";
	   else temp += "<TD class ='"+cls+"'>" + i + "</TD></TR><TR>";
}
  D = new Date(year,month,num-1);
  num = D.getDay();

  for (i=num; i<6; i++)
    {
    temp += "<TD>&nbsp</TD>";
}
  temp += "</TR></TBODY></TABLE>";
  document.all["calTab"].outerHTML = temp;
  }
</SCRIPT>
</HEAD>
<BODY onLoad="setToday()">
  <CENTER>
  <H2 id="sec">Календарь</H2>
  <FORM name="Control">
    <SELECT name="month" onChange="selectDate()">
      <OPTION>Январь</OPTION>
	<OPTION>Февраль</OPTION>
      <OPTION><h2>Март</h2></OPTION>
	<OPTION>Апрель</OPTION>
      <OPTION>Май</OPTION>
	<OPTION>Июнь</OPTION>
      <OPTION>Июль</OPTION>
	<OPTION>Август</OPTION>
      <OPTION>Сентябрь</OPTION>
	<OPTION>Октябрь</OPTION>
      <OPTION>Ноябрь</OPTION>
	<OPTION>Декабрь</OPTION>
    </SELECT>
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <SELECT name="year" onChange="selectDate()">
      <SCRIPT language=JavaScript>
for (var i=1900; i<2900; i++) document.write("<OPTION>"+i+"</OPTION>");
	  </SCRIPT>
    </SELECT>
  </FORM>
  <FORM name="Calend">
     <TABLE ID="calTab" cellspacing=0 cellpadding=0 border=1 style="font-family: serif;">
       <TBODY ID="calBody"></TBODY>
     </TABLE>
  </FORM>
  <FORM name="Buttons">
    <INPUT type=button name="prev" value="  <<  " onClick="setPrev()">
    <INPUT type=button name="today"  value="Сегодня"
onClick="setToday()">
    <INPUT type=button name="next" value="  >>  " onClick="setNext()">
  </FORM>
  </CENTER>

</BODY>
</HTML>

maximatorrus 10.02.2014 13:31
Спасибо огромное!!!!


Часовой пояс GMT +3, время: 16:05.