Jquery控制My97DatePicker控件的日期格式

最近的项目,要取时间段进行统计,按照年月日时等方法,取按年统计的时候,我们希望时间控件只能选择年,按照月统计时候,我们希望只能选择年月这两项,因此写了这个小程序。
firefox测试可用。

<html>
<head>
<title>
测试jquery控制My97DatetimePicker格式
</title>
<script type="text/javascript" src="WdatePicker.js"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<script type="text/javascript" >
$(document).ready(function(){
$('.time').bind('focus',function(){WdatePicker()});
});
function changeAttr1(){
$('#start').unbind('focus');
$('#start').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy'});});
$('#end').unbind('focus');
$('#end').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy',minDate:'#F{$dp.$D(\'start\')}'});});
}
function changeAttr2(){
$('#start').unbind('focus');
$('#start').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月'});});
$('#end').unbind('focus')
$('#end').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月',minDate:'#F{$dp.$D(\'start\')}'});});
}
function changeAttr3(){
$('#start').unbind('focus');
$('#start').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年M月d日'});});
$('#end').unbind('focus');
$('#end').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年M月d日',minDate:'#F{$dp.$D(\'start\')}'});});
}
function changeAttr4(){
$('#start').unbind('focus');
$('#start').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年M月d日 HH时'});});
$('#end').unbind('focus');
$('#end').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年M月d日 HH时',minDate:'#F{$dp.$D(\'start\')}'});});
}

</script>
<input id="start" class="time" type="text"/>
<input id="end" class="time" type="text"/>
<input id="1" type="button" value="变为年" onclick="changeAttr1()">
<input id="2" type="button" value="变为月" onclick="changeAttr2()">
<input id="3" type="button" value="变为日" onclick="changeAttr3()">
<input id="4" type="button" value="变为时" onclick="changeAttr4()">
</body>
</html>

效果图:
[img]http://dl.iteye.com/upload/attachment/348543/d13332c6-9851-36b3-9948-6a699da0d431.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/348546/a12ada97-65db-3d5f-a385-8337ec43d659.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/348549/24f63315-9c84-36b9-bd35-b1fdbf5e228c.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/348551/544aa6d4-065a-344e-a11f-230536b2c1a9.jpg[/img]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
功能相当强大 更人性化,更全面的功能 大部分日期控件都具备功能如:带时间显示,支持周显示,自定义格式,自动纠错,智能纠错,起始日期,操作按钮自定义,快速选择日期,支持多种调用模式等,My97DatePicker在这些方面做得更全面,更人性化,并且速度一流. 2.强大的日期范围限制功能 支持静态限制,动态限制,脚本自定义限制,以及无效天和无效日期功能,利用这样功能你可以任意定制不能选择的日期,这些日期即使毫无规律,毫无连续性,你也可以通过这些功能的组合使用轻松搞定. 3.自定义事件和丰富的API库 如果你需要做一些附加的操作,你也不必担心,日期控件自带的自定义事件可以满足你的需求.此外,你还可以在自定义事件中调用提供的API库来做更多的运算和扩展,绝对可以通过很少的代 码满足你及其个性化的需求. 4.多语言支持和自定义皮肤支持 通过lang属性,可以为每个日期控件单独配置语言,当然也可以通过WdatePicker.js配置全局的语言,皮肤也是一样,只要配置skin属性即可.这样一个页面中可以显示多种语言,多种皮肤的日期控件,更棒的是,他们之间的切换是无刷新的. 5.跨无限级框架显示和自动选择显示位置 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,My97日期控件是可以跨无限级框架显示的,并且当控件处在页面边界是,它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做调整.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值