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

JAVASCRIPT 实现日历式日期选择

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 gb2312转utf-8
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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弹出式日历的关键知识点，开发者可以构建出高效、用户友好的日期选择功能，提升网站或应用的用户体验。

Magicbox
Global site tag (gtag.js) - Google Analytics