Js My97DatePicker时间控件

最新推荐文章于 2021-04-19 19:10:29 发布

原创最新推荐文章于 2021-04-19 19:10:29 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Javascript 专栏收录该内容

116 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现日期选择器，并通过示例展示了如何设置开始和结束时间，包括指定时间的方式及不同时间显示的效果。涵盖了基本日期格式、时间范围设定以及时间精度的调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先导入主要js:


 <script type="text/javascript" src="date/My97DatePicker/WdatePicker.js"/>


<label style="padding: 3px"><span>开始时间：</span>
<input type="text" id="dd"						onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'sdd\',{M:-4});}',maxDate:'#F{$dp.$D(\'sdd\',{d:0});}'})" class="Wdate" />
</label>

<label style="padding: 3px">
<span>结束时间：</span>
<input type="text" id="sdd" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'dd\');}',maxDate:'#F{$dp.$D(\'dd\',{M:+4});}'})"
class="Wdate" />					
</label>

效果如下图：

[img]http://dl2.iteye.com/upload/attachment/0098/2952/85d294bd-0508-36ca-a4a5-40cf4391946c.jpg[/img]

[img]http://dl2.iteye.com/upload/attachment/0098/2956/f3e46308-d4a8-382d-808e-50bfff1f2918.jpg[/img]

如果需要在开始的时候指定时间则：


$(function() {
    //设置历史时间 
	var date = new Date();
	month = (date.getMonth()+1)<10?'0'+(date.getMonth()+1):date.getDate() ;
	day = date.getDate()<10?'0'+(date.getDate()):date.getDate() ;
	hours = date.getHours()<10?'0'+(date.getHours()):date.getHours() ;
	minutes = date.getMinutes()<10?'0'+(date.getMinutes()):date.getMinutes();
	seconds = date.getSeconds()<10?'0'+(date.getSeconds()):date.getSeconds();
	$("#开始时间id").val(date.getFullYear()+'-'+month+'-'+day+' 00:00:00');
	$("#结束时间id").val(date.getFullYear()+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds);
});

2.日期选择没有到时分秒的方式。


<input id="开始时间" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="Wdate"/>

<input id="结束时间" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'exestate\')}',dateFmt:'yyyy-MM-dd'})" class="Wdate"/>

效果如下图：

[img]http://dl2.iteye.com/upload/attachment/0098/2959/b9fb582a-6584-3e94-93ad-518ebc578cf9.jpg[/img]

[img]http://dl2.iteye.com/upload/attachment/0098/2961/98c81679-7474-32ab-82b7-b2c6ee6d6ac1.jpg[/img]