`
starbhhc
  • 浏览: 657905 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

JAVASCRIPT 实现日历式日期选择

阅读更多
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=GB2312">
<TITLE>CANLENDER--JAVASCRIPT</TITLE>
<STYLE>
TD {
FONT-FAMILY: ARIAL, HELVETICA, SANS-SERIF;
FONT-SIZE: 12PX;
}
</STYLE>

</HEAD>
<BODY>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="180">
<TR><TD ID=CC>
</TD></TR></TABLE>
</BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
FUNCTION RUNNIAN(THE_YEAR)
{
IF ((THE_YEAR%400==0) || ((THE_YEAR%4==0) && (THE_YEAR%100!=0)))
  RETURN TRUE;
ELSE
  RETURN FALSE;
}
FUNCTION GETWEEKDAY(THE_YEAR,THE_MONTH)
{

VAR ALLDAY;
ALLDAY = 0;
IF (THE_YEAR>2000)
{
 
  FOR (I=2000 ;I<THE_YEAR; I++)
   IF (RUNNIAN(I))
    ALLDAY += 366;
   ELSE
    ALLDAY += 365;
  FOR (I=2; I<=THE_MONTH; I++)
  {
   SWITCH (I)
   {
    CASE 2 :
     IF (RUNNIAN(THE_YEAR))
      ALLDAY += 29;
     ELSE
      ALLDAY += 28;
     BREAK;
    CASE 3 : ALLDAY += 31; BREAK;
    CASE 4 : ALLDAY += 30; BREAK;
    CASE 5 : ALLDAY += 31; BREAK;
    CASE 6 : ALLDAY += 30; BREAK;
    CASE 7 : ALLDAY += 31; BREAK;
    CASE 8 : ALLDAY += 31; BREAK;
    CASE 9 : ALLDAY += 30; BREAK;
    CASE 10 : ALLDAY += 31; BREAK;
    CASE 11 : ALLDAY += 30; BREAK;
    CASE 12 :  ALLDAY += 31; BREAK;
   
   }
  
  }
}

RETURN (ALLDAY+6)%7;


}

FUNCTION CHOOSEDAY(THE_YEAR,THE_MONTH,THE_DAY)
{
VAR FIRSTDAY;
VAR COMPLETELY_DATE;
IF (THE_DAY!=0)
  COMPLETELY_DATE = THE_YEAR + "-" + THE_MONTH + "-" + THE_DAY;
ELSE
  COMPLETELY_DATE = "NO CHOOSE";
//SHOWDATE 只是一个为了显示而采用的东西,
//如果外部想引用这里的时间,可以通过使用 COMPLETELY_DATE引用完整日期
//也可以通过THE_YEAR,THE_MONTH,THE_DAY分别引用年,月,日
//当进行月份和年份的选择时,认为没有选择完整的日期
SHOWDATE.INNERTEXT = COMPLETELY_DATE;
FIRSTDAY = GETWEEKDAY(THE_YEAR,THE_MONTH);
SHOWCALENDER(THE_YEAR,THE_MONTH,THE_DAY,FIRSTDAY);

}

FUNCTION NEXTMONTH(THE_YEAR,THE_MONTH)
{
IF (THE_MONTH==12)
  CHOOSEDAY(THE_YEAR+1,1,0);
ELSE
  CHOOSEDAY(THE_YEAR,THE_MONTH+1,0);
}

FUNCTION PREVMONTH(THE_YEAR,THE_MONTH)
{
IF (THE_MONTH==1)
  CHOOSEDAY(THE_YEAR-1,12,0);
ELSE
  CHOOSEDAY(THE_YEAR,THE_MONTH-1,0);
}

FUNCTION PREVYEAR(THE_YEAR,THE_MONTH)
{
CHOOSEDAY(THE_YEAR-1,THE_MONTH,0);
}

FUNCTION NEXTYEAR(THE_YEAR,THE_MONTH)
{
CHOOSEDAY(THE_YEAR+1,THE_MONTH,0);
}





FUNCTION SHOWCALENDER(THE_YEAR,THE_MONTH,THE_DAY,FIRSTDAY)
{

VAR SHOWSTR;
VAR MONTH_DAY;
VAR SHOWMONTH;
VAR TODAY;
TODAY = NEW DATE();



SWITCH (THE_MONTH)
{
  CASE 1 : SHOWMONTH = "JANUARY"; MONTH_DAY = 31; BREAK;
  CASE 2 :
   SHOWMONTH = "FEBRUARY";
   IF (RUNNIAN(THE_YEAR))
    MONTH_DAY = 29;
   ELSE
    MONTH_DAY = 28;
   BREAK;
  CASE 3 : SHOWMONTH = "MARCH"; MONTH_DAY = 31; BREAK;
  CASE 4 : SHOWMONTH = "APRIL"; MONTH_DAY = 30; BREAK;
  CASE 5 : SHOWMONTH = "MAY"; MONTH_DAY = 31; BREAK;
  CASE 6 : SHOWMONTH = "JUNE"; MONTH_DAY = 30; BREAK;
  CASE 7 : SHOWMONTH = "JULY"; MONTH_DAY = 31; BREAK;
  CASE 8 : SHOWMONTH = "AUGUST"; MONTH_DAY = 31; BREAK;
  CASE 9 : SHOWMONTH = "SEPTEMBER"; MONTH_DAY = 30; BREAK;
  CASE 10 : SHOWMONTH = "OCTOBER"; MONTH_DAY = 31; BREAK;
  CASE 11 : SHOWMONTH = "NOVEMBER"; MONTH_DAY = 30; BREAK;
  CASE 12 : SHOWMONTH = "DECEMBER"; MONTH_DAY = 31; BREAK;
  
}


SHOWSTR = "";
SHOWSTR = "<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1 BORDERCOLOR=#999999 WIDTH=95% ALIGN=CENTER VALIGN=TOP>";
SHOWSTR +=  "<TR><TD WIDTH=0 STYLE=CURSOR:HAND ONCLICK=PREVYEAR("+THE_YEAR+"," + THE_MONTH + ")>&LT;&LT;</TD><TD WIDTH=0>&NBSP;" + THE_YEAR + "&NBSP;</TD><TD WIDTH=0 ONCLICK=NEXTYEAR("+THE_YEAR+","+THE_MONTH+")  STYLE=CURSOR:HAND>&GT;&GT;</TD><TD WIDTH=0 STYLE=CURSOR:HAND ONCLICK=PREVMONTH("+THE_YEAR+","+THE_MONTH+")>&LT;&LT;</TD><TD WIDTH=100 ALIGN=CENTER>" + SHOWMONTH + "</TD><TD WIDTH=0 ONCLICK=NEXTMONTH("+THE_YEAR+","+THE_MONTH+")  STYLE=CURSOR:HAND>&GT;&GT;</TD></TR>";
SHOWSTR +=  "<TR><TD ALIGN=CENTER WIDTH=100% COLSPAN=6>";
SHOWSTR +=  "<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1 BORDERCOLOR=#999999 WIDTH=100%>";
SHOWSTR += "<TR ALIGN=CENTER BGCOLOR=#999999> ";
    SHOWSTR += "<TD><STRONG><FONT COLOR=#0000CC>日</FONT></STRONG></TD>";
    SHOWSTR += "<TD><STRONG><FONT COLOR=#0000CC>一</FONT></STRONG></TD>";
    SHOWSTR += "<TD><STRONG><FONT COLOR=#0000CC>二</FONT></STRONG></TD>";
    SHOWSTR += "<TD><STRONG><FONT COLOR=#0000CC>三</FONT></STRONG></TD>";
    SHOWSTR += "<TD><STRONG><FONT COLOR=#0000CC>四</FONT></STRONG></TD>";
    SHOWSTR += "<TD><STRONG><FONT COLOR=#0000CC>五</FONT></STRONG></TD>";
    SHOWSTR += "<TD><STRONG><FONT COLOR=#0000CC>六</FONT></STRONG></TD>";
SHOWSTR += "</TR><TR>";

FOR (I=1; I<=FIRSTDAY; I++)
  SHOWSTR += "<TD ALIGN=CENTER BGCOLOR=#CCCCCC>&NBSP;</TD>";

FOR (I=1; I<=MONTH_DAY; I++)
{
  IF ((THE_YEAR==TODAY.GETYEAR()) && (THE_MONTH==TODAY.GETMONTH()+1) && (I==TODAY.GETDATE()))
   BGCOLOR = "#FFCCCC";
  ELSE
   BGCOLOR = "#CCCCCC";
 
  IF (THE_DAY==I) BGCOLOR = "#FFFFCC";
  SHOWSTR += "<TD ALIGN=CENTER BGCOLOR=" + BGCOLOR + " STYLE=CURSOR:HAND ONCLICK=CHOOSEDAY(" + THE_YEAR + "," + THE_MONTH + "," + I + ")>" + I + "</TD>";
  FIRSTDAY = (FIRSTDAY + 1)%7;
  IF ((FIRSTDAY==0) && (I!=MONTH_DAY)) SHOWSTR += "</TR><TR>";
}
IF (FIRSTDAY!=0)
{
  FOR (I=FIRSTDAY; I<7; I++)
   SHOWSTR += "<TD ALIGN=CENTER BGCOLOR=#CCCCCC>&NBSP;</TD>";
  SHOWSTR += "</TR>";
}
 
SHOWSTR += "</TR></TABLE></TD></TR></TABLE>";
CC.INNERHTML = SHOWSTR; 


}


</SCRIPT>

<SCRIPT LANGUAGE="JAVASCRIPT">

VAR THE_YEAR,THE_DAY,THE_MONTH;
VAR TODAY;
VAR FIRSTDAY;
TODAY = NEW DATE();
THE_YEAR = TODAY.GETYEAR();
THE_MONTH = TODAY.GETMONTH() + 1;
THE_DAY = TODAY.GETDATE();
FIRSTDAY = GETWEEKDAY(THE_YEAR,THE_MONTH);
SHOWCALENDER(THE_YEAR,THE_MONTH,THE_DAY,FIRSTDAY);
</SCRIPT>
<DIV ID=SHOWDATE></DIV>
</HTML>

分享到:
评论

相关推荐

    javascript实现的日期选择器

    在JavaScript实现的日期选择器中,关键知识点可能包括: 1. **事件监听**:利用`addEventListener`或`onclick`等方法响应用户的点击或滚动行为,触发相应的日期选取动作。 2. **DOM操作**:使用`document....

    利用css+javascript实现的一个日期选择器代码

    【标题】:“利用css+javascript实现的一个日期选择器代码”涉及的核心知识点主要集中在CSS样式设计和JavaScript编程上,用于创建一个交互式的日期选择组件。日期选择器是网页表单中常见的一种元素,允许用户方便地...

    JS 日历组件(功能很强) javascript 日历控件 日历选择空间 日期选择 强烈推荐

    总的来说,My97DatePicker是一个强大且灵活的JavaScript日历组件,它不仅提供了基本的日期选择功能,还具备丰富的自定义选项和良好的性能表现,是前端开发中实现日期选择功能的优秀选择。通过深入了解和熟练使用这个...

    js简洁日历-日期选择-万年历

    "js简洁日历-日期选择-万年历"项目就是一个利用JavaScript实现的轻量级日历组件,它提供了用户友好的日期选择功能,适用于各种需要日期输入的场景。 这个日历组件的亮点在于其简洁性,意味着它可能具有高效的代码...

    javascript小巧日历插件

    JavaScript小巧日历插件是一种常见的前端开发工具,用于在网页上添加交互式日期选择功能。这类插件通常轻量级,易于集成,并提供多种自定义选项以满足不同设计需求。以下将详细介绍JavaScript日历插件的基本原理、...

    JS日历插件日期选择器

    JavaScript(简称JS)日历插件是一种常用的前端交互组件,用于在网页上提供直观的日期选择功能。在网页设计和开发中,日期选择器通常用于处理与日期相关的表单输入,如预订系统、事件安排或者在线调查等。下面将详细...

    javascript_日历源码

    "javascript_日历源码"这个主题聚焦于JavaScript实现的日历功能,这在很多网站和应用中都十分常见,比如用于事件管理、日期选择等场景。 在JavaScript中,创建日历功能通常涉及到以下几个关键知识点: 1. **DOM...

    时间日期JavaScript 选择时间日期

    JavaScript是Web开发中不可或缺...以上就是JavaScript处理日期和时间的一些核心知识点,这些在日常Web开发中经常被用到,尤其在创建交互式日期选择器时。通过学习和理解这些概念,你可以更好地构建功能丰富的网页应用。

    最精致的日历式日期输入控件

    在IT行业中,日历式日期输入控件是一种常见的用户界面元素,它允许用户通过日历视图选择日期,而非仅依赖文本输入。这种控件在许多应用和网站中都有广泛的应用,例如在线预订系统、日程管理软件以及各种表单填写场景...

    javascript日期选择器,很强大

    本主题主要探讨JavaScript日期选择器的实现原理、常见功能以及如何在项目中应用。 JavaScript Date对象是处理日期和时间的基础,它提供了创建、比较、格式化和操作日期的方法。例如,可以使用`new Date()`创建一个...

    javascript日历选择器

    JavaScript日历选择器是网页开发中的重要组件,通过JavaScript实现的交互式日历能够提高用户输入日期的便捷性。无论是自定义开发还是利用现有的库和框架,开发者都可以根据项目需求创建符合预期的日历选择器。理解其...

    javascript实现的动态日历

    在本案例中,"javascript实现的动态日历"是一个利用JavaScript编写的交互式日历组件,它可以无缝集成到基于JSP(JavaServer Pages)或ASP(Active Server Pages)的网页中,为用户提供一个直观、易用的日历功能。...

    JavaScript日历控件 六种日历

    日历控件通常通过JavaScript实现,因为这可以避免服务器端的额外负担,并允许用户实时操作。 2. **日历样式**: - 提供的6个文件(日历1.html到日历5.html)可能展示了不同的日历展示方式,包括但不限于经典的...

    javascript实现的日历

    JavaScript 实现的日历是一种常见的网页交互元素,常用于事件安排、日期选择等场景。这个日历功能的实现可能包括以下几个核心知识点: 1. **DOM 操作**:在JavaScript中,你需要通过DOM(Document Object Model)来...

    javascript日历

    JavaScript日历是一个在网页上实现交互式日期选择功能的重要组件,尤其在开发各种Web应用程序时不可或缺。这个"javascript日历"描述的是一个响应性极高的日历解决方案,意味着它能够自适应不同设备和屏幕尺寸,提供...

    JS日历控件(可以选择多个日期)

    通过查看和学习这些代码,你可以更深入地了解如何实现多日期选择的日历控件。 总结来说,创建一个JS日历控件并支持选择多个日期,需要对JavaScript的DOM操作、事件处理、日期对象有深入的理解,以及一定的前端设计...

    JavaScript弹出式日历

    JavaScript弹出式日历是一种常见的前端交互功能,它允许用户在网页上方便地选择...通过理解和掌握这些JavaScript弹出式日历的关键知识点,开发者可以构建出高效、用户友好的日期选择功能,提升网站或应用的用户体验。

Global site tag (gtag.js) - Google Analytics