最近的项目,要取时间段进行统计,按照年月日时等方法,取按年统计的时候,我们希望时间控件只能选择年,按照月统计时候,我们希望只能选择年月这两项,因此写了这个小程序。
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>
效果图:
- 大小: 35.5 KB
- 大小: 37.7 KB
- 大小: 50.5 KB
- 大小: 47.8 KB
分享到:
相关推荐
3. **日期格式化**:My97DatePicker可以输出多种日期格式,如“YYYY-MM-DD”、“MM/DD/YYYY”等,满足不同的数据存储或展示需求。 4. **日期范围限制**:开发者可以设定日期选择的最小值和最大值,防止用户选择超出...
【jQuery时间控件 My97DatePicker】是一款广泛应用于网页中的日期选择插件,以其便捷性和易用性在IT行业中颇受欢迎。它允许用户通过简单的HTML和JavaScript代码就能在网页上添加一个功能强大的日期选择器,极大地...
My97DatePicker支持多种日期格式,可以根据项目需求进行定制。 在JavaScript方面,My97DatePicker是基于原生JS编写,无需依赖其他库如jQuery,这降低了页面加载时间,提高了性能。同时,它提供了一系列的API接口和...
与jQuery UI的DatePicker等其他日期控件相比,My97DatePicker在性能、易用性和功能上都有其独特之处。虽然某些现代前端框架如Bootstrap也提供了日期选择插件,但My97DatePicker的灵活性和本地化支持依然使其在一些...
由于其轻量级和API友好,My97DatePicker可以无缝集成到各种前端框架和库中,如jQuery、Vue.js、React等,提高开发效率。 总的来说,My97DatePicker是一款强大且易用的前端日期选择插件,它提供了丰富的配置选项和...
2. **高度可定制**:MY97DatePicker支持丰富的配置选项,如日期格式、显示样式、语言等,可以根据项目需求进行个性化定制,满足多样化的设计需求。 3. **性能优秀**:MY97DatePicker的代码优化做得相当出色,加载...
My97DatePicker是一款广泛应用于Web开发中的JavaScript日历控件,以其人性化的界面设计、全面的功能和强大的定制性而受到开发者们的青睐。这款控件在处理日期选择和时间管理方面表现出色,尤其适用于需要用户输入...
- 支持多种日期格式:My97DatePicker3.0可以根据需求将日期格式化为不同的字符串格式,如"YYYY-MM-DD"、"MM/DD/YYYY"等。 - 自定义格式化规则:开发者可以自定义日期格式,满足特定的输出需求。 4. **日期范围...
- **配置参数**:My97DatePicker提供了一系列配置参数,如是否显示星期、是否显示时分秒、默认选中日期等,通过这些参数可以精确控制日期控件的行为。 - **回调函数**:可以设置选择日期后的回调函数,进行进一步...
"时间控件my97datepicker"是一款广泛应用于Web开发中的日期选择组件,尤其在C#和Java编程语言中被广大开发者所青睐。它以其丰富的功能、良好的用户界面和多语言支持,大大提升了用户在处理日期输入时的体验。本文将...
总的来说,My97DatePicker是一款强大且灵活的时间控件,无论是在简单的网页表单还是复杂的Web应用中,都能提供优秀的日期选择体验。开发者可以根据项目需求,利用其丰富的功能和自定义选项,打造出满足用户需求的...
My97 DatePicker Beta提供了丰富的配置选项,例如`isShowClear`用于控制是否显示清除按钮,`readOnly`控制文本框是否只读,`startDate`和`endDate`设定日期范围等。详细配置可参考官方文档。 5. **优化与性能**: ...
在实际开发中,My97 DatePicker 可以方便地与其他JavaScript库(如jQuery)结合使用,通过API接口实现更复杂的功能,如日期限制、自定义事件处理等。此外,由于其源码开放,开发者还可以深入研究和扩展其功能,以...
5. **兼容性**:考虑到浏览器的多样性,My97DatePicker控件具有良好的浏览器兼容性,能够很好地运行在IE6及以上版本以及其他主流浏览器,如Chrome、Firefox、Safari等。 6. **性能优化**:为了提供流畅的用户体验,...
My97DatePicker是一款广泛应用于Web开发中的JavaScript时间控件,以其功能强大、界面友好和兼容性优秀而受到开发者们的喜爱。这款控件主要用于方便用户在网页上选择日期和时间,提高了用户输入数据的准确性和效率。 ...
5. **日期格式化**:My97 DatePicker支持多种日期格式,开发者可以通过配置选项来指定日期的显示格式。 6. **事件处理**:组件提供了多种事件,如日期选择后的回调函数,允许开发者在用户选择日期后执行特定的操作...
My97DatePicker的配置选项非常丰富,比如`dateFmt`用于设置日期格式,`lang`用于切换语言环境,`isShowClear`控制是否显示清除按钮等。开发者可以根据项目的实际需求灵活调整这些选项,以实现最佳的用户体验。 相比...