当前位置:首页 » 素材参考 » xw素材
扩展阅读
中国网络原创新人乐团 2021-03-31 20:26:56
党政视频素材 2021-03-31 20:25:44
厦门大学统计学硕士 2021-03-31 20:25:36

xw素材

发布时间: 2021-03-21 20:16:17

Ⅰ 怎么实现鼠标点击input输入框弹出一个日期选择框

  • <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • <htmlxmlns="http://www.w3.org/1999/xhtml">

  • <head>

  • <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

  • <title>点击text文本框弹出日期选择器</title>

  • <!--可无视-->

  • <styletype="text/css">

  • body{margin:0;padding:0;font:14pxVerdana,Arial,sans-serif;line-height:200%;}

  • #content{padding-left:50px;padding-right:50px;}

  • #contenth2{font-size:18px;color:#1E9300;padding-top:8px;margin-bottom:8px;}

  • #contenth3{margin-top:8px;margin-bottom:8px;FONT:bold14px宋体,tahoma,arial,sans-serif;COLOR:#0033CC;}

  • #contentdiv{margin-top:10px;margin-bottom:10px;border:#666solid1px;padding:10px;}

  • #contentspan{color:#f00;font-weight:bold;}

  • ul,ol{color:#000000;}

  • </style>

  • <!--必要js文件/样式表已经引入在js里面了-->

  • <scripttype="text/javascript"src="lhgcore.js"></script>

  • <scripttype="text/javascript"src="lhgcalendar.js"></script>

  • </head>

  • <body>

  • <divid="content">

  • <h2>常规弹出日历示例页</h2>

  • <hrsize="1"style="width:400px;"align="left">

  • <h3>1.在控件下面或右面弹出日历组件(默认是在下面弹出)</h3>

  • <div>

  • <inputtype="text"id="c1"onclick="J.calendar.get();"/>显示在下面

  • <inputtype="text"id="c2"onclick="J.calendar.get({dir:'right'});"/>显示在右面

  • </div>

  • <h3>2.通过按钮或图片等其它控件弹出日历组件</h3>

  • <div>

  • <inputtype="text"id="c3"/>

  • <inputtype="button"id="btn"onclick="J.calendar.get({id:'c3'});"value="弹出"/>

  • <inputtype="text"id="c4"/>

  • <imgalign="absmiddle"src="images/date.gif"onclick="J.calendar.get({id:'c4'});"/>

  • </div>

  • <h3>3.显示日期的2种格式(默认为年-月-日格式)</h3>

  • <div>

  • <inputtype="text"id="c5"onclick="J.calendar.get();"/>年-月-日格式

  • <inputtype="text"id="c6"onclick="J.calendar.get({type:'/'});"/>月/日/年格式

  • </div>

  • <h3>4.在文本框显示带时间的日期</h3>

  • <div>

  • <inputtype="text"id="c7"onclick="J.calendar.get({time:true});"/>

  • </div>

  • <h3>5.日期范围限制</h3>

  • <div>

  • <inputtype="text"id="c8"onclick="J.calendar.get({to:'2009-8-8,min'});"/>只能选择2009-8-8以前的日期

  • <inputtype="text"id="c9"onclick="J.calendar.get({to:'2009-8-18,max'});"/>只能选择2009-8-18以后的日期<br/>

  • <inputtype="text"id="c10"onclick="J.calendar.get({to:'c11,min'});"/>

  • <inputtype="text"id="c11"onclick="J.calendar.get({to:'c10,max'});"/>这2个文本框,前面的日期不能大于后面的日期,后面的不能小于前面的日期。

  • </div>

  • </div>

  • <divstyle="text-align:center;margin:50px0;font:normal14px/24px'MicroSoftYaHei';">

  • </div>

  • </body>

  • </html>