jQuery带时间日期日历插件

jQuery带时间日期日历插件

1. 引入CSS

<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/Ecalendar.jquery.min.js"></script>

3. HTML代码

	<h1>ECalendar 日历插件</h1>
	<p>
		多功能jQuery日期控件 ECalendar 提供了WEB时间日历选择趋近完美的解决方案。
	</p>
	<h2>引用文件:</h2>
	<pre>
&lt;link rel="stylesheet" href="css/style.css" /&gt;
&lt;script src="js/jQuery-2.1.4.min.js"&gt;&lt;/script&gt;
&lt;script src="js/Ecalendar.jquery.min.js"&gt;&lt;/script&gt;</pre>
	<h2>调用代码:</h2>
	<pre>
&lt;div class="calendarWarp"&gt;
	&lt;input type="text" name="date" class='ECalendar' id="ECalendar_date"  value="2017-3-1 15:32"/&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
	$(function(){
		$("#ECalendar_date").ECalendar({
			 type:"time",   //模式,time: 带时间选择; date: 不带时间选择;
			 stamp : false,   //是否转成时间戳,默认true;
			 offset:[0,2],   //弹框手动偏移量;
			 format:"yyyy年mm月dd日",   //时间格式 默认 yyyy-mm-dd hh:ii;
			 skin:3,   //皮肤颜色,默认随机,可选值:0-8,或者直接标注颜色值;
			 step:10,   //选择时间分钟的精确度;
			 callback:function(v,e){} //回调函数
		});
	})
&lt;/script&gt;</pre>
<h2>案例一:日期选择</h2>
<div class="case">
	<div class="calendarWarp" style="">
		<input type="text" name="date" class='ECalendar' id="ECalendar_case1"	/>
	</div>
</div>
<h2>案例二:日期时间</h2>
<div class="case">
	<div class="calendarWarp" style="">
		<input type="text" name="date" class='ECalendar' id="ECalendar_case2"  value="2017-3-1 15:32"/>
	</div>
</div>
<h2>案例三:回调函数</h2>
<div class="case">
	<div class="calendarWarp" style="">
		<input type="text" name="date" class='ECalendar' id="ECalendar_case3"  value="2017-3-1 15:32"/>
	</div>
	<div class="callback">
		您选择的时间是: <span></span>
	</div>
</div>
<script type="text/javascript">
	$(function(){
			$("#ECalendar_case1").ECalendar({
					 type:"date",
					 skin:"#233",
					 offset:[0,2]
			});
			$("#ECalendar_case2").ECalendar({
					 type:"time",
					 offset:[0,2]
			});
			$("#ECalendar_case3").ECalendar({
					 type:"time",
					 stamp:false,
					 skin:5,
					 format:"yyyy年mm月dd日 hh时ii分",
					 callback:function(v,e)
					 {
						 $(".callback span").html(v)
					 }
			});
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到