Jquery制御My 97 DatePickerコントロールの日付フォーマット

4277 ワード

原文住所:http://blog.csdn.net/jimmy609/article/details/7569785
最近の項目は、時間帯を取って統計を行い、年月日などの方法で年別に統計を取る場合、時間コントロールは年しか選択できないことを望んでいます.月別に統計する場合、年月しか選択できないことを望んでいます.そのため、この小さなプログラムを書きました.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>

効果図:
Jquery控制My97DatePicker控件的日期格式_第1张图片
Jquery控制My97DatePicker控件的日期格式_第2张图片
Jquery控制My97DatePicker控件的日期格式_第3张图片
Jquery控制My97DatePicker控件的日期格式_第4张图片