日期控件

国产的my97日期控件 http://www.my97.net/dp/index.asp 

使用引入js即可

<script language="javascript" type="text/javascript" src="datepicker/wdatepicker.js"></script>  

选择第一个日期的时候,第二个日期选择框自动弹出

日期从: 至 

注意: 下面第一个控件代码的写法

<input type="text" class="wdate" id="d4321" onfocus="wdatepicker({maxdate:'#f{$dp.$d(\'d4322\',{d:-1});}'})"/>  

<input type="text" class="wdate" id="d4322" onfocus="wdatepicker({mindate:'#f{$dp.$d(\'d4321\',{d:1});}'})"/>  

使用 $dp.$d 函数 可以将日期框中的值,加上定义的日期差量:

两个参数: id={字符类型}需要处理的文本框的id值 , obj={对象类型}日期差量 

日期差量用法: 

属性y,m,d,h,m,s分别代表年月日时分秒

如 

为空时,表示直接取值,不做差量(示例4-3-1中的参数就是空的)

{m:5,d:7} 表示 五个月零7天

{y:1,d:-3} 表示 1年少3天

{d:1,h:1} 表示一天多1小时

<input type="text" id="readable_date" class="wdate" value="2013-01-15" onfocus="wdatepicker({onpicking:changefun})"/>  

function changefun(dp){  

    if(dp.cal.getdatestr() !=dp.cal.getnewdatestr()){  

        initquota();  

    }  

}  

该日历控件乱码解决必须加入charset="utf8"来转码，才能功能解决乱码 如：

<script src="src/js/lang/jp.js" charset="utf8"></script>  

<script src="src/js/lang/cn.js" charset="utf8"></script>  

在项目中使用的时候，需要用到年/月/日/小时/分钟,，但是一直没有办法正确初始化，比如当前时间是14：30， 但是日历是按世界时间显示，也就是说显示成了6：30 。 (要正确设置电脑的时区如：gmt+8：00 beijing)

解决方法是增加onchange事件，如下：

<input id="calendar-inputfield" /><button id="calendar-trigger">...</button>  

<script>  

calendar.setup({  

    trigger    : "calendar-trigger",  

    inputfield : "calendar-inputfield",  

    dateformat: "%y-%m-%d",    

    ontimechange : updatefields , //外定义方法  

    onchange : function(){  

         this.sethours(new date().gethours());  

         this.setminutes(new date().getminutes());  

    onselect: function() { this.hide() },  

    showtime: false  

});  

function updatefields (cal) {  

    var date = cal.selection.get();  

    if (date) {  

        date = calendar.inttodate(date);  

        document.getelementbyid("f_date").value = calendar.printdate(date, "%y-%m-%d"+" "+cal.gethours()+"-"+cal.getminutes());  

    document.getelementbyid("f_hour").value = cal.gethours();  

    document.getelementbyid("f_minute").value = cal.getminutes();  

};  

</script>  

除此之外，把chargetime的输入框初始化为当前事件。

<td>  

<input style="text-align: center" readonly="true" value="2010-10-05" name="date" id="f_date"/>  

</td>  

<input style="text-align: center" readonly="true" name="hour" id="f_hour" size="2" />  

<td>:</td>  

<input style="text-align: center" readonly="true" name="minute" id="f_minute" size="2" />  

<link rel="stylesheet" href="calendar/css/jscal2.css" />  

<link rel="stylesheet" href="calendar/css/border-radius.css" />  

<!--上面两个css文件是必须引入的-->  

<link rel="stylesheet" href="calendar/css/reduce-spacing.css" />  

<!--reduce-spacing.css不是必须的，引入该文件能使日历以一种紧凑的方式显示，实际效果就是日历变小了。-->  

<link title="gold" type="text/css" rel="stylesheet" href="calendar/css/gold/gold.css" />  

<!--这个是日历的皮肤文件，这一款本人觉得比较cool，下载下来默认还有其他几款皮肤，可以在calendar/css文件夹下找到，引入相应css后就能应用。-->  

<script src="calendar/js/jscal2.js"></script>  

<script src="src/js/lang/en.js" charset="utf8"></script>  

<!--en.js是语言文件，该日历支持语言繁多，当然是支持中文的。如果引入全部语言文件，日历还能根据操作系统的语言自动选择语言文件，蛮智能的。-->  

<form method="post" action="">  

<input type="text" name="date" id="date" />  

<!--下面这段脚本初始化一个日历对象，没有这段脚本日历将无法运行。-->  

<script type="text/javascript">  

new calendar({  

    inputfield: "date", //date对应输入日期的地方，这里只id为date的input输入框  

    trigger: "date",//trigger指点击后弹出日历的对象，这里定位id是date的input框  

    dateformat: "%y-%m-%d %h:%m:%s",//定义日期显示格式。  

    weeknumbers: true,//设为true则在日历左侧显示星期数  

    reversewheel:true,  

    onselect: function() { this.hide() }//这段代码是为了让用户在日历上选择日期后日历能自动隐藏  

</form>   

这个例子使用了popup模式，与官方给出的例子稍有区别，官方的例子通常都在input旁边有一个按钮，也就是trigger，点这个按钮就能弹 出一个日历，但经过试验这种方式在表单中并不好使，如果将带着额外trigger的input放到<form></form> 中，日历就会失效。因此将input field和trigger合二为一，实际效果是点击input输入框就会弹出日历，这样就不用担心用户手动向input中输入非法数据的问题了。

为了更好的使用该日历，下面附上日历的属性列表。

animation — 默认为true(ie6除外)，如果传递true给该属性，就会强制所有浏览器（包括ie6）应用动画，传递false则所有浏览器都禁用动画。

cont —内联显示的日历的容器（对popup类型无效），将要显示日历的容器（如div等）的id传递给此属性，则日历将在相应容器中以内敛方式显示（即日历在刷新页面后直接显示，popup类型则必须点击trigger后才显示日历）。

bottombar — 布尔类型，默认值true。在底部显示一个带有“today”按钮的工具条。

date — 日历默认显示的日期。

fdow — 一周的第一天，默认日期定义在各个语言文件中。例如传递0给属性指一周的从周日开始，传递1则是从周一开始，以此类推。

min — 日历可以选择的最早的日期.

max — 与min配合使用，表示日历可以选择的最大日期。

reversewheel — 默认为false。如果想反转鼠标滚轮滚动时日历的变化方向，设置此项为true。（jscal可以滚动滚轮控制日历翻页。）

selectiontype – 默认sel_single，只能选择一个日期。设为sel_multiple的话就能选择多个日期。

selection —设置日历初始化时默认选中的日期。在sel_single模式下可以设置默认选中当前日期，在sel_multiple 模式下可以设置默认选中一个时间段。

w eeknumbers —默认false。设置为true就会在左侧多出一栏显示周数。

c heckrange — 默认为false。当你开启了范围选择，但又不希望用户可以选择已被禁止的日期，那么开启此选项。

a lign — 默认的位置选项，仅针对popup类型。

inputfield — 这是一个与input关联的id，仅针对popup类型，日期将会显示在与这个id关联的input输入框中。

trigger — 按钮元素 （或其他任何元素）的id，点击这个元素可以显示日历，仅针对popup类型这是onclick时间的钩子函数。

dateformat — 日期格式化，以字符串形式格式化日期和时间的显示形式。

opacity — 透明度设置。0为不透明，1、2、3则会增加透明度。ie浏览器默认是1，其他浏览器默认是3。透明度过高会显著降低程序再ie浏览器中的执行速度。

titleformat — 定义日历中日期的显示形式。默认是“b% %y”，显示形式如“april 2010”。

showtime — 默认为false。显示时间选择器，设置为true会显示24小时的时间选择器，设置为12则显示带有am/pm的12小时时间选择器。

timepos — 时间选择器在底部栏目中的位置，默认是“right”，即在“today” 按钮的右侧，设置为“left”就会出现在“today”的左侧。

time — 日历时间选择器中显示的默认时间。默认显示当前时间，如果要改变默认时间，可以传递一个格式为“hhmm”d的整数，比如要显示9:45 pm,则传递2145in。

minutestep — 分钟增长和减少的步长。

onselect — 选择日期后要调用的函数。

onchange —日期时间发生变化后的回调函数。

ontimechange — 当时间选择器的时间发生变化后的回调函数，它将获得两个参数：日历的实例引用和时间选择器中的时间。

disabled —处理被禁用的日期的回调函数。

dateinfo — 获取某一个日期的额外信息的回调函数，比如给日期添加一个css 类名，或者当鼠标滑过日期时显示一段提示。

onfocus — 日历获得焦点后的回调函数。

onblur — 日历失去焦点后的回调函数。