码迷,mamicode.com
首页 > Web开发 > 详细

js日期控件

时间:2015-09-04 16:58:10      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

<script language="JavaScript">
<!--
var months = new Array("一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var days = new Array("日", "一", "二", "三", "四", "五", "六");

today = new getToday(); 
var element_id;

function getDays(month, year)
{
 // Test for leap year when February is selected.
 if (1 == month)
  return ((0 == year % 4) && (0 != (year % 100))) ||
   (0 == year % 400) ? 29 : 28;
 else
  return daysInMonth[month];
}

function getToday()
{
 // Generate today‘s date.
 this.now = new Date();
 this.year = this.now.getFullYear() ; // Returned year XXXX
 this.month = this.now.getMonth();
 this.day = this.now.getDate();
}

 
function newCalendar()
{
 var parseYear = parseInt(document.all.year  [document.all.year.selectedIndex].text);
 
 var newCal = new Date(parseYear , document.all.month.selectedIndex, 1);
 var day = -1;
 var startDay = newCal.getDay();
 var daily = 0;

 today = new getToday(); // 1st call
 if ((today.year == newCal.getFullYear() ) &&   (today.month == newCal.getMonth()))
    day = today.day;
 // Cache the calendar table‘s tBody section, dayList.
 var tableCal = document.all.calendar.tBodies.dayList;

 var intDaysInMonth =
    getDays(newCal.getMonth(), newCal.getFullYear() );

 for (var intWeek = 0; intWeek < tableCal.rows.length;  intWeek++)
     for (var intDay = 0;
    intDay < tableCal.rows[intWeek].cells.length;
    intDay++)
  {
    var cell = tableCal.rows[intWeek].cells[intDay];

    // Start counting days.
    if ((intDay == startDay) && (0 == daily))
    daily = 1;

    // Highlight the current day.
    cell.style.color = (day == daily) ? "red" : "";
    if(day == daily)
    {
    document.all.todayday.innerText= "今天: " +  day + "/" +
     (newCal.getMonth()+1) + "/" + newCal.getFullYear() ;
    }
    // Output the day number into the cell.
    if ((daily > 0) && (daily <= intDaysInMonth))
    cell.innerText = daily++;
    else
    cell.innerText = "";
    }

}
  
function getTodayDay()
{
  document.all[element_id].value = today.day + "/" + (today.month+1) +
   "/" + today.year;
  //document.all.calendar.style.visibility="hidden";
  document.all.calendar.style.display="none";
  document.all.year.selectedIndex =100;  
  document.all.month.selectedIndex = today.month;
}

function getDate()
{
 // This code executes when the user clicks on a day
 // in the calendar.
 if ("TD" == event.srcElement.tagName)
    // Test whether day is valid.
    if ("" != event.srcElement.innerText)
    {
   var mn = document.all.month.selectedIndex+1;
   var Year = document.all.year [document.all.year.selectedIndex].text;
   document.all[element_id].value=event.srcElement.innerText+"/"+mn +"/"  +Year;
   //document.all.calendar.style.visibility="hidden";
   document.all.calendar.style.display="none";
  }
 }
 
function GetBodyOffsetX(el_name, shift)
{
 var x;
 var y;
 x = 0;
 y = 0;

 var elem = document.all[el_name];
 do
 {
  x += elem.offsetLeft;
  y += elem.offsetTop;
  if (elem.tagName == "BODY")
   break;
  elem = elem.offsetParent;
 } while  (1 > 0);

 shift[0] = x;
 shift[1] = y;
 return  x;

function SetCalendarOnElement(el_name)
{
 if (el_name=="")
 el_name = element_id;
 var shift = new Array(2);
 GetBodyOffsetX(el_name, shift);
 document.all.calendar.style.pixelLeft  = shift[0]; //  - document.all.calendar.offsetLeft;
 document.all.calendar.style.pixelTop = shift[1] + 25 ;
}
  
   
           
function ShowCalendar(elem_name)
{
  if (elem_name=="")
  elem_name = element_id;

  element_id = elem_name; // element_id is global variable
  newCalendar();
  SetCalendarOnElement(element_id);
  //document.all.calendar.style.visibility = "visible";
  document.all.calendar.style.display="inline";
}

function HideCalendar()
{
 //document.all.calendar.style.visibility="hidden";
 document.all.calendar.style.display="none";
}

function toggleCalendar(elem_name)
{
 //if (document.all.calendar.style.visibility == "hidden")
 if(document.all.calendar.style.display=="none")
  ShowCalendar(elem_name);
 else
  HideCalendar();
}
-->
</script>

<style>
.today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold}
.days {COLOR: navy; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-ALIGN: center}
.dates {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt}
</style>


<FORM name=myForm>
<INPUT type="text" id=MyDate name=MyDate size=15 onfocus="toggleCalendar(‘MyDate‘)">
</form>

<TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar
style="cursor:hand; DISPLAY: none; POSITION: absolute; Z-INDEX: 4">
  <TBODY>
  <TR>
    <TD colSpan=7 vAlign=center>
 <!-- Month combo box -->
 <SELECT id=month onchange=newCalendar()>
     <SCRIPT language=JavaScript>
  // Output months into the document.
  // Select current month.
  for (var intLoop = 0; intLoop < months.length; intLoop++)
   document.write("<OPTION " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]);
  </SCRIPT>
 </SELECT>
 月
 <!-- Year combo box -->
 <SELECT id=year onchange=newCalendar()>
        <SCRIPT language=JavaScript>
  // Output years into the document.
  // Select current year.
  for (var intLoop = 1900; intLoop < 2028; intLoop++)
   document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop);
  </SCRIPT>
 </SELECT>
 年
 </TD>
  </TR>


 
  <TR class="days">
 <!-- Generate column for each day. -->
    <SCRIPT language=JavaScript>
 // Output days.
 for (var intLoop = 0; intLoop < days.length; intLoop++)
  document.write("<TD style=‘width:25px;‘>" + days[intLoop] + "</TD>");
 </SCRIPT>
  </TR>

  <TBODY class="dates" id=dayList onclick="getDate(‘‘)" vAlign=center>
  <!-- Generate grid for individual days. -->
  <SCRIPT language=JavaScript>
 for (var intWeeks = 0; intWeeks < 6; intWeeks++)
 {
  document.write("<TR>");
  for (var intDays = 0; intDays < days.length; intDays++)
   document.write("<TD></TD>");
  document.write("</TR>");
 }
  </SCRIPT>
  </TBODY>

  <!-- Generate today day. -->
  <TBODY>
  <TR>
    <TD class="today" colSpan=5 id=todayday onclick=getTodayDay()></TD>
    <TD align=right colSpan=2><A href="javascript:HideCalendar();">
 <SPAN style="COLOR: black; FONT-SIZE: 10px"><B>关闭</B></SPAN></A></TD>
  </TR>
  </TBODY>

</TABLE>

js日期控件

标签:

原文地址:http://www.cnblogs.com/lbnnbs/p/4781862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!