<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>在线演示 - Demo by http://www.codefans.net</title>
<meta name="keywords" content="lhg,lhgcalendar,calendar,date,datepicker,time,日历,弹出日历,js日历,组件,js组件,js库,lhgcore,javascript,jquery,window,clientside,control,open source,LGPL,dhtml,html,xhtml,word,plugins"/>
<meta name="description" content="lhgcalendar是一功能强大的简单迷你并且高效的弹出日历组件,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+."/>
<meta name="copyright" content="lhgcore.com"/>
<script type="text/javascript" src="lhgcore.min.js"></script>
<script type="text/javascript" src="lhgcalendar.min.js"></script>
<script type="text/javascript">
J(function(){
J('#inp1').calendar();
J('#img').calendar({ id:'inp3' });
J('#inp4').calendar({ btnBar:false });
J('#inp5').calendar({ format:'yyyy年MM月dd日 HH时mm分ss秒' });
J('#inp6').calendar({ format:'yyyy年MM月dd日', real:'realInp' });
J('#inp7').calendar({ minDate:'2011-04-10', maxDate:'2011-05-27' });
J('#inp8').calendar({ maxDate:'%y-%M-%d' });
J('#inp9').calendar({ minDate:'%y-%M-%d' });
J('#inp10').calendar({ minDate:'%y-04-%d', maxDate:'%y-%M-25' });
J('#inp11').calendar({ maxDate:'#inp12' });
J('#inp12').calendar({ minDate:'#inp11' });
J('#inp13').calendar({ maxDate:'#inp14', format:'yyyyMMdd', targetFormat:'yyyy年MM月dd日' });
J('#inp14').calendar({ minDate:'#inp13', format:'yyyy年MM月dd日', targetFormat:'yyyyMMdd' });
J('#inp15').calendar({ disWeek:'6' });
J('#inp16').calendar({ disWeek:'0,4' });
J('#inp17').calendar({ disDate:['5$'] });
J('#inp18').calendar({ disDate:['^19'] });
J('#inp19').calendar({ disDate:['2011-05-05','2011-05-24'] });
J('#inp20').calendar({ disDate:['2011-..-04','2011-05-29'] });
J('#inp21').calendar({ disDate:['200[0-8]-05-01','2011-05-29'] });
J('#inp22').calendar({ disDate:['....-..-07','%y-%M-%d'] });
J('#inp23').calendar({ disDate:['5$'], enDate:true });
J('#inp24').calendar({ onSetDate:function(){alert(this.inpObj.value);} });
J('#inp25').calendar({ onSetDate:function(){alert('日期框原来的值为:'+this.inpObj.value+',要用新选择的值:'+this.getDateStr('date')+'覆盖吗?');} });
});
function opcal(){
J.calendar.Show();
}
</script>
</head>
<body>
<div class="container">
<div class="header">
<div class="header_logo"><a href="index.html"><img border="0" src="images/lhgcal_logo.gif" alt="lhgcalendar"/></a></div>
</div>
<div class="line"> </div>
<div class="demo_content">
<h2>日历的各种在线演示示例</h2>
<p>jQuery方式和普通函数式</p>
<ol>
<li>
<h3>jQuery方式调用</h3>
<pre class="prettyprint">
J(function(){
J('#inp1').calendar();
});
</pre>
<p><input class="runcode" id="inp1"/></p>
</li>
<li>
<h3>普通函数方式调用</h3>
<pre class="prettyprint">
function opcal(){
J.calendar.Show();
}
//输入框的代码:
<input class="runcode" id="inp2" onclick="opcal();"/>
</pre>
<p><input class="runcode" id="inp2" onclick="opcal();"/></p>
</li>
</ol>
<p>下拉,输入,导航选择日期(年月输入框都具备以下三种特性)</p>
<ol>
<li>
<h3>通过导航图标选择</h3>
<p><img src="images/lhgcalendar1.gif"/></p>
</li>
<li>
<h3>直接使用键盘输入数字</h3>
<p><img src="images/lhgcalendar2.gif"/></p>
</li>
<li>
<h3>直接从弹出的下拉框中选择</h3>
<p><img src="images/lhgcalendar3.gif"/></p>
</li>
</ol>
<p>常规功能使用演示</p>
<ol>
<li>
<h3>id参数(注意这里的id参数的值是左边输入框的id),图标触发</h3>
<pre class="prettyprint">
J('#img').calendar({ id:'inp3' });
</pre>
<p><input class="runcode" id="inp3" style="background-image:none"/> <img id="img" align="absmiddle" src="images/iconDate.gif"/></p>
</li>
<li>
<h3>是否显示按钮栏</h3>
<pre class="prettyprint">
J('#inp4').calendar({ btnBar:false });
</pre>
<p><input class="runcode" id="inp4"/></p>
</li>
<li>
<h3>自动选择显示位置</h3>
<pre class="prettyprint">
当控件处在页面边界时,它会自动选择显示的位置,所以没有必要担心弹出框会被页面边界遮住的问题了。
</pre>
<p></p>
</li>
<li>
<h3>自定义格式(其它各种自定义格式请参阅 <a href="../api/api.html">API参数控制接口</a>)</h3>
<pre class="prettyprint">
J('#inp5').calendar({ format:'yyyy年MM月dd日 HH时mm分ss秒' });
</pre>
<p><input class="runcode" id="inp5" style="width:200px;"/></p>
</li>
<li>
<h3>取得系统可识别的日期值(重要)</h3>
<pre class="prettyprint">
// 类似于 1999年7月5日 这样的日期是不能够被系统识别的,他必须转换为能够识别的类型如 1999-07-05
J('#inp6').calendar({ format:'yyyy年MM月dd日', real:'realInp' });
// input文本框的代码是:
<input class="runcode" id="inp6"/><input class="runcode" id="realInp" type="text"/>
// 注意:在实际应用中,一般会把real指定为一个hidden控件,这里是为了把真实值展示出来,所以使用文本框
// 关键属性: real 指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值
</pre>
<p><input class="runcode" id="inp6"/>真实的日期值是:<input class="runcode" id="realInp" type="text"/></p>
</li>
<li>
<h3>自动纠错功能</h3>
<pre class="prettyprint">
当日期框中的值不符合格式时,系统会尝试自动修复,显示当前日期。
</pre>
</li>
</ol>
<p>日期范围限制</p>
<ol>
<li>
<h3>静态限制</h3>
<pre class="prettyprint">
// 限制日期的范围是 2011-04-10到2008-05-27 (注意minDate和maxDate的格式一定要是yyyy-MM-dd)
J('#inp7').calendar({ minDate:'2011-04-10', maxDate:'2011-05-27' });
</pre>
<p><input class="runcode" id="inp7"/></p>
</li>
<li>
<h3>动态限制(请参阅 <a href="../api/api.html">API参数控制接口</a> 里的动态变量表)</h3>
<pre class="prettyprint">
// 只能选择今天以前的日期
J('#inp8').calendar({ maxDate:'%y-%M-%d' });
</pre>
<p><input class="runcode" id="inp8"/></p>
</li>
<li>
<h3>只能选择今天以后的日期</h3>
<pre class="prettyprint">
J('#inp9').calendar({ minDate:'%y-%M-%d' });
</pre>
<p><input class="runcode" id="inp9"/></p>
</li>
<li>
<h3>只能选择本年4月当前天到当前月的25号之间的日期</h3>
<pre class="prettyprint">
J('#inp10').calendar({ minDate:'%y-04-%d', maxDate:'%y-%M-25' });
</pre>
<p><input class="runcode" id="inp10"/></p>
</li>
<li>
<h3>前面的日期不能大于后面的日期</h3>
<pre class="prettyprint">
// #inp12为一个#号加上后面输入框的id
J('#inp11').calendar({ maxDate:'#inp12' });
// #inp11为一个#号加上前面输入框的id
J('#inp12').calendar({ minDate:'#inp11' });
</pre>
<p>有效期从<input class="runcode" id="inp11"/>到<input class="runcode" id="inp12" type="text"/></p>
</li>
<li>
<h3>前面的日期不能大于后面的日期(targetFormat参数示例)</h3>
<pre class="prettyprint">
// #inp14为一个#号加上后面输入框的id
J('#inp13').c
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
lhgcalendar-日期选择控件(js控件-实例).zip (15个子文件)
lhgcalendar-日期选择控件
lhgcalendar.css 4KB
images
lhgcal_bg.gif 957B
lhgcal_logo.gif 1014B
lhgcal_year.gif 72B
lhgcal_month.gif 72B
ico-arrow.gif 9KB
lhgcal_x.gif 79B
lhgcalendar2.gif 5KB
lhgcalendar1.gif 5KB
iconDate.gif 172B
lhgcalendar3.gif 6KB
demo1.html 2KB
lhgcalendar.min.js 12KB
demo.html 13KB
lhgcore.min.js 19KB
共 15 条
- 1
资源评论
- sophia20125202014-06-11只有一个html实例,变成jsp文件后就没有用了。。。
- manhon2015-05-05测试过,好用
- liujinping6172015-02-13可以用,多谢
- kucao2014-10-25测试过,好用,谢谢
- fAesop2015-02-05这个是2.0版本的,可以找到最新的3.0版了。
a284065570
- 粉丝: 19
- 资源: 23
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功