`
BabyDuncan
  • 浏览: 584368 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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>

效果图:







  • 大小: 35.5 KB
  • 大小: 37.7 KB
  • 大小: 50.5 KB
  • 大小: 47.8 KB
分享到:
评论
1 楼 lbhappy1990 2012-06-14  
变成只选择年份之后 传到后台值的类型是什么呢

相关推荐

    My97DatePicker(几种日历控件/js/实例演示)

    3. **日期格式化**:My97DatePicker可以输出多种日期格式,如“YYYY-MM-DD”、“MM/DD/YYYY”等,满足不同的数据存储或展示需求。 4. **日期范围限制**:开发者可以设定日期选择的最小值和最大值,防止用户选择超出...

    jquery时间控件 My97DatePicker

    【jQuery时间控件 My97DatePicker】是一款广泛应用于网页中的日期选择插件,以其便捷性和易用性在IT行业中颇受欢迎。它允许用户通过简单的HTML和JavaScript代码就能在网页上添加一个功能强大的日期选择器,极大地...

    My97DatePicker js的时间日期控件

    My97DatePicker支持多种日期格式,可以根据项目需求进行定制。 在JavaScript方面,My97DatePicker是基于原生JS编写,无需依赖其他库如jQuery,这降低了页面加载时间,提高了性能。同时,它提供了一系列的API接口和...

    日期控件 时间控件My97DatePicker

    与jQuery UI的DatePicker等其他日期控件相比,My97DatePicker在性能、易用性和功能上都有其独特之处。虽然某些现代前端框架如Bootstrap也提供了日期选择插件,但My97DatePicker的灵活性和本地化支持依然使其在一些...

    My97DatePicker前端日期插件

    由于其轻量级和API友好,My97DatePicker可以无缝集成到各种前端框架和库中,如jQuery、Vue.js、React等,提高开发效率。 总的来说,My97DatePicker是一款强大且易用的前端日期选择插件,它提供了丰富的配置选项和...

    MY97datepicker.rar

    2. **高度可定制**:MY97DatePicker支持丰富的配置选项,如日期格式、显示样式、语言等,可以根据项目需求进行个性化定制,满足多样化的设计需求。 3. **性能优秀**:MY97DatePicker的代码优化做得相当出色,加载...

    js日历控件 My97DatePicker

    My97DatePicker是一款广泛应用于Web开发中的JavaScript日历控件,以其人性化的界面设计、全面的功能和强大的定制性而受到开发者们的青睐。这款控件在处理日期选择和时间管理方面表现出色,尤其适用于需要用户输入...

    My97DatePicker3.0日历控件

    - 支持多种日期格式:My97DatePicker3.0可以根据需求将日期格式化为不同的字符串格式,如"YYYY-MM-DD"、"MM/DD/YYYY"等。 - 自定义格式化规则:开发者可以自定义日期格式,满足特定的输出需求。 4. **日期范围...

    My97DatePicker日期控件

    - **配置参数**:My97DatePicker提供了一系列配置参数,如是否显示星期、是否显示时分秒、默认选中日期等,通过这些参数可以精确控制日期控件的行为。 - **回调函数**:可以设置选择日期后的回调函数,进行进一步...

    时间控件my97datepicker

    "时间控件my97datepicker"是一款广泛应用于Web开发中的日期选择组件,尤其在C#和Java编程语言中被广大开发者所青睐。它以其丰富的功能、良好的用户界面和多语言支持,大大提升了用户在处理日期输入时的体验。本文将...

    My97DatePicker(时间控件)

    总的来说,My97DatePicker是一款强大且灵活的时间控件,无论是在简单的网页表单还是复杂的Web应用中,都能提供优秀的日期选择体验。开发者可以根据项目需求,利用其丰富的功能和自定义选项,打造出满足用户需求的...

    My97DatePickerBeta 显示日期的textbox

    My97 DatePicker Beta提供了丰富的配置选项,例如`isShowClear`用于控制是否显示清除按钮,`readOnly`控制文本框是否只读,`startDate`和`endDate`设定日期范围等。详细配置可参考官方文档。 5. **优化与性能**: ...

    My97DatePicker.zip

    在实际开发中,My97 DatePicker 可以方便地与其他JavaScript库(如jQuery)结合使用,通过API接口实现更复杂的功能,如日期限制、自定义事件处理等。此外,由于其源码开放,开发者还可以深入研究和扩展其功能,以...

    My97DatePicker 日历控件

    5. **兼容性**:考虑到浏览器的多样性,My97DatePicker控件具有良好的浏览器兼容性,能够很好地运行在IE6及以上版本以及其他主流浏览器,如Chrome、Firefox、Safari等。 6. **性能优化**:为了提供流畅的用户体验,...

    My97DatePicker时间控件

    My97DatePicker是一款广泛应用于Web开发中的JavaScript时间控件,以其功能强大、界面友好和兼容性优秀而受到开发者们的喜爱。这款控件主要用于方便用户在网页上选择日期和时间,提高了用户输入数据的准确性和效率。 ...

    封装的My97DatePicker日历

    5. **日期格式化**:My97 DatePicker支持多种日期格式,开发者可以通过配置选项来指定日期的显示格式。 6. **事件处理**:组件提供了多种事件,如日期选择后的回调函数,允许开发者在用户选择日期后执行特定的操作...

    My97DatePicker 时间控件

    My97DatePicker的配置选项非常丰富,比如`dateFmt`用于设置日期格式,`lang`用于切换语言环境,`isShowClear`控制是否显示清除按钮等。开发者可以根据项目的实际需求灵活调整这些选项,以实现最佳的用户体验。 相比...

Global site tag (gtag.js) - Google Analytics