如你梦想和现实只是一步之遥,那么我觉得这一步就应该是执着和笨蛋式的坚持了吧。

easyui DateTimeBox(日期时间输入框)

JavaScript 独孤九剑 176℃

前提条件:要引入jquery、easyui

问题需求:实现时间选择,根据不同的条件初始化时间。

最终效果:
1506236496(1)

HTML代码

<label>选择时间</label>
		<select id="time-select">
<option value="1">自定义时间</option>
<option value="2">今天上午</option>
<option value="3">今天下午</option>
<option value="4">今天</option>
<option value="5">昨天</option>
<option value="6">最近2天</option>
<option value="7">最近7天</option>
<option value="8">最近1个月</option>
		</select>
		
		<label>开始时间</label>
		<input type="text" id="car-traces-starttime" style="width: 150px" >
		<label>结束时间</label>
		<input type="text" id="car-traces-endtime" style="width: 150px">
		

JS实现

//开始时间
    $('#car-traces-starttime').datetimebox({
        value: dw.getDateString(),
        required: true,
        showSeconds: true
    });
    //结束时间
    $('#car-traces-endtime').datetimebox({
        value: new Date().Format("yyyy-M-d h:m:s"),
        required: true,
        showSeconds: true
    });
    
    //为时间选择列表绑定事件
    $("#time-select").on("change", function(){
    	var value = parseInt($(this).val());
    	var startTime = new Date().Format("yyyy-M-d 00:00:00");
    	var endTime = new Date().Format("yyyy-M-d 23:59:59");
    	switch(value){
    		case 1://自定义时间
    		
    		break;
    		case 2://今天上午
    			startTime = new Date().Format("yyyy-M-d 00:00:00");
    	 		endTime = new Date().Format("yyyy-M-d 12:00:00");
    		break;
    		case 3://今天下午
    			startTime = new Date().Format("yyyy-M-d 12:00:00");
    	 		endTime = new Date().Format("yyyy-M-d 23:59:59");
    		break;
    		case 4://今天
    		break;
    		case 5://昨天
    			startTime = new Date(new Date().valueOf() - 24 * 60 * 60 * 1000 ).Format("yyyy-M-d 00:00:00");
    			endTime = new Date().Format("yyyy-M-d h:m:s");
    		break;
    		case 6://最近2天
    			startTime = new Date(new Date().valueOf() - 2 * 24 * 60 * 60 * 1000 ).Format("yyyy-M-d 00:00:00");
    			endTime = new Date().Format("yyyy-M-d h:m:s");
    		break;
    		case 7://最近7天
    			startTime = new Date(new Date().valueOf() - 7 * 24 * 60 * 60 * 1000 ).Format("yyyy-M-d 00:00:00");
    			endTime = new Date().Format("yyyy-M-d h:m:s");
    		break;
    		case 8://最近1个月
    			startTime = new Date(new Date().valueOf() - 30 * 24 * 60 * 60 * 1000 ).Format("yyyy-M-d 00:00:00");
    			endTime = new Date().Format("yyyy-M-d h:m:s");
    		break;
    	}
    	console.log(value)
    	console.log("开始时间:" + startTime + " 结束时间:" + endTime)
    	$('#car-traces-starttime').datetimebox('setValue', startTime); 
    	$('#car-traces-endtime').datetimebox('setValue', endTime);
    });
   

PS: 服务器页面生成花费时间 0.14秒 查询 44 次

转载请注明:KEEP3YUE » easyui DateTimeBox(日期时间输入框)

喜欢 (0)