日期控件第二版 v1.02

最新推荐文章于 2021-08-27 12:47:23 发布

NicholasMeng

最新推荐文章于 2021-08-27 12:47:23 发布

阅读量833

点赞数

分类专栏： JavaScript 文章标签： calendar function border date button input

本文链接：https://blog.csdn.net/NicholasMeng/article/details/433003

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本来打算昨天上传的，可是临发布的时候发现了一个隐藏的错误。只好推迟到今天。

v1.02赠加了两个下拉框选择年和月,提高了用户选择日期的速度.

还和v1.01一样下载下面两个文件。

Calendar_v1.02.txt 把文件名改为 Calendar_v1.02.js

CalendarDemo_v1.02.txt 把文件名改为 CalendarDemo_v1.02.htm

用 IE 浏览器打开,点文本框后面的按钮就可以看到效果l.

可惜还是不能在 FireFox 下很好的运行.

/*
Auther: Nicholas.Meng
Date: 2005-07-17
Version: 1.02
****************************************************************************
v1.02 提升：
        年和月的选择在按钮的前提下，提供下拉框选择，提高选择日期的速度。
        修改了得到每个月天数的方法 getMonthDaysNum()，原来那个原理未知，防止出错使用自己的方法。
    ****************************************************************************
目的:
        为每个需要日期控件的输入框加一个它自己的日期控件,即一个<Div></Div>.
        刚创建的时候只赋上id,class等值,并且把它的位置固定在输入框的下方。这是日期控件只是一个空白层。
        显示的时候只向其中填内容而不需要再调整日期控件的位置。
        有效的避免了当浏览器窗口大小改变之后，使用getBoundingClientRect()只能得到控件相对位置,导致的日期控件错位的问题.
        并且就算用户没有点击按钮显示出日期控件.也只是增加了一个隐藏的空白层而已.
    ****************************************************************************
    如何调用:
        首先，使用日期控件的文本框一定要赋上id 和 name 并且在网页中均不可重复。
            主要方法：showCalendar( 文本框，日期控件的id );
            例如：
            <input type="text" id="txtDateFrom" name="txtDateFrom">
            <input type='Button' name="btnSchDaFr" οnclick="showCalendar( txtDateFrom , 'dcDateFrom')">

        之后，在网页代码的最末端加上如下代码：
            <script>
              createNewDiv( document.getElementById( 'txtDateFrom') , 'dcDateFrom' );
            </script>
   ****************************************************************************
   Tips:
        1.当需要多个日期控件时,所有的日期控件的 id 在网页中均不能重复.
        2.所有的日期控件DIV 都属于 Calendar class.
            可以在网页的<Style></Style>中做出字体等设置,例如:
            <style>
              .Calendar
              {
               font-size:12px;
               font-family:"Arial","sans-serif";
              }
            </style>
       3.控件上用到的颜色都作为变量放在前面,可以根据自己需要修改.
*/

var iCalendarHeight = 150;
var iCalendarWidth = 250;
var iBonder = 5;
var iMinYear = 1970;
var iMaxYear = 2030;
var iDaysPerPage = 42;

var sYearMthBgColor = '#395592';
var sYearMthFontColor = '#FFFFFF'
var sTabDateBgColor = '#CCCCCC';
var sTabTrWeekBgColor = '#F5F5F5';
var sTabTrDateBgColor = '#FFFFFF';
var sTabTdMouseOverColor= '#E1E1E1';
var sTabTdMouseOutColor = '#FFFFFF';
var sSelectedBgColor = '#420042';
var sNotSelectedFontColor = '#000000';
var sSundayFontColor = '#FF0000';
var sSaturdayFontColor = '#FF0000';
var sTabTdPrevAndNextFontColor = '#BBBBBB';
var sTabTodayBgColor = '#F5F5F5';
var sTabTodayLableFontColor = '#FF0000';

var isHid = true;
var arrDisplayedCalendars = new Array();

function createNewDiv( inputBox , sCalendarID )
{
document.writeln( '<Div id='+ sCalendarID +' name= '+ sCalendarID +' class="Calendar" Author=Nick_For_His_Wife scrolling="no" frameborder=0 style="border:0px solid #EEEEEE ;position: absolute; width: '+iCalendarWidth+'; height: '+iCalendarHeight+'; z-index: 0 ; filter :/'progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#AAAAAA,strength='+iBonder+')/' ; display: none"></Div>' );
positionDiv( inputBox , sCalendarID ) ;
}

function positionDiv( inputBox , sCalendarID)
{
    var FrLeft,FrTop,WinWidth,WinHeight;
    Winw=document.body.offsetWidth;
    Winh=document.body.offsetHeight;
    FrLeft = inputBox.getBoundingClientRect().left-2;
    FrTop = inputBox.getBoundingClientRect().top + inputBox.clientHeight;
    calendar = document.getElementById( sCalendarID );
    calendar.style.left = FrLeft;
    calendar.style.top = FrTop;
}

function getToday()
{
return new Date();
}

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

function getValidDate( sDate )
{
arrDate = sDate.split( "-" );
if ( arrDate.length != 3 ) // if it is not valid format return today
{
return new Date();
}
var iYear = arrDate[0]
var iMth = arrDate[1];
var iDay = arrDate[2];
return getFitDate( iYear , (iMth-1) , iDay);
}

function showCalendar( inputBox , sCalendarID )
{
closeAllDisplayedCalendar();
addCalenderDisplay( sCalendarID );
var sValue = inputBox.value;
calendar = document.getElementById( sCalendarID );
dCurrDate = getValidDate( sValue );
displayCalendarFrame( calendar , inputBox , dCurrDate );
isHid = false;
}

function outputValue( inputBox , iYear , iMth , iDay )
{
dCurrDate = new Date( iYear , iMth , iDay );
inputBox.value = getDateFormat( dCurrDate );
}

function closeCalendar( calendar )
{
calendar.style.display="none";
removeCalendarDisplay( calendar.id );
}

function showSelectMth( inputBox , calendar , iYear , selectMth ,iDay )
{
var iSelectMth = selectMth.options[ selectMth.selectedIndex ].value ;
dSelect = getFitDate( iYear , ( iSelectMth - 1) , iDay );
displayCalendarFrame( calendar , inputBox , dSelect );
isHid = true;
}

function showSelectYear( inputBox , calendar , selectYear , iMth ,iDay )
{
var iSelectYear = selectYear.options[ selectYear.selectedIndex ].value ;
dSelect = getFitDate( iSelectYear , iMth , iDay );
displayCalendarFrame( calendar , inputBox , dSelect );
isHid = true;
}

NicholasMeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
日期控件第二版 v1.02

本来打算昨天上传的，可是临发布的时候发现了一个隐藏的错误。只好推迟到今天。v1.02赠加了两个下拉框选择年和月,提高了用户选择日期的速度.还和v1.01一样下载下面两个文件。Calendar_v1.02.txt 把文件名改为 Calendar_v1.02.jsCalendarDemo_v1.02.txt 把文件名改为 CalendarDemo_v1.02.htm 用 IE 浏览器打开,点文本框后面
复制链接

扫一扫

专栏目录