[分享]精心收集的3款JavaScript实现的日期时间选择控件

最新推荐文章于 2016-09-04 17:49:00 发布

masky5310

最新推荐文章于 2016-09-04 17:49:00 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： javascript stylesheet input iframe table class

本文链接：https://blog.youkuaiyun.com/masky5310/article/details/5218122

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

不多说，先上图

看到了吧，效果还是不错的。而且后面两个可以选择具体到时间分钟。个人比较喜欢第二个，而且都是OS的。

下面就不多哈了。:)

其实也没什么多说的，也就是在自己的项目中导入JavaScript库和Stylesheet样式文件，那就直接上代码，

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <mce:script language="javascript" type="text/javascript" src="js/script.js" mce_src="js/script.js"></mce:script> <mce:script language="javascript" type="text/javascript" src="Tools/My97DatePicker/WdatePicker.js" mce_src="Tools/My97DatePicker/WdatePicker.js"></mce:script> <mce:script type="text/javascript" src="js/JScript.js" mce_src="js/JScript.js" ></mce:script> <link type="text/css" rel="Stylesheet" href="App_Themes/theme/StyleSheet.css" mce_href="App_Themes/theme/StyleSheet.css"/> </head> <body> <form id="form1" runat="server"> <div> <div id="frist"> <table> <tr> <td style="width:400px"> <input id="tb_CheckInDate" type="text"/><input type="button" οnclick="setday(this,document.all.tb_CheckInDate)" value="..."/> </td> <td style="width:400px"> <input type="text" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})" /> </td> <td style="width:400px"> <input class="input" type="text" name="bgntime" style="width:120" value="" id="bgntime" onClick="showCal(bgntime);"> <div id="dateTime" οnclick="event.cancelBubble=true" style="position:absolute;visibility:hidden;width:100px;height:100px;left:0px;top:0px;z-index:100;"> <table class="cal_table" border="0"> <tr> <td> <mce:script type="text/javascript"></mce:script> </td> </tr> <tr> <td valign="top" align="center"> <mce:script type="text/javascript"></mce:script> </td> </tr> </table> <iframe src="javascript:false" mce_src="javascript:false" style="height:200px;" class="menu_iframe"></iframe> </div> <mce:script event="onclick()" for="document"></mce:script> </td> </tr> </table> </div> <div id="second"> </div> </div> </form> </body> </html>

主要的关键代码也就是上面的，这几条是导入脚本库和样式表的，如下；

<mce:script language="javascript" type="text/javascript" src="js/script.js" mce_src="js/script.js"></mce:script> <mce:script language="javascript" type="text/javascript" src="Tools/My97DatePicker/WdatePicker.js" mce_src="Tools/My97DatePicker/WdatePicker.js"></mce:script> <mce:script type="text/javascript" src="js/JScript.js" mce_src="js/JScript.js" ></mce:script> <link type="text/css" rel="Stylesheet" href="App_Themes/theme/StyleSheet.css" mce_href="App_Themes/theme/StyleSheet.css"/>

值得说明的地方是，在使用第2张控件时，需要引入如下图的整个Tools文件夹