My97 DatePicker切换日期类型

骑猪看日落 2022-07-15 14:27 162阅读 0赞

1、问题背景

日期类型：按日、按月、按年和按时间，切换到不同的类型，日历控件显示不同的日期

2、实现源码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>my97datepicker切换日期类型</title>
    		<script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>
    		<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
    		<script>
    			$(document).ready(function(){
    				$("#selectDate").change(function(){
    					var date = $(this).val();
    					if(date=="0")
    					{
    						$("#date").empty().html('<input type="text" id="day" name="day" class="Wdate" onClick="WdatePicker({startDate:\'%y-%M-%d\',dateFmt:\'yyyy-MM-dd\',alwaysUseStartDate:true})"/>');
    					}
    					else if(date=="1")
    					{
    						$("#date").empty().html('<input type="text" id="month" name="month" class="Wdate" onClick="WdatePicker({startDate:\'%y-%M\',dateFmt:\'yyyy-MM\',alwaysUseStartDate:true})"/>');
    					}
    					else if(date=="2")
    					{
    						$("#date").empty().html('<input type="text" id="year" name="year" class="Wdate" onClick="WdatePicker({startDate:\'%y\',dateFmt:\'yyyy\',alwaysUseStartDate:true})"/>');
    					}
    					else if(date=="3")
    					{
    						$("#date").empty().html('<input type="text" id="startTime" name="startTime" class="Wdate" onClick="WdatePicker({startDate:\'%y-%M-01 00:00:00\',dateFmt:\'yyyy-MM-dd HH:mm:ss\',alwaysUseStartDate:true})"/>至<input type="text" id="endTime" name="endTime" class="Wdate" onClick="WdatePicker({startDate:\'%y-%M-%d 23:59:59\',dateFmt:\'yyyy-MM-dd HH:mm:ss\',alwaysUseStartDate:true})"/>');
    					}
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<div>
    			<select id="selectDate" style="width: 200px;">
    				<option value="0">按日</option>
    				<option value="1">按月</option>
    				<option value="2">按年</option>
    				<option value="3">按时间</option>
    			</select>
    		</div>
    		<br>
    		<div id="date">
    			<input type="text" id="day" name="day" class="Wdate" onClick="WdatePicker({startDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true})"/>
    		</div>
    	</body>
    </html>

3、实现结果

（1）按日切换

![Image 1][]

（2）按月切换

![Image 1][]

（3）按年切换

![Image 1][]

（4）按时间切换

![Image 1][]

[Image 1]: